Establish breakpoints for columns in Bootstrap 4

I have been working on creating a grid layout using rows and columns, but I am struggling with setting up responsive breakpoints using Bootstrap. Specifically, I want the layout to display three columns on desktop screens, but collapse into a single column on mobile devices.

Is there a way to configure breakpoints so that all elements are shown in a single column on mobile screens?

DEMO

.html

<div class="row">
    <div class="col">
        <div class="row">
            <div class="col">
                <div class="card" style="height:100%">
                    <div class="card-body">
                        dayly
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="margin-top: 16px;">
            <div class="col">
                <div class="row">
                    <div class="col">
                        <div class="card" style="height:100%">
                            <div class="card-body">
                                This is some text within a card body.
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row" style="margin-top: 16px;">
                    <div class="col">
                        <div class="card" style="height:100%">
                            <div class="card-body">
                                This is some text within a card body.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card" style="height:100%">
                    <div class="card-body">
                        This is some text within a card body.
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card" style="height:100%">
                    <div class="card-body">
                        This is some text within a card body.
                    </div>
                </div>
            </div>
        </div>

        <div class="row" style="margin-top: 16px;">
            <div class="col">
                <div class="card" style="height:100%">
                    <div class="card-body">
                        This is some text within a card body.
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card" style="height:100%">
                    <div class="card-body">
                        This is some text within a card body.
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="row">
                    <div class="col">
                        <div class="card">
                            <div class="card-body">
                                This is some text within a card body.
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card">
                            <div class="card-body">
                                This is some text within a card body.
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <div class="card">
                            <div class="card-body">
                                This is some text within a card body.
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card">
                            <div class="card-body">
                                This is some text within a card body.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="margin-top: 16px;">
            <div class="col">
                <div class="card" style="height:100%">
                    <div class="card-body">
                        dayly
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col">
        <div class="row" style="height:50%">
            <div class="col">
                <div class="card" style="height:100%">
                    <div class="card-body">
                        dayly
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="height:calc(50% - 16px); margin-top:16px">
            <div class="col">
                <div class="card" style="height:100%">
                    <div class="card-body">
                        dayly
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="row" style="height:25%">
            <div class="col">
                <div class="card" style="height:100%">
                    <div class="card-body">
                        dayly
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="height:calc(75% - 16px); margin-top:16px">
            <div class="col">
                <div class="card" style="height:100%">
                    <div class="card-body">
                        dayly
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Issue:

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

Currently, when viewed on a mobile device, the layout displays as three columns instead of one. Is there a way to ensure that all content appears in a single column and fills the entire screen?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Instead of utilizing col-sm for the columns...

  <div class="row">
        <div class="col-sm">
            <div class="row">
                <div class="col">
                    <div class="card" style="height:100%">
                        <div class="card-body"> daily </div>
                    </div>
                </div>
            </div>
            <div class="row" style="margin-top: 16px;">
                <div class="col-sm">
                    <div class="row">
                        <div class="col">
                            <div class="card" style="height:100%">
                                <div class="card-body"> This is some text within a card body. </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="margin-top: 16px;">
                        <div class="col">
                            <div class="card" style="height:100%">
                                <div class="card-body"> This is some text within a card body. </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm">
                    <div class="card" style="height:100%">
                        <div class="card-body"> This is some text within a card body. </div>
                    </div>
                </div>
                <div class="col-sm">
                    <div class="card" style="height:100%">
                        <div class="card-body"> This is some text within a card body. </div>
                    </div>
                </div>
            </div>
            <div class="row" style="margin-top: 16px;">
                <div class="col-sm">
                    <div class="card" style="height:100%">
                        <div class="card-body"> This is some text within a card body. </div>
                    </div>
                </div>
                <div class="col-sm">
                    <div class="card" style="height:100%">
                        <div class="card-body"> This is some text within a card body. </div>
                    </div>
                </div>
                <div class="col-sm">
                    <div class="row">
                        <div class="col-sm">
                            <div class="card">
                                <div class="card-body"> a </div>
                            </div>
                        </div>
                        <div class="col-sm">
                            <div class="card">
                                <div class="card-body"> s </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm">
                            <div class="card">
                                <div class="card-body"> s </div>
                            </div>
                        </div>
                        <div class="col-sm">
                            <div class="card">
                                <div class="card-body"> Ta </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" style="margin-top: 16px;">
                <div class="col">
                    <div class="card" style="height:100%">
                        <div class="card-body"> daily </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm">
            <div class="row" style="height:50%">
                <div class="col">
                    <div class="card" style="height:100%">
                        <div class="card-body"> daily </div>
                    </div>
                </div>
            </div>
            <div class="row" style="height:calc(50% - 16px); margin-top:16px">
                <div class="col">
                    <div class="card" style="height:100%">
                        <div class="card-body"> daily </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm">
            <div class="row" style="height:25%">
                <div class="col">
                    <div class="card" style="height:100%">
                        <div class="card-body"> daily </div>
                    </div>
                </div>
            </div>
            <div class="row" style="height:calc(75% - 16px); margin-top:16px">
                <div class="col">
                    <div class="card" style="height:100%">
                        <div class="card-body"> daily </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

https://codeply.com/p/DPFuoonZgF

You can also apply the padding utils (e.g., pb-3) to certain columns for adding vertical spacing on mobile devices.

Answer №2

This design will display as 1 column on mobile devices and 3 columns on larger screens, following a 12-column grid system.

<div class="col-12 col-md-4">...</div>

The rule is simple - occupy all 12 columns on mobile screens by default (starting with the smallest screen size), and take up 4 columns on larger screens.

To avoid issues caused by nesting columns within columns, I have simplified the structure to only one level deep:

<div class="container">
  <div class="row">
    <div class="col-12 col-md-4">
      <div class="card">
        <h1>Card 1</h1>
      </div>
    </div>
    <div class="col-12 col-md-4">
      <div class="card">
        <h1>Card 2</h1>
      </div>
    </div>
    <div class="col-12 col-md-4">
      <div class="card">
        <h1>Card 3</h1>
      </div>
    </div>
  </div>
</div>

Check out the Codepen example here.

For more information on using grids in Bootstrap, visit: https://getbootstrap.com/docs/4.0/layout/grid/

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

Is it true that nested CSS IDs function correctly in Firefox, but not in IE8?

My HTML is structured like this: <div id="content"> <div id="asection"> <h1>Some Text</h1> </div> </div> The CSS properties I'm using are as follows: h1 { color:#873C62; font-size:32px; line-heigh ...

htmlcssinternet-explorer-8internet-explorer-7

The truncation of zero values in JSON data is a common issue experienced with

Using jQuery AJAX, I am fetching a JSON string and presenting it on an XHTML page. {"productID":"T1","averageBalance":147765035.20,"accountBalance":147713417.00} The jQuery code snippet is as follows: $.ajax({ type : "GET", ...

htmljsonjquery

adjustable backdrops

Hi there, I'm trying to create a background image that resizes with the window while maintaining its proportions. I want to achieve this using CSS only. I've been searching for a solution but haven't found anything that works for me. I even ...

css

Display CSS specifically to the super administrator

I am trying to customize the appearance of certain tables in the WordPress dashboard using CSS so that they are only visible to super admins. <?php is_super_admin( $user_id ); ?> add_action( 'admin_head', 'my_custom_function' ); ...

phpcsswordpress

Is JSDOM able to handle media queries?

I understand that JSDOM may not have all the features of a full-fledged browser, but there is mixed information out there about its CSS support. While I've personally seen it parse CSS, responsive styles don't seem to function as expected. Can an ...

cssunit-testingjsdom

When viewing a page in IE 9 within a frame, not all CSS styles are properly rendered, causing it to enter Quirks mode

When a web page is loaded within a frame, not all of its styles are applied. The specific stylesheet used for the div elements is as follows: div.super{ position:absolute; font-family: Helvetica; font-size: 0.75em; padding:4px; overflo ...

cssinternet-explorer-9framesquirks-mode

Ways to collapse a div by clicking outside of it?

I have been working on implementing a dynamic 'drawer' feature where clicking on any link in a navigation bar opens the drawer and displays relevant content based on the clicked link. However, I have hit a roadblock in my progress despite thoroug ...

jqueryhtmlcss

Increase the gap between vertically aligned columns in Bootstrap 4 by adding spacing

Managing vertical spacing between columns that switch from horizontal to vertical at breakpoints can be challenging. While there are solutions available when dealing with forms, applying them to multiple columns wrapping in a row can be tricky. I have atte ...

htmlcssbootstrap-4twitter-bootstrap-4spacing

The collapse of HTML elements converging inwards within the Bulma Framework and customized with SASS

Messy Screen Recently delving into the world of Bulma, I decided to take a shot at customizing my CSS. Unfortunately, it seems that after some tweaking, my screen layout has gone haywire. Can anyone shed light on why two elements might refuse to maintain ...

htmlcsssassbulma

How do you prevent items from shrinking in a flex container when they have more content?

I am facing an issue with a flex container where the items are set in a row. Once it reaches the end of the viewport width, I want it to overflow-x: scroll. However, instead of enabling scrolling, all items shrink when more items are added to fit the scree ...

htmlcssflexbox

ensuring the footer is correctly aligned

<div id="footer"> <div class="row"> <div class="span5"> <img src="../goyal/webdesign.jpg" class="verisign-image"></div> I am a <select style="width:10%;" class="dro ...

htmlcsstwitter-bootstrap-3

Mistakes in design when transforming inline SVG to PNG format

One of my main objectives is to convert a <div> element that contains multiple inline svg images into a png file. The entire process must be carried out within the client's browser using JavaScript. I have experimented with various techniques: ...

javascriptcsssvgcanvg

What is the best way to align the middle element of a flex row in the center?

Desired Outcome: I have three elements within a container styled with display: flex. My goal is to align the left item to the left, the right item to the right, and have the middle item centered. space-between does not achieve this look due to the varyin ...

htmlcssflexbox

Selecting values from a dropdown list for binding purposes

I need help fetching countries in a dropdown based on the user ID. I've attempted the code below, but it's not functioning correctly. Can anyone assist me? HTML: <h1 align="center">Audit</h1> <p>Country* :</p> <selec ...

htmlangularjs

Strange occurrences of radio buttons in AngularJS

When working with radio buttons, I noticed a strange behavior that I wanted to share. My goal was to have Radio Button 1 selected if the array is undefined, and Radio Button 2 selected when the array is defined. In the initial state, the array is indeed ...

javascripthtmlangularjsinputangularjs-directive

Ways to eliminate the unusual dashed space in ReactJS using Bootstrap

While developing an app with NextJS and Bootstrap, I noticed a strange dashed gap at the top of the screen in the elements tab. Despite checking for margin or padding-top properties on any element, there doesn't seem to be a clear cause for this issue ...

javascripthtmlcssreactjsnext.js

excess spillage occurring within the table's td elements

Is there a way to apply the overflow property to a cell within a table? http://jsfiddle.net/e8Bxj/ table { width:100px; height:100px; } td.content { overflow:auto; } <table> <tr> <td>hmm</td> </tr& ...

css

Automatically adjusting the size of two divs with an unspecified width

Is it possible for the DIVs to resize based on the size of the nested image? That's what I'm trying to accomplish. Within a main div, I have two nested DIVs - one with an image to the right and the other with text to the left. I want these DIVs ...

jquerycssautosize

Decrease the interactive area for an image

I have successfully designed a left navigation bar using buttons. Currently, I am facing two main issues that I need assistance with. Firstly, I am trying to limit the hyperlink area to just the background image. Secondly, the elements that are overlaying ...

htmlcsstwitter-bootstrap

Using an Angular 1 controller scope method as a callback for a captcha library

I have a customer in China who needs a specific captcha that functions there. You can find the captcha I need to use at this link: Essentially, there are 4 steps to make it work: Add this line to the label of your html: <script src="https://ssl.ca ...

javascripthtmlangularjs