Creating Uniform Columns in Bootstrap 4

Question

Creating Uniform Columns in Bootstrap 4

Is it possible to make the columns stack on top of each other at widths less than 768px, instead of 991px in Bootstrap 4?

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8>
 <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
  <div class="row">
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
  </div>
</div>

</body>
</html>

css twitter-bootstrap

Answer 1

Answer №1

You just need to update the scripts to fit bootstrap-4:

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

This is the updated code:

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
  <div class="row">
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
  </div>
</div>

Apply media-query at 991px

jsFiddle Link: https://jsfiddle.net/9p3nws1h/

@media only screen and (min-width: 991px) {
     .col-sm-4{
        width:33.333333%!important;
    }
}

Answer 2

You just need to update the scripts to fit bootstrap-4:

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

This is the updated code:

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
  <div class="row">
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
  </div>
</div>

Apply media-query at 991px

jsFiddle Link: https://jsfiddle.net/9p3nws1h/

@media only screen and (min-width: 991px) {
     .col-sm-4{
        width:33.333333%!important;
    }
}

Answer 3

Answer №2

If you want to learn more about responsive design, check out the Bootstrap 4 Documentation. It explains that the lg breakpoint occurs at 992 pixels ...

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

So, to create a simple layout, use the following markup:

<div class="row">
     <div class="col-lg-4" style="background-color:lavender;">.col-lg-4</div>
     <div class="col-lg-4" style="background-color:lavenderblush;">.col-lg-4</div>
     <div class="col-lg-4" style="background-color:lavender;">.col-lg-4</div>
</div>

Take a look at the working demo here

Answer 4

If you want to learn more about responsive design, check out the Bootstrap 4 Documentation. It explains that the lg breakpoint occurs at 992 pixels ...

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

So, to create a simple layout, use the following markup:

<div class="row">
     <div class="col-lg-4" style="background-color:lavender;">.col-lg-4</div>
     <div class="col-lg-4" style="background-color:lavenderblush;">.col-lg-4</div>
     <div class="col-lg-4" style="background-color:lavender;">.col-lg-4</div>
</div>

Take a look at the working demo here

Answer 5

Answer №3

To learn about the breakpoints in grid, please consult the Grid options section of the Bootstrap documentation. https://getbootstrap.com/docs/4.0/layout/grid/#grid-options

Your code includes col-sm-4, with the breakpoint for sm set at 540px. Other available options include:

md at 720px

lg at 960px

xl at 1140px

If you wish to establish custom breakpoints, you can create your own media CSS queries.

Answer 6

To learn about the breakpoints in grid, please consult the Grid options section of the Bootstrap documentation. https://getbootstrap.com/docs/4.0/layout/grid/#grid-options

Your code includes col-sm-4, with the breakpoint for sm set at 540px. Other available options include:

md at 720px

lg at 960px

xl at 1140px

If you wish to establish custom breakpoints, you can create your own media CSS queries.

Answer 7

Answer №4

If you find yourself needing to define a 991px resolution in Bootstrap 4 media queries, you can do so manually by adding the following code:

Bootstrap already provides a 992px resolution with the ".col-lg-" class, but if you specifically need 991px, you can include it like this:

@media only screen (min-width:991px) {
  // Your custom code goes here
}

Answer 8

If you find yourself needing to define a 991px resolution in Bootstrap 4 media queries, you can do so manually by adding the following code:

Bootstrap already provides a 992px resolution with the ".col-lg-" class, but if you specifically need 991px, you can include it like this:

@media only screen (min-width:991px) {
  // Your custom code goes here
}

Answer 9

Answer №5

Although not based on bootstrap, this serves as an illustration of how easily you can achieve your desired outcome using CSS3 Flexbox and a single @media query.

See it in action:

.row {
display: flex;
flex-wrap: wrap;
}

.row div {
flex: 1 1 33%;
height: 100px;
}

.row div:nth-of-type(1) {
background-color: lavender;
}

.row div:nth-of-type(2) {
background-color: lavenderblush;
}

.row div:nth-of-type(3) {
background-color: lavender;
}

@media only screen and (max-width: 991px) {

.row div {
flex: 0 0 100%;
}

}

<main>
<p>The columns will automatically stack on top of each other when the screen is less than 991px wide.</p>

<div class="row">
<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
</div>

</main>

Answer 10

Although not based on bootstrap, this serves as an illustration of how easily you can achieve your desired outcome using CSS3 Flexbox and a single @media query.

See it in action:

.row {
display: flex;
flex-wrap: wrap;
}

.row div {
flex: 1 1 33%;
height: 100px;
}

.row div:nth-of-type(1) {
background-color: lavender;
}

.row div:nth-of-type(2) {
background-color: lavenderblush;
}

.row div:nth-of-type(3) {
background-color: lavender;
}

@media only screen and (max-width: 991px) {

.row div {
flex: 0 0 100%;
}

}

<main>
<p>The columns will automatically stack on top of each other when the screen is less than 991px wide.</p>

<div class="row">
<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
</div>

</main>

Creating Uniform Columns in Bootstrap 4

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Box-free calendar dash component

The ngx-bootstrap tooltip arrow adapts its color to match the boundaries that it is surrounded by,

Determine the dynamic height of content in a TypeScript file

How come the width factor encompasses the border when the box-sizing is set to content-box?

Is there a way to stack multiple divs on top of each other in my HTML login page?

Get rid of the "clear field" X button for IE11 on Windows 8

Can you provide me with instructions on utilizing PNGs to create edge masks for an image?

Preventing default events on a jQuery slider: enhance user experience

Adding variables to a div using jquery

Tips for changing the CSS pseudo class of an HTML element with JavaScript?

HTML5 template design clashes with Smarty framework

Menu within a menu, accessed by hovering

Inheriting Internet Explorer's zoom level within the WPF web browser control

Assist the floats to "ascend" and occupy the available space

Customize your popover content with Bootstrap settings

Struggling to position a div below another div within a flex box layout

Include a border around the entire tooltip

Steps for creating a sleek vertical slider with transitional effects using JavaScript and HTML

Maintain the image's aspect ratio by setting the width equal to the height when the height is

Prevent children from extending outside the boundaries of their parent