CSS: Text under image div in empty space

user9745009

I'm trying to modify the default bootstrap blog template in order to add a small image next to the title. I managed to add the image with margin-left:auto; but now the text won't go under it and only uses half of card:

  .blog-header {
        line-height: 1;
        border-bottom: 1px solid #e5e5e5;
      }
      
      .blog-header-logo {
        font-family: "Playfair Display", Georgia, "Times New Roman", serif;
        font-size: 2.25rem;
      }
      
      .blog-header-logo:hover {
        text-decoration: none;
      }
      
      h1, h2, h3, h4, h5, h6 {
        font-family: "Playfair Display", Georgia, "Times New Roman", serif;
      }
      
      .display-4 {
        font-size: 2.5rem;
      }
      @media (min-width: 768px) {
        .display-4 {
          font-size: 3rem;
        }
      }
      
      .nav-scroller {
        position: relative;
        z-index: 2;
        height: 2.75rem;
        overflow-y: hidden;
      }
      
      .nav-scroller .nav {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }
      
      .nav-scroller .nav-link {
        padding-top: .75rem;
        padding-bottom: .75rem;
        font-size: .875rem;
      }
        
      .flex-auto {
        -ms-flex: 0 0 auto;
        -webkit-box-flex: 0;
        flex: 0 0 auto;
      }
      
      .h-250 { height: 250px; }
      /* @media (min-width: 768px) {
        .h-md-250 { height: 250px; }
      } */
      
      .border-top { border-top: 1px solid #e5e5e5; }
      .border-bottom { border-bottom: 1px solid #e5e5e5; }
      
      .box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
      
      /*
       * Blog name and description
       */
      .blog-title {
        margin-bottom: 0;
        font-size: 2rem;
        font-weight: 400;
      }
      .blog-description {
        font-size: 1.1rem;
        color: #999;
      }

      
      /* Pagination */
      .blog-pagination {
        margin-bottom: 4rem;
      }
      .blog-pagination > .btn {
        border-radius: 2rem;
      }
       
      .imagine {
        max-width: 250px;
      }
    
      @media (min-width: 990px) {
        .imagine {
          max-width: 350px;
        }
      }
    
      @media (max-width: 767px) {
        .imagine {
          max-width: 120px;
          max-height: 90px;
          margin-top: 15px;
          margin-right: 15px;
          border-radius: 4px;
        }
      }
    
      @media (max-width: 320px) {
        .imagine {
          display: none;
        }
      }
    
      @media (max-width: 767px) {
        .card {
          flex-direction: row;
        }
      }

    <!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Bootstrap Blog</title>  
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
          crossorigin="anonymous">
        <link href="https://fonts.googleapis.com/css?family=Playfair+Display:700,900" rel="stylesheet">
        <link href="css/blog.css" rel="stylesheet">
      </head>

  <body>

    <div class="container">
      <div class="row mb-2">
        <div class="col-md-12">
          <div class="card flex-md-row mb-4 box-shadow h-md-250">
            <div class="card-body">
              <!-- <strong class="d-inline-block mb-2 text-primary">World</strong> -->
              <h3>
                <a class="text-dark" href="#" width="50%;">Featured post</a>
              </h3>
                <div class="mb-1 text-muted">Nov 12</div>
              <div style="width:100%">
              <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.This is a wider card with supporting text below as a natural lead-in to additional content.This is a wider card with supporting text below as a natural lead-in to additional content.</p>
            </div>
              <a href="#">Continue reading</a>
            </div>
            <img class="imagine" src="https://www.w3schools.com/css/paris.jpg">
          </div>
        </div>
      </div>
    </div>

    <footer class="blog-footer">
        <p>
          <a href="#">Back to top</a>
        </p>
      </footer>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>

  <script src="https://getbootstrap.com/docs/4.0/assets/js/vendor/popper.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
  </body>
</html>

I can't get the text to go full width and under the images. If I remove the image the text goes full width but with image it will wrap to image. Image height is not 100%.

Xenio Gracias

I have put title and image in a div with card-title css added below css

.card-title{
  display: flex;
  align-items: center;
}
.card-title img{
  margin-left: auto;
}

.card-title{
  display: flex;
  align-items: center;
}
.card-title img{
  margin-left: auto;
}

.blog-header {
        line-height: 1;
        border-bottom: 1px solid #e5e5e5;
      }
      
      .blog-header-logo {
        font-family: "Playfair Display", Georgia, "Times New Roman", serif;
        font-size: 2.25rem;
      }
      
      .blog-header-logo:hover {
        text-decoration: none;
      }
      
      h1, h2, h3, h4, h5, h6 {
        font-family: "Playfair Display", Georgia, "Times New Roman", serif;
      }
      
      .display-4 {
        font-size: 2.5rem;
      }
      @media (min-width: 768px) {
        .display-4 {
          font-size: 3rem;
        }
      }
      
      .nav-scroller {
        position: relative;
        z-index: 2;
        height: 2.75rem;
        overflow-y: hidden;
      }
      
      .nav-scroller .nav {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }
      
      .nav-scroller .nav-link {
        padding-top: .75rem;
        padding-bottom: .75rem;
        font-size: .875rem;
      }
        
      .flex-auto {
        -ms-flex: 0 0 auto;
        -webkit-box-flex: 0;
        flex: 0 0 auto;
      }
      
      .h-250 { height: 250px; }
      /* @media (min-width: 768px) {
        .h-md-250 { height: 250px; }
      } */
      
      .border-top { border-top: 1px solid #e5e5e5; }
      .border-bottom { border-bottom: 1px solid #e5e5e5; }
      
      .box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
      
      /*
       * Blog name and description
       */
      .blog-title {
        margin-bottom: 0;
        font-size: 2rem;
        font-weight: 400;
      }
      .blog-description {
        font-size: 1.1rem;
        color: #999;
      }

      
      /* Pagination */
      .blog-pagination {
        margin-bottom: 4rem;
      }
      .blog-pagination > .btn {
        border-radius: 2rem;
      }
       
      .imagine {
        max-width: 250px;
      }
    
      @media (min-width: 990px) {
        .imagine {
          max-width: 350px;
        }
      }
    
      @media (max-width: 767px) {
        .imagine {
          max-width: 120px;
          max-height: 90px;
          margin-top: 15px;
          margin-right: 15px;
          border-radius: 4px;
        }
      }
    
      @media (max-width: 320px) {
        .imagine {
          display: none;
        }
      }
    
      @media (max-width: 767px) {

      }

<div class="row mb-2">
        <div class="col-md-12">
          <div class="card flex-md-row mb-4 box-shadow h-md-250">
            <div class="card-title">
              <h3>
                <a class="text-dark" href="#" width="50%;">Featured post</a>
              </h3>
              <img class="imagine" src="https://www.w3schools.com/css/paris.jpg">
            </div>
            <div class="card-body">
              <!-- <strong class="d-inline-block mb-2 text-primary">World</strong> -->
              
                <div class="mb-1 text-muted">Nov 12</div>
              <div style="width:100%">
              <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.This is a wider card with supporting text below as a natural lead-in to additional content.This is a wider card with supporting text below as a natural lead-in to additional content.</p>
            </div>
              <a href="#">Continue reading</a>
            </div>
          </div>
        </div>
      </div>
    </div>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2020-12-5

Comments

0 comments

CSS: Text under image div in empty space

CSS: Text under image div in empty space

pump.io port in URL

Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)

Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

How to import an asset in swift using Bundle.main.path() in a react-native native module

Failed to listen on localhost:8000 (reason: Cannot assign requested address)

Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

Using Response.Redirect with Friendly URLS in ASP.NET

Can a 32-bit antivirus program protect you from 64-bit threats

Double spacing in rmarkdown pdf

How to fix "pickle_module.load(f, **pickle_load_args) _pickle.UnpicklingError: invalid load key, '<'" using YOLOv3?

3D Touch Peek Swipe Like Mail

Bootstrap 5 Static Modal Still Closes when I Click Outside

Assembly definition can't resolve namespaces from external packages

Vector input in shiny R and then use it

Emulator wrong screen resolution in Android Studio 1.3

Svchost high CPU from Microsoft.BingWeather app errors

Graphics Context misaligned on first paint

Python connect to firebird docker database

Is this docker-for-mac password dialog legit?

How to save models trained locally in Amazon SageMaker?