Utilizing Bootstrap and flexbox to create a card: repositioning the image to the left or right

Question

Utilizing Bootstrap and flexbox to create a card: repositioning the image to the left or right

Currently, I am attempting to construct a card layout using Bootstrap 4 with flexbox enabled. The image below depicts my current implementation, which is functioning as expected.

https://i.sstatic.net/huXvo.jpg

Here is the HTML structure:

<section>
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="card">
          <div class="card-block">
            <h4 class="card-title">Curabitur gravida vestibulum imperdiet.</h4>
            <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem. Integer sed mi quis nisl eleifend interdum.</p>
            <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem.</p>
            <a href="#" class="btn btn-primary">Read More</a>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <img class="card-img-bottom" src="img1.jpg" alt="" title="">
      </div>
    </div>
  </div>
</section>

However, when I view this layout on a larger screen, the output displayed is not what I desire:

https://i.sstatic.net/GGfLx.jpg

What I envision instead is:

https://i.sstatic.net/75aE7.jpg

My question now is how can I properly implement this specific layout? My aim is to have both columns cover 100% of the parent height without any padding between them, while maintaining the aspect ratio of the image as shown in the example (cropped from the center).

I have explored various solutions but they all appear complex or hacky. Could it be that there is no straightforward way to achieve this layout?

Note: The solution does not necessarily need to be Bootstrap-specific; a general solution for this type of problem would be preferable.

html css twitter-bootstrap responsive-design bootstrap-4

Answer 1

Answer №1

Exciting Update: Bootstrap Now Fully Supports Horizontal Cards!

A while back, I submitted a feature request for horizontal cards on Bootstrap. You can check it out here: https://github.com/twbs/bootstrap/issues/20794. Today, Bootstrap officially has support and documentation for horizontal cards.

The implementation in Bootstrap involves a mix of grid and utility classes:

<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="..." class="card-img" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

The approach remains similar to what I initially proposed. However, you may need some adjustments depending on your specific card content, as mentioned in the documentation: "Further adjustments may be needed depending on your card content".

Innovative Solution

I discovered an alternative way to achieve this using background-size: cover. By making a small tweak in the HTML structure, I managed to eliminate the need for an image tag. Here's how I modified the code:

<section>
  <div class="container">
    <div class="card">
      <div class="row">
        <div class="col-md-6">
          <div class="card-block">
            <h4 class="card-title">Curabitur gravida vestibulum imperdiet.</h4>
            <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem. Integer sed mi quis nisl eleifend interdum.</p>
            <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem.</p>
            <a href="#" class="btn btn-primary">Read More</a>
          </div>
        </div>
        <div class="col-md-6">
          <div class="card-img-bottom">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

For the card-img-bottom class, I defined the following style:

.card-img-bottom {
  color: #fff;
  height: 20rem;
  background: url(images/img1.jpg) center no-repeat;
  background-size: cover;
}

In the desktop view, I adjusted the height to 100% to ensure consistency with the card-block height.

There might be a slight padding disparity between card-block and card-img-bottom due to default Bootstrap settings, resulting in a slightly larger empty space than the actual image size. Personally, this wasn't a concern for me so I left it as is.

https://i.sstatic.net/Fjc65.png

Answer 2

Exciting Update: Bootstrap Now Fully Supports Horizontal Cards!

A while back, I submitted a feature request for horizontal cards on Bootstrap. You can check it out here: https://github.com/twbs/bootstrap/issues/20794. Today, Bootstrap officially has support and documentation for horizontal cards.

The implementation in Bootstrap involves a mix of grid and utility classes:

<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="..." class="card-img" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

The approach remains similar to what I initially proposed. However, you may need some adjustments depending on your specific card content, as mentioned in the documentation: "Further adjustments may be needed depending on your card content".

Innovative Solution

I discovered an alternative way to achieve this using background-size: cover. By making a small tweak in the HTML structure, I managed to eliminate the need for an image tag. Here's how I modified the code:

<section>
  <div class="container">
    <div class="card">
      <div class="row">
        <div class="col-md-6">
          <div class="card-block">
            <h4 class="card-title">Curabitur gravida vestibulum imperdiet.</h4>
            <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem. Integer sed mi quis nisl eleifend interdum.</p>
            <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem.</p>
            <a href="#" class="btn btn-primary">Read More</a>
          </div>
        </div>
        <div class="col-md-6">
          <div class="card-img-bottom">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

For the card-img-bottom class, I defined the following style:

.card-img-bottom {
  color: #fff;
  height: 20rem;
  background: url(images/img1.jpg) center no-repeat;
  background-size: cover;
}

In the desktop view, I adjusted the height to 100% to ensure consistency with the card-block height.

There might be a slight padding disparity between card-block and card-img-bottom due to default Bootstrap settings, resulting in a slightly larger empty space than the actual image size. Personally, this wasn't a concern for me so I left it as is.

https://i.sstatic.net/Fjc65.png

Answer 3

Answer №2

After some exploration, I've come across a solution to my current issue with image height, although it's not without its own challenges.

The downside of trying to innovate something that is already well-established is that the solutions often bring about new problems, especially when original features are required. In my case, I decided to introduce a new class that would work in conjunction with an existing class. This addition would ensure that if the "card-img-left" class was present, the "card-body" class would automatically adjust its left margin based on the size of the left-aligned image. If the class was not present, then the margin would remain at its default setting. It's a feasible workaround that shouldn't interfere with the core functionality, but there's still room for improvement...

.card {
  overflow: hidden;
}

.card-img-left {
    position: absolute;
    height: auto;
    max-height: 100%;
    width: auto;
    max-width: 40%;
}

.card-img-left ~ .card-body {
    margin-left: 40%;
}

Answer 4

After some exploration, I've come across a solution to my current issue with image height, although it's not without its own challenges.

The downside of trying to innovate something that is already well-established is that the solutions often bring about new problems, especially when original features are required. In my case, I decided to introduce a new class that would work in conjunction with an existing class. This addition would ensure that if the "card-img-left" class was present, the "card-body" class would automatically adjust its left margin based on the size of the left-aligned image. If the class was not present, then the margin would remain at its default setting. It's a feasible workaround that shouldn't interfere with the core functionality, but there's still room for improvement...

.card {
  overflow: hidden;
}

.card-img-left {
    position: absolute;
    height: auto;
    max-height: 100%;
    width: auto;
    max-width: 40%;
}

.card-img-left ~ .card-body {
    margin-left: 40%;
}

Utilizing Bootstrap and flexbox to create a card: repositioning the image to the left or right

Answer №1

Answer №2

Similar questions

"Showcasing a pair of icons side by side in an HTML layout

How can I prevent anchors from performing any action when clicked in React?

What steps do I need to take in order to successfully make a checkbox?

The background image fails to load in ReactJS application

Positioning an HTML control on top of a Silverlight Application, ensuring it moves in sync with the application as it scrolls

Challenges with displaying css/bootstrap classes within angular2

A guide on wrapping text within a Material-UI MenuItem

CSS style takes precedence over inline JavaScript transitions occurring from a negative position

The close button is not functioning properly

Discovering the correct element and typing for an HTML attribute through JavaScript

Rotating through elements in timed intervals

Slider with Dual Images: A Visual Comparison

Selenium web scraping falls short in fully extracting all the data needed

What is the best way to navigate through images only when hovering?

How to Show Byte Array Image in AngularJS HTML Using a Web API Service

Banner Text Alignment Issue: Uneven Left Alignment

Creating a customizable Sass Mixin for animation keyframes that incorporates various stages and the transform property

How can I code a script to import JSON data into MongoDB database?

Maintain the background color of the form select drop down even after clicking away from the form

Issue: potentially harmful data utilized in a URL resource setting