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

The transparency of the TABLE must only be applied to a specific section

I need the table to have a transparent bottom and a clear top for better readability. Here is my attempted solution: .preview { background: -moz-linear-gradient(top, rgba(255,255,255,0) 25%, rgba(255,255,255) 100%); background: -webkit-gradie ...

css

Modify the shading of the mesh generated with the face3 method

I have utilized face 3 and three js to generate a mesh, but the expected color is not displaying correctly on the mesh. Below is the code snippet I used: var geometry = new THREE.Geometry(); var f = 0; for (var i = 0; i < data.real.length ...

javascripthtmlthree.js

Have I incorrectly implemented responsiveness on my website?

I created my HTML using Bootstrap 3.3.7: <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="copyright" content= ...

htmlcssbootstrap-modal

Material UI Grid Items not stretching to fill the entire available width

I'm currently working with a nested Grid system in Material UI, but the Grid items are only occupying a fixed width and leaving some empty space. The issue arises when this fixed space is used up and instead of adjusting their internal free space, the ...

cssreactjsmaterial-uimaterial-designstyling

Failure to highlight items when using the multiple select function

After adding a select all button to a multiple select, I encountered an issue. Although all the items are being selected, they are not highlighted when clicking on the select all button. Below is the code snippet: <div class="label_hd">Profiles* {{ ...

javascripthtmlcssangularjs

Show only the selected option with jQuery's on change event and disable or remove the other options

My goal is to make it so that when a user selects an option from a dropdown menu, the other options are disabled or hidden. For example, if option "1" is selected, options "2", "3", and "4" will be removed: <div class="abc"> <div class="xyz"> ...

javascriptjqueryhtmlselectonchange

Retrieve information from an HTML table on a website and transfer it to a spreadsheet in Excel

I'm looking for assistance with extracting data from a website using VBA. I have an Excel table with ETF tickers, links, and prices, and I'm attempting to retrieve the previous day's closing price from each link using VBA. The challenge I&ap ...

htmlexcelvbaselenium-webdriverinternet-explorer

Styling <html:link> elements with CSS

I'm new to using struts and I'm struggling with applying my CSS styles to link tags. <html:link action="LoginLink" styleClass="loginButton"/> My goal is to add a button image to a link that directs to a login page. I've successfully ...

cssbuttonstrutsstruts-html

Updating the material-ui checkbox state to reflect the checked, unchecked, or indeterminate status, can be achieved in reactjs without relying on state

I am currently using Material-UI checkbox components and I have a requirement to programmatically change the state of checkboxes to be checked, unchecked, or indeterminate based on the click of another checkbox. This action needs to be applied to a list of ...

javascripthtmlreactjscheckboxmaterial-ui

Transform Plain Text String Into HTML Format

I'm having trouble getting this simple task to work as I expected. I have a Node.js program where I generate a string var based on some parameters. var generatedString = "some string" + "other string"; I want to pass this variable to a method as th ...

htmlnode.js

What should I designate as the selector when customizing dialog boxes?

I am attempting to change the title bar color of a dialog box in CSS, but I am running into issues. Below is the HTML code for the dialog box and the corresponding CSS. <div id="picture1Dialog" title = "Title"> <p id="picture1Text"> ...

javascriptjqueryhtmlcss

Pressing the reset button will restore the table to its original

As a new React developer with experience mainly in hooks, I have been struggling to find a good example involving hooks. Currently, I am working on implementing an antd table with search functionality. My question is, when a user types something into the ...

javascriptcssreactjshtml-tableantd

Determine if the user's request to my website is made through a URL visit or a script src/link href request

Presently, I am working on developing a custom tool similar to Rawgit, as a backup in case Rawgit goes down. Below is the PHP code I have created: <?php $urlquery = $_SERVER['QUERY_STRING']; $fullurl = 'http://' . $_SERVER['SE ...

javascriptphpjqueryhtml

Sending files to the server through HTML5

Could someone assist me with uploading a file after it has been selected using HTML5? Here's the code snippet for selecting the file: <input type="file" .... /> The input field above allows you to choose a file, but I also need help with uploa ...

phpjavascripthtml

What is the process of dynamically loading CSS into an HTML document?

In my C# program, I am utilizing a web browser control and setting its HTML property programmatically by loading it from an HTML string variable. While this setup works almost perfectly, I have noticed that it loses the reference to the CSS file. I believe ...

c#javascriptcss

Using ReactJS to strip HTML tags from JSON response

I'm having trouble figuring out how to strip HTML tags from a JSON response in reactjs. Here's the JSON response: { "price": "26,800.98", "diff": "<!--daily_changing-->+13.44 (+0.05%)&nbsp;& ...

javascripthtmljsonreactjstags

Design a PHP tool for generating custom CSS frameworks

After attempting to create a CSS frame generator similar to this one, I stumbled upon a solution that works well with one exception. PHP Code: <?php function print_css($parentTag, $prefix, &$dup_checker) { if ($parentTag->nodeName == &apos ...

phphtmlcss

Tips for generating AJAX requests directly from HTML documents

Hey there! I'm fairly new to JavaScript and have a question that might seem silly to some. How exactly can I invoke a function from a Coffeescript file within my HTML code? I'd like to give users the option to choose the language in which they v ...

javascriptjqueryhtmlajaxcoffeescript

Animate the Bootstrap carousel from top to bottom instead of the traditional left to right movement

Is there an option available in the bootstrap carousel to animate it from top to bottom and bottom to top, rather than from right to left and left to right? jsFiddle link <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval=" ...

javascriptjqueryhtmlcsstwitter-bootstrap

Using the on-change event with a textfield can help ensure that the field is cleared if the min-date condition is not met

I recently encountered an issue with an input field that had the type "datetime" and a min-date condition set to today's date. The flow was such that if a valid date was entered, the submit button would be enabled, otherwise it would remain disabled. ...

javascriptangularjshtmlmeteor