CSS: Text under image div in empty space-Twitter bootstrap

user9745009
March 8, 2019
237 views
3 votes
3 Answers

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%.

Answers

try putting the image in a div with title and date only

like this

<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> -->
              <div><h3>
                <a class="text-dark" href="#" width="50%;">Featured post</a>
              </h3>
                <div class="mb-1 text-muted">Nov 12</div>
               <img class="imagine" src="https://www.w3schools.com/css/paris.jpg"></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>

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>

next to the title

Your image is just in the wrong place. If you want it next to the title, it should be in the same div as the title div. In your code that is the div with class card-body.

To make it float right, you need to add float: right; to your css. The image should be the first child of the div with class card-body.

.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: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 0.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 0.25rem 0.75rem rgba(0, 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;
      float: right;
    }
  }

  @media (max-width: 767px) {
    .imagine {
      float: right;
      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;
    }
  }

<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">
        <img class="imagine" src="https://www.w3schools.com/css/paris.jpg">
          <!-- <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>
        
      </div>
    </div>
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.