Overlapping Bootstrap cards conundrum

Does anyone know how to align Bootstrap cards and make them responsive? I have them centered, but they are overlapping and sticking to the left side. This is for email development with a maximum width of 680px.

Any assistance would be greatly appreciated!

/** {
    box-sizing: border-box;
  }
  
  body {
    font-family: Arial, Helvetica, sans-serif;
  }
*/
  .email-background{
    background-color: lightgrey;
    font-family: sans-serif;
    padding: 20px 5px 50px 5px;
    width: 100%;
  }

  .email-container{
    background-color: #ffff;
    max-width: 680px;
    margin: 0 auto;
    padding-bottom: 40px;
    border-radius: 15px;
    padding-top: 25px;
  }
/*
  .features .smaller-text{
    font-size: smaller;
    display: inline-block;
  }
*/
  .price{
    color: turquoise;
  }
/*
  .icon-case{
    height: 1em;
    width: 1em;
    float: left;
  }
*/
  .view-btn{
    background-color: #0fbd9a;
    color: #fff;
    padding: 15px 20px;
    text-decoration: none;
    border-radius: 15px;
    float: right;
  }
 

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Float four columns side by side */
.email-column {
  float: left;
  width: 25%;
  padding: 0 10px;
}

/* Remove extra left and right margins, due to padding */
.email-row {
  margin: 0 -5px;
  padding-top: 25px;

}

/* Clear floats after the columns */
.email-row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive columns */
@media screen and (max-width: 680px) {
  .email-column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}

/* Style the counter cards */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 26px;
  text-align: left;
  background-color: #f1f1f1;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="13717c7c67606761726353263d213d233e7176677222">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <title>SkyScanner Test</title>
<...

htmlcsscard

Answer №1

It seems like you have specified a fixed column width of 25%, but then set the cards to be 18rem inline. Instead of using inline styles, consider defining the card size within your actual card class and removing the column width.

For better alignment and control, I recommend exploring Bootstrap's flex containers as an alternative to using floats. Flex containers will allow everything to line up neatly without worrying about elements shifting when the screen size changes. Check out the documentation here: https://getbootstrap.com/docs/5.0/utilities/flex/

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

.email-background {
  background-color: lightgrey;
  font-family: sans-serif;
  padding: 20px 5px 50px 5px;
  width: 100%;
}

.email-container {
  background-color: #ffff;
  max-width: 680px;
  margin: 0 auto;
  padding-bottom: 40px;
  border-radius: 15px;
  padding-top: 25px;
}


/*
  .features .smaller-text{
    font-size: smaller;
    display: inline-block;
  }
*/

.price {
  color: turquoise;
}


/*
  .icon-case{
    height: 1em;
    width: 1em;
    float: left;
  }
*/

.view-btn {
  background-color: #0fbd9a;
  color: #fff;
  padding: 15px 20px;
  text-decoration: none;
  border-radius: 15px;
  float: right;
}


/* Float four columns side by side */

.email-column {
  float: left;
  padding: 0 10px;
}


/* Remove extra left and right margins, due to padding */

.email-row {
  margin: 0 -5px;
  padding-top: 25px;
}


/* Clear floats after the columns */

.email-row::after {
  content: "";
  display: table;
  clear: both;
}


/* Responsive columns */

@media screen and (max-width: 680px) {
  .email-column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}


/* Style the counter cards */

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 26px;
  text-align: left;
  background-color: #f1f1f1;
  width: 18rem;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
  <title>SkyScanner Test</title>
</head>

<body>
  <div class="email-background">
    <div class="email-container">
      <p class="car-titles"><strong>Check out these sweet rides</strong></p>
      <div class="email-row">
        <div class="email-column">
          <div class="card">
            <img src="/assets/economy.png" class="card-img-top" alt="Car Pic">
            <div class="card-body">
              <h5 class="card-title">Car 1</h5>
              <h6>2-3 Doors</h6>
              <div class="features">
                <h6 class="smaller-text"><small><img class="icon-case" src="/assets/original.png">4 Seats</small></h6>
                <h6 class="smaller-text"><small><img class="icon-case" src="/assets/suitcase.png">2</small></h6>
              </div>
              <div class="pricing-text">
                <h6 class="smaller-text"><small>from</small></h6>
                <h6><strong class="price">£33</strong><small> per day</small></h6>
              </div>
              <a class="view-btn" href="#">View <img src="/assets/arrow.png"></a>
            </div>
          </div>
        </div>
        <div class="email-column">
          <div class="card">
            <img src="/assets/economy.png" class="card-img-top" alt="Car Pic">
            <div class="card-body">
              <h5 class="card-title">Car 2</h5>
              <h6>2-3 Doors</h6>
              <div class="features">
                <h6 class="smaller-text"><small><img class="icon-case" src="/assets/original.png">4 Seats</small></h6>
                <h6 class="smaller-te
xt"><small><img class="icon-case" src="/assets/suitcase.png">2</small></h6>
              </div>
              <div class="pricing-text">
                <h6 class="smaller-text"><small>from</small></h6>
                <h6><strong class="price">£33</strong><small> per day</small></h6>
              </div>
              <a class="view-btn" href="#">View <img src="/assets/arrow.png"></a>
            </div>
          </div>
        </div>
      </div>
      <div class="email-row">
        <div class="email-column">
          <div class="card">
            <img src="/assets/economy.png" class="card-img-top" alt="Car Pic">
            <div class="card-body">
              <h5 class="card-title">Car 3</h5>
              <h6>2-3 Doors</h6>
              <div class="features">
                <h6 class="smaller-text"><small><img class="icon-case" src="/assets/original.png">4 Seats</small></h6>
                <h6 class="smaller-text"><small><img class="icon-case" src="/assets/suitcase.png">2</small></h6>
              </div>
              <div class="pricing-text">
                <h6 class="smaller-text"><small>from</small></h6>
                <h6><strong class="price">£33</strong><small> per day</small></h6>
              </div>
              <a class="view-btn" href="#">View<img src="/assets/arrow.png"></a>
            </div>
          </div>
        </div>
        <div class="email-column">
          <div class="card">
            <img src="/assets/economy.png" class="card-img-top" alt="Car Pic">
            <div class="card-body">
              <h5 class="card-title">Car 4</h5>
              <h6>2-3 Doors</h6>
              <div class="features">
                <h6 class="smaller-text"><small><img class="icon-case" src="/assets/original.png">4 Seats</small></h6>
                <h6 class="smaller-text"><small><img class="icon-case" src="/assets/suitcase.png">2</small></h6>
              </div>
              <div class="pricing-text">
                <h6 class="smaller-text"><small>from</small></h6>
                <h6><strong class="price">£33</strong><small> per day</small></h6>
              </div>
              <a class="view-btn" href="#">View<img src="/assets/arrow.png"></a>
            </div>
          </div>
        </div>

      </div>


    </div>

  </div>
</body>

</html>

Answer №2

The issue of overlapping is caused by the float:left property applied to .email-column. By changing it to an inline-block, the problem was resolved, resulting in the desired output.

A more efficient solution can be achieved using Flexbox or CSS Grid, although compatibility with email readers may be a concern.

/** {
    box-sizing: border-box;
  }
  
  body {
    font-family: Arial, Helvetica, sans-serif;
  }
*/
  .email-background{
    background-color: lightgrey;
    font-family: sans-serif;
    padding: 20px 5px 50px 5px;
    width: 100%;
  }

  .email-container{
    background-color: #ffff;
    max-width: 680px;
    margin: 0 auto;
    padding-bottom: 40px;
    border-radius: 15px;
    padding-top: 25px;
  }
/*
  .features .smaller-text{
    font-size: smaller;
    display: inline-block;
  }
*/
  .price{
    color: turquoise;
  }
/*
  .icon-case{
    height: 1em;
    width: 1em;
    float: left;
  }
*/
  .view-btn{
    background-color: #0fbd9a;
    color: #fff;
    padding: 15px 20px;
    text-decoration: none;
    border-radius: 15px;
    float: right;
  }
 

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Float four columns side by side */
.email-column {
  display:inline-block;
  padding: 0 10px;
}

/* Remove extra left and right margins, due to padding */
.email-row {
  margin: 0 -5px;
  padding-top: 25px;

}

/* Clear floats after the columns */
.email-row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive columns */
@media screen and (max-width: 680px) {
  .email-column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}

/* Style the counter cards */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 26px;
  text-align: left;
  background-color: #f1f1f1;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7c1e1313080f080e1d0c3c49524e524c511e19081d4d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="email-background">
  <div class="email-container">
    <p class="car-titles"><strong>Check out these sweet rides</strong></p>
    <div class="email-row">
      <div class="email-column">
        <div class="card" style="width: 18rem;">
          <img src="/assets/economy.png" class="card-img-top" alt="Car Pic">
          <div class="card-body">
            <h5 class="card-title">Car 1</h5>
            <h6>2-3 Doors</h6>
            <div class="features">
              <h6 class="smaller-text"><small><img class="icon-case" src="/assets/original.png">4 Seats</small></h6>
              <h6 class="smaller-text"><small><img class="icon-case" src="/assets/suitcase.png">2</small></h6>
            </div>
            <div class="pricing-text">
              <h6 class="smaller-text"><small>from</small></h6>
              <h6><strong class="price">£33</strong><small> per day</small></h6>
            </div>
            <a class="view-btn" href="#">View <img src="/assets/arrow.png"></a>
          </div>
        </div>
      </div>
      <div class="email-column">
        <div class="card" style="width: 18rem;">
          <img src="/assets/economy.png" class="card-img-top" alt="Car Pic">
          <div class="card-body">
            <h5 class="card-title">Car 2</h5>
            <h6>2-3 Doors</h6>
            <div class="features">
              <h6 class="smaller-text"><small><img class="icon-case" src="/assets/original.png">4 Seats</small></h6>
              <h6 class="smaller-text"><small><img class="icon-case" src="/assets/suitcase.png">2</small></h6>
            </div>
            <div class="pricing-text">
              <h6 class="smaller-text"><small>from</small></h6>
              <h6><strong class="price">£33</strong><small> per day</small></h6>
            </div>
            <a class="view-btn" href="#">View <img src="/assets/arrow.png"></a>
          </div>
        </div>
      </div>
    </div>
    <div class="email-row">
      <div class="email-column">
        <div class="card" style="width: 18rem;">
          <img src="/assets/economy.png" class="card-img-top" alt="Car Pic">
          <div class="card-body">
            <h5 class="card-title">Car 3</h5>
            <h6>2-3 Doors</h6>
            <div class="features">
              <h6 class="smaller-text"><small><img class="icon-case" src="/assets/original.png">4 Seats</small></h6>
              <h6 class="smaller-text"><small><img class="icon-case" src="/assets/suitcase.png">2</small></h6>
            </div>
            <div class="pricing-text">
              <h6 class="smaller-text"><small>from</small></h6>
              <h6><strong class="price">£33</strong><small> per day</small></h6>
            </div>
            <a class="view-btn" href="#">View<img src="/assets/arrow.png"></a>
          </div>
        </div>
      </div>
      <div class="email-column">
        <div class="card" style="width: 18rem;">
          <img src="/assets/economy.png" class="card-img-top" alt="Car Pic">
          <div class="card-body">
            <h5 class="card-title">Car 4</h5>
            <h6>2-3 Doors</h6>
            <div class="features">
              <h6 class="smaller-text"><small><img class="icon-case" src="/assets/original.png">4 Seats</small></h6>
              <h6 class="smaller-text"><small><img class="icon-case" src="/assets/suitcase.png">2</small></h6>
            </div>
            <div class="pricing-text">
              <h6 class="smaller-text"><small>from</small></h6>
              <h6><strong class="price">£33</strong><small> per day</small></h6>
            </div>
            <a class="view-btn" href="#">View<img src="/assets/arrow.png"></a>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sliding Image Menu using jQuery

I am struggling with creating a menu using jquery mouseenter / mouseout effects. My goal is to have a small icon displayed that expands to the left and reveals the menu link when a user hovers over it. The issue I am facing is that the effect only works w ...

javascriptjqueryhtmlcss

Guide to customizing CSS styles within a div element using TypeScript code in a Leaflet legend

I'm struggling to add a legend to my map using Angular 5 and typescript. I need help with setting CSS styles for the values (grades) that are displayed on the legend. Can someone guide me on where to put the styles? TS: createLegend() { let lege ...

htmlcsstypescriptwebangular5

Stop the scrolling behavior from passing from one element to the window

I am facing an issue with a modal box window that contains an iframe. Inside the iframe, there is a scrollable div element. Whenever I try to scroll the inner div of the iframe and it reaches either the top or bottom limit, the browser window itself start ...

javascriptjqueryhtmleventsscroll

What is the process for incorporating an additional input in HTML as you write?

I am looking to create a form with 4 input boxes similar to the layout below: <input type="text" name="txtName" value="Text 1" id="txt" /> <input type="text" name="txtName2" value="Text 2" id="txt" /> <input type="text" name="txtName3" valu ...

javascriptjqueryhtml

Utilizing Google Fonts offline without the need for an API

Instead of relying on Google Fonts API to access a variety of fonts for my website, I took matters into my own hands. I downloaded a snapshot of fonts from this GitHub repository: https://github.com/google/fonts and transferred them to my web directory. T ...

phpjquerycssjsonfonts

The radio button that disables other inputs only functions correctly for a single element when using Query Selector, but does not work with Query

I have attempted to develop a form section that is disabled when the user selects option A and enabled when they choose option B. document.getElementById('delivery').onclick = function() { var disabled = document.querySelectorAll(".dis ...

javascripthtml

Using Javascript or Jquery, you can submit a form without the need for a button

I'm attempting to submit a form without using a button by invoking a JavaScript function and processing the form with JQUERY/PHP. My goal is for the form to be submitted silently on the backend without causing the page to reload. However, I keep encou ...

javascriptphphtmljqueryajax

Sturdy and adaptable in a container designed with a responsive width

Currently, I am developing a responsive app and I am facing the challenge of making some parts of the search bar responsive while keeping others fixed in width (like the search icon). I attempted to achieve this using the following code: .wrapper{ ...

htmlcssresponsive-design

Tips for enabling a flexbox item to extend beyond its container

While attempting to utilize flexbox for creating a navbar with the logo in the center, I encountered an issue where the logo wasn't able to overflow from above and below the navbar. I experimented with squeezing in and positioning the element, but it ...

htmlcsssassvuetify.js

Tips for minimizing the dimensions of images in a slideshow within a gallery

Check out this website: The slideshow images on there are too tall. Can someone assist me in lowering the height of the images? I want both images to be displayed at the same height. Thank you in advance. ...

cssslideshow

eliminate whitespace characters within a string

Here is a question that suggests an easy way to remove space characters in a string using R. However, I encountered an issue when trying to remove a space between two numbers (e.g. 11 846.4) while working with the following table: require(XML) require(RCur ...

htmlrregexlinuxstring

My jquery seems to be malfunctioning -- can't quite figure out what the issue is

My jquery is not working as expected! It was functioning fine when I included the script directly in the HTML file, but now that I have moved it to a separate file, it's not working. I even tried changing the file name, but no luck. //HTML file loca ...

jqueryhtml

How can I restrict the selection of only one checkbox within an iframe window?

Here is my JavaScript snippet: var iframe = document.getElementById('pltc'); iframe.contentWindow.document.open('text/htmlreplace'); iframe.contentWindow.document.write('<input type="checkbox" name="tc0">Yes<input type="c ...

javascriptjqueryhtmliframe

Having trouble changing a CSS property (margin-right)?

I have created a simple HTML list that consists of various items: <div id="menu"> <ul> <li>apples</li> <li>&#149</li> <li>bananas</li> <li>oranges</li> <li>grape ...

css

Ensure that the placeholder remains visible as you type in the input field

Is there a way to implement an input text field in React with the placeholder "DD-MM-YYYY," that partially disappears as I start typing? For example, when I type "02-," only "-MM-YYYY" should remain visible as part of the placeholder. ...

javascripthtmlcssreactjsmaterial-ui

Reacting to the dynamic removal of spaces

Is there a way to dynamically remove the space between removed chips and older chips in Material-UI when deleting one of them? <div className="row contactsContainer"> {contacts.map((contac ...

cssreactjstypescriptdynamicmaterial-ui

The initial item in the Materializecss slider is failing to display

Currently, I am attempting to implement materialize slider with skrollr. The setup is functional; however, only the first item of the slider is set to opacity: 0 initially. https://i.stack.imgur.com/urSww.jpg After a brief delay, the second item becomes ...

jquerycssslidermaterialize

Click here to start your Django download now

I am looking for a way to monitor the number of times a file has been downloaded. Here is my plan: 1) Instead of using <a href="{{ file.url }}" download>...</a>, I propose redirecting the user to a download view with a link like <a href="do ...

pythonhtmldjango

Limit the character count in a textarea

My goal is to control the number of characters that can be entered into a textarea. While I am aware that I could simply use a substring to limit the characters, I prefer to visually inform the user when their text has reached the maximum length. The maxl ...

phpjavascripthtml

Aurelia validator fails to refresh user interface

Despite the aurelia-validator plugin working correctly for form submission and validation, with all properties updating properly, the UI does not reflect any changes. There is no red outline around incorrect properties or error messages displayed. I have r ...

javascripthtmlvalidationaurelia