The impact of breakpoints in Bootstrap

Question

The impact of breakpoints in Bootstrap

As a newcomer to Bootstrap, I have a question about the code snippet below:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row border">
    <div class="col-lg-4 border">One</div>
    <div class="col-lg-4 border">Two</div>
    <div class="col-lg-4 border">Three</div>
  </div>
</div>

When I resize my browser window to a smaller size that doesn't meet the lg breakpoint criteria, the three elements stack on top of each other. However, if I remove the breakpoint entirely, like so:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row border">
    <div class="border">One</div>
    <div class="border">Two</div>
    <div class="border">Three</div>
  </div>
</div>

The three elements now appear as inline elements instead of stacking on top of each other. Why is this happening? The code remains the same with col-lg-4, and the lg breakpoint isn't being triggered as long as I stay within the small window size.

html css bootstrap-4

Answer 1

Answer №1

The reason behind this behavior is due to the fact that the Bootstrap row utilizes display:flex, with the default flexbox direction being flex-direction:row. Removing the .row class will result in the inner divs stacking as anticipated.

<div class="container">
    <div class="border">
        <div class="border">One</div>
        <div class="border">Two</div>
        <div class="border">Three</div>
    </div>
</div>

Check out the demonstration here:

It's important to note that the .row class should only be utilized for containing grid columns (.col*).

Answer 2

The reason behind this behavior is due to the fact that the Bootstrap row utilizes display:flex, with the default flexbox direction being flex-direction:row. Removing the .row class will result in the inner divs stacking as anticipated.

<div class="container">
    <div class="border">
        <div class="border">One</div>
        <div class="border">Two</div>
        <div class="border">Three</div>
    </div>
</div>

Check out the demonstration here:

It's important to note that the .row class should only be utilized for containing grid columns (.col*).

Answer 3

Answer №2

Here is the essential CSS snippet from bootstrap (I've excluded irrelevant portions)

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    /*margin-right: -15px;*/
    /*margin-left: -15px;*/
}

/*.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, */
.col-lg-4,
/*.col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto */ {
    /*position: relative;*/
    width: 100%;
    /*min-height: 1px;*/
    /*padding-right: 15px;*/
    /*padding-left: 15px;*/
}

@media (min-width: 992px)
.col-lg-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

In summary: .row is a flex container with child elements having auto flex-basis unless specified. .col-lg-4 always takes up 100% width, but on larger screens (>= 992px), it shrinks to one third, with a flex-basis of 33.333333%.

If you remove the col-lg-4 class, the elements revert to auto flex-basis, taking up only necessary space.

Answer 4

Here is the essential CSS snippet from bootstrap (I've excluded irrelevant portions)

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    /*margin-right: -15px;*/
    /*margin-left: -15px;*/
}

/*.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, */
.col-lg-4,
/*.col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto */ {
    /*position: relative;*/
    width: 100%;
    /*min-height: 1px;*/
    /*padding-right: 15px;*/
    /*padding-left: 15px;*/
}

@media (min-width: 992px)
.col-lg-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

In summary: .row is a flex container with child elements having auto flex-basis unless specified. .col-lg-4 always takes up 100% width, but on larger screens (>= 992px), it shrinks to one third, with a flex-basis of 33.333333%.

If you remove the col-lg-4 class, the elements revert to auto flex-basis, taking up only necessary space.

Answer 5

Answer №3

The Bootstrap grid system consists of five classes:

.col- (for extra small devices with a screen width less than 576px)
.col-sm- (for small devices with a screen width equal to or greater than 576px)
.col-md- (for medium devices with a screen width equal to or greater than 768px)
.col-lg- (for large devices with a screen width equal to or greater than 992px)
.col-xl- (for extra large devices with a screen width equal to or greater than 1200px)

These classes automatically adjust based on screen sizes changes

Bootstrap Grid System

Answer 6

The Bootstrap grid system consists of five classes:

.col- (for extra small devices with a screen width less than 576px)
.col-sm- (for small devices with a screen width equal to or greater than 576px)
.col-md- (for medium devices with a screen width equal to or greater than 768px)
.col-lg- (for large devices with a screen width equal to or greater than 992px)
.col-xl- (for extra large devices with a screen width equal to or greater than 1200px)

These classes automatically adjust based on screen sizes changes

Bootstrap Grid System

Answer 7

Answer №4

To maintain a stacked layout for divs with the specified class, consider replacing col-lg-4 with col-xs-12.

I trust this suggestion will be beneficial for your design.

Answer 8

To maintain a stacked layout for divs with the specified class, consider replacing col-lg-4 with col-xs-12.

I trust this suggestion will be beneficial for your design.

The impact of breakpoints in Bootstrap

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Display or conceal elements based on the screen size using Bootstrap 3 classes

AngularJS - Changing Views with Templates

The CSS styling feature is not functional within the JavaMail API

Troubleshooting: Unable to load template file content in AngularJS ng-view

The car glides smoothly across the screen from left to right before disappearing from view

What's the best way to ensure that a div remains fixed at the top of the page while also being centered?

Why does a relatively positioned element always begin at the top corner of the window?

How can I dynamically assign a class to an HTML element in Codeigniter?

When I apply a percentage to the height of a div element, it shrinks down to a height

Scrolling Horizontally with Bootstrap Cards

Reduce the text of the link

What is the process to set a Woocommerce checkout field as optional when a checkbox is marked?

Utilize various CSS styles for individual sections within a multi-page website

Is there a way to enhance the height of Bootstrap combobox items? Can this be achieved?

Using a declared const in a separate React file

Having trouble pinpointing the issue with this particular if statement?

Update the function to be contained in a distinct JavaScript file - incorporating AJAX, HTML, and MySQL

AngularJS - Sending configuration values to a directive

Utilizing document.getElementById().value in hidden fields for asp.net web pages does not function correctly

css subcategories - divs failing to meet css criteria