Transform a three-column layout using floats into a single column layout using a media query in Bootstrap 4

I have integrated Bootstrap 4 into my project along with my custom CSS. In the center of the screen, there is a price sheet displaying three pricing options. I am currently using floats and clears, but the columns are not collapsing as intended at 962px. Instead, they seem to be adhering to their own breakpoints and collapsing closer to 500px. Has anyone encountered a similar issue before? Your insights are greatly appreciated. Images and code provided below.

index.html (yes, viewport meta tag is included)

<div class="wrapper-red store-backdrop">
        <div class="container-fluid mb-5">
            <h2 class="pt-5 nuestros-clientes text-center">CHOOSE THE BEST PLAN</h2>
            <div class="text-center">
                <i class="fa fa-2x fa-star text-white" aria-hidden="true"></i>

            </div>
            <div class="container p-4">
                <p class="pt-3 light text-white">We have plans that suit your needs. Try one out and if you’re
                    satisfied, you can upgrade to others!
                </p>
            </div>
            <div class="container">
                <div class="row">
                    <div class="column2">
                        <div class="bg-white shadow rounded p-3 mt-4 text-center">
                            <h4 class="pt-1">Group Class</h4>
                            <h1><span style="font-size: 80px;font-family:'Lato', sans-serif;">$50</span>
                            </h1>
                            <p>Monthly</p>
                            <hr>
                            <p>2 classes of 1 hour per week</p>
                            <p>Maximum of 6 students per class</p>
                            <p>Native Teacher
                            </p>
                            <p>Conversational Classes
                            </p>
                            <p>Classes start on the first business day of the month</p>
                            <p>Subject to availability</p>
                            <p>Fixed Schedule</p>
                            <div class="button-holder mb-4">
                                <button type="button" class="btn .btn-lg bg-grey btn-outline-secondary mt-5 p-3"><span
                                        style="font-size: 20px;">Enroll Today!</span></button>
                            </div>


                        </div>
                    </div>


                    <div class="column2 middle">
                        <div class="text-center bg-white shadow rounded p-3" style="height: 830px;">
                            <h4 class="pt-1">Individual Class</h4>
                            <h1><span style="font-size: 80px;font-family:'Lato', sans-serif;">$130</span>
                            </h1>
                            <p>Monthly</p>
                            <hr>
                            <p>2 classes of 1 hour per week</p>
                            <p>One-on-One Classes</p>
                            <p>Native Teacher</p>
                            <p>Method and Level Classes</p>
                            <p>Fixed Schedule</p>
                            <p class="mb-5 pb-5">Classes start every 15 days</p>
                            <div class="button-holder mt-5 mb-5">
                                <button type="button" class="btn btn-lg bg-grey btn-danger mt-5 p-3"><span
                                        style="font-size: 20px;">Start Your Classes Now!</span>
                                </button>
                            </div>

                        </div>

                    </div>

                    <div class="column2">
                        <div class="text-center bg-white shadow rounded p-3 mt-4">
                            <h4 class="pt-1">Premier Class</h4>
                            <h1><span style="font-size: 80px;font-family:'Lato', sans-serif;">$300</span>
                            </h1>
                            <p>Monthly</p>
                            <hr>
                            <p>3 classes of 1 hour per week
                            </p>
                            <p>One-on-One Classes</p>
                            <p>Native Teacher</p>
                            <p>Conversational or Level Classes
                            </p>
                            <p>Immediate Class Start</p>
                            <p>Flexible Schedule</p><br><br>
                            <div class="button-holder mb-4">
                                <button type="button" class="btn .btn-lg bg-grey btn-outline-secondary mt-5 p-3"><span
                                        style="font-size: 20px;">Advance Today!</span></button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

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

style.css

.store-backdrop {
  background-image: url(../assets/img/backdropFull.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 5px 5px 5px 5px;
  width: 100%;
}


.column2 {
  float: left;
  width: 33.33%;
}

.row2:after {
  content: "";
  display: table;
  clear: both;
}

.middle {
  z-index: 1;
}

@media screen and (max-width: 962px) {
  .column2 {
    width: 100%;
    float: none;
  }
}

https://i.sstatic.net/1fUyD.png

I am seeking to convert the 3 column layout to individual stacked items at 962px. Your assistance on this matter is highly appreciated. Thank you in advance.

htmlcssbootstrap-4css-float

Answer №1

The code has been tested in the browser and it's functioning perfectly!

.store-backdrop {
  background-image: url(../assets/img/backdropFull.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 5px 5px 5px 5px;
  width: 100%;
}


.column2 {
  float: left;
  width: 33.33%;
}

.row2:after {
  content: "";
  display: table;
  clear: both;
}

.middle {
  z-index: 1;
}

@media screen and (max-width: 962px) {
  .column2 {
    width: 100%;
    float: none;
  }
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

  
  <div class="wrapper-red store-backdrop">
        <div class="container-fluid mb-5">
            <h2 class="pt-5 nuestros-clientes text-center">CHOOSE THE BEST PLAN</h2>
            <div class="text-center">
                <i class="fa fa-2x fa-star text-white" aria-hidden="true"></i>

            </div>
            <div class="container p-4">
                <p class="pt-3 light text-white">We have plans that fit your needs. Try one and if you like it, you can upgrade to others!
                </p>
            </div>
            <div class="container">
                <div class="row">
                    <div class="column2">
                        <div class="bg-white shadow rounded p-3 mt-4 text-center">
                            <h4 class="pt-1">Group Class</h4>
                            <h1><span style="font-size: 80px;font-family:'Lato', sans-serif;">$50</span>
                            </h1>
                            <p>Monthly</p>
                            <hr>
                            <p>2 classes of 1 hour per week</p>
                            <p>Maximum 6 students per class</p>
                            <p>Native Teacher
                            </p>
                            <p>Conversational Classes
                            </p>
                            <p>Classes start every 1st working day of the month</p>
                            <p>Subject to availability</p>
                            <p>Fixed Schedule</p>
                            <div class="button-holder mb-4">
                                <button type="button" class="btn .btn-lg bg-grey btn-outline-secondary mt-5 p-3"><span
                                        style="font-size: 20px;">Enroll today!</span></button>
                            </div>


                        </div>
                    </div>


                    <div class="column2 middle">
                        <div class="text-center bg-white shadow rounded p-3" style="height: 830px;">
                            <h4 class="pt-1">Individual Class</h4>
                            <h1><span style="font-size: 80px;font-family:'Lato', sans-serif;">$130</span>
                            </h1>
                            <p>Monthly</p>
                            <hr>
                            <p>2 classes of 1 hour per week</p>
                            <p>One-on-One Classes </p>
                            <p>Native Teacher</p>
                            <p>Classes with Method and Level</p>
                            <p>Fixed Schedule</p>
                            <p class="mb-5 pb-5">Classes start every 15 days</p>
                            <div class="button-holder mt-5 mb-5">
                                <button type="button" class="btn btn-lg bg-grey btn-danger mt-5 p-3"><span
                                        style="font-size: 20px;">Start your classes now!</span>
                                </button>
                            </div>

                        </div>

                    </div>

                    <div class="column2">
                        <div class="text-center bg-white shadow rounded p-3 mt-4">
                            <h4 class="pt-1">Premier Class</h4>
                            <h1><span style="font-size: 80px;font-family:'Lato', sans-serif;">$300</span>
                            </h1>
                            <p>Monthly</p>
                            <hr>
                            <p>3 classes of 1 hour per week
                            </p>
                            <p>One-on-One Classes</p>
                            <p>Native Teacher</p>
                            <p>Conversational or Level-based Classes
                            </p>
                            <p>Immediate class start</p>
                            <p>Flexible Schedule</p><br><br>
                            <div class="button-holder mb-4">
                                <button type="button" class="btn .btn-lg bg-grey btn-outline-secondary mt-5 p-3"><span
                                        style="font-size: 20px;">Advance today!</span></button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>
    </div>
</body>
</html>

Answer №2

To resolve the issue, I made adjustments to the CSS by removing the bootstrap margins applied to the elements. Here is the updated CSS code:

.store-backdrop {
  background-image: url(../assets/img/backdropFull.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 5px;
  width: 100%!important;
}


.column2 {
  float: left;
  width: 33.33%;
}

.price {
  width: 385px;
}

.row2:after {
  content: "";
  display: table;
  clear: both;
}

.first,
.last {
  margin-top: 40px;
}

.middle {
  z-index: 1;
}

@media screen and (max-width: 1200px) {
  .column2 {
    width: 100%!important;
    float: none!important;
  }
  .price {
    width: 500px!important;
    margin: 0 auto!important;
  }
  .center,
  .last {
    margin-top: 30px!important;
  }
}

Hopefully, this solution proves helpful to others facing the same challenge. Cheers!

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

Creating a horizontal slideshow for multiple divs can be achieved through various methods,

I'm feeling a little lost when it comes to creating a slideshow similar to this image: (Symbian^3 music menu) https://i.sstatic.net/oK0F2.png Can anyone provide me with a straightforward code example or a helpful resource to achieve something simila ...

javascriptjqueryhtmlcss

Guide to "flashing" an image momentarily on the screen using PHP

I'm looking for a way to display an image on my simple website for 3 seconds and then prompt the user to indicate if they recognized the image or not by clicking a button. I don't need help with the button, just how to create the timer. While I ...

phpjqueryhtmlimagetimer

Image in an Outlook email surrounded by padding and enclosed in a paragraph

I am facing an issue with my email signature setup in Outlook Live where there is a white space below the image. After trying to add vertical-align:bottom to the CSS, it seems that Outlook Live does not accept it. The code for my HTML in Outlook 20xx is a ...

htmlcssoutlook

What causes the behavior of <body> backgrounds to differ from that of other HTML elements?

After examining the HTML code provided: <p style="margin:100px;border:1px solid red;background-color:#dff"> Hello </p> We can observe that when rendered by the browser, it looks like this: https://i.sstatic.net/rADHC.png If we were to mod ...

htmlcssmargin

A guide to styling a Bootstrap 5 navigation bar

My goal is to have my Bootstrap 5 navigation menu wrap until reaching an xs-sized screen and then display the small screen pills. Currently, it does not wrap properly and when it reaches xs size, the menu disappears without showing the pills. Here's m ...

htmlbootstrap-5

Strange behavior observed with CSS intellisense in Visual Code

While working on a ReactJS project, I noticed that when I opt for the style Jsx Attribute for inline CSS, . CSS intellisense seems to not work or only work after I manually add some fields. However, if I manually type the style attribute without using t ...

cssreactjsvisual-studio-codeintellisense

Leveraging JavaScript to generate a downloadable PDF document from the existing webpage

My goal is to have the user click a button labeled 'View PDF' or 'Download PDF' on the current webpage. This button would then execute JavaScript code to generate a PDF based on how the current page appears. I attempted using jspdf for ...

javascripthtmldom

Fix the order of the list items with HTML Agility Pack

I've been experimenting with the HTML Agility Pack to convert HTML into valid XHTML for inclusion in a larger XML document. While it mostly works, I've run into an issue with how lists are formatted: <ul> <li>item1 <li> ...

c#.nethtmlhtml-agility-pack

The form embedded within the <tr> element seems to be malfunctioning

Hey there, I'm facing a little issue with my form that is nested inside a table content. It seems to not be working properly. Let me share the code snippet below: <table> <form name='editpo' method=POST action='js_buat_po.php? ...

htmlformshtml-table

What is the best location to include my JavaScript code in WordPress?

Alright, so I've got this world map on one of my WordPress pages and here's an example of the code: <area onmousedown="modifyImage('world_map_01', './images/map/asia.jpg')" onmouseout="modifyImage('world_map_01', ...

javascripthtmlwordpress

Three divs are positioned within the parent element and collectively fill the entire height. The first and last div have varying

I attempted to replicate the design shown in the image below: https://i.sstatic.net/Q7sTI.png Initially, I was successful in achieving this using JavaScript. However, when attempting to recreate the same effect using only CSS without any JavaScript, I en ...

csspositionheight

What are the steps to creating a screen that mimics a mirror in the physical world?

Is there a way for the user to see themselves when they open a URL? I'm not looking for a mirror effect like the one produced by jQuery reflection js. I don't want to rely on using the front camera or any other camera to achieve this. Any sugges ...

javascriptjqueryhtmlcssmirror

In Selenium IDE, the command to locate elements by ID works smoothly, but when using Java, the same

I encountered a challenge while trying to locate a dropdown box. Despite being able to make it work using an absolute path, I struggled with identifying the element by its xpath or id. It's quite frustrating and I'm struggling to find a solution. ...

javahtmlseleniumwebdriverselenium-ide

Positioning three divs next to each other and aligning them at the bottom of the longest div

While I've seen similar questions about aligning divs in a row, my situation has a slightly different twist. I have three divs that I want aligned horizontally, with their content pushed to the bottom. I've attempted using position: relative and ...

htmlcss

Struggling to align nested grids in the center

I'm currently following a mobile-first approach in designing my website. The entire website is contained within one main grid, and I also want to include smaller grids that will serve as links to other HTML pages. I created a sample nested grid but am ...

javascripthtmlcss

HTML: attempting to align a quote image next to some text within the page

I want to add a quote to my website, but I'm having trouble positioning it correctly. https://example.com/quote-image.png Every time I try to adjust the position of the quote image, it moves when I zoom out. https://example.com/background.png I attem ...

htmlcss

Adaptable Bootstrap4 Navbar smoothly adjusts text during resizing

Just starting out with bootstrap 4 and I'm trying to create a responsive navbar using the code below: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=devic ...

responsive-designbootstrap-4

What is the best way to extract information from a JSON file and display it on a webpage using

I am new to this and I have a question for everyone Here's an example of the JSON response from my URL: The JSON data returned is as follows: { "Data":{ "id": 1312, "Name": "Steem Dollars", "Symbol": "SBD", "website_slug": "steem-dollars", "Level": ...

htmljson

Selecting elements using XPath

My goal is to target an i element using the following XPath: //div[contains(text(), "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32565356564153565341725e5d5d1c515d5f">[email protected]</a>")]//parent//i[contains(@c ...

htmlseleniumxpathselenium-webdriver

Using jQuery sortable with the overflow property set to hidden to sort items between two lists

I need help with a jQuery sortable feature where I have two lists and can move items between them: $( '#productsList, #orderList' ) .sortable({connectWith: '.containerDiv'}) .disableSelection(); My issue arises when I try to implement ...

javascriptjqueryhtmlcss