Adding a fresh, spacious breakpoint in Bootstrap 4 with just CSS

Question

Adding a fresh, spacious breakpoint in Bootstrap 4 with just CSS

I encountered an issue when the extra large Bootsrap 4 max container width, set at 1140px, was not wide enough for my needs. I aim to ensure that my websites look good on large monitors as well, but the bootstrap grid is too narrow. The most straightforward solution would be to override the .container max-width like this:

@media (min-width: 1200px) {
  .container {
     max-width: 1540px;
  }  
}

However, I don't just want to expand the xl max-width. What I desire is to introduce a new comprehensive breakpoint with all of Bootstrap 4's grid features, including columns, display modes, spacing, etc. Something similar to introducing col-xxl or another equivalent term. Ultimately, it should appear something like this:

<div class="col-xxl-2 col-xl-3 col-md-4 col-sm-6 text-xxl-center"></div>

Do you have any suggestions on how to accomplish this effectively using CSS?

html css twitter-bootstrap bootstrap-4 responsive-design

Answer 1

Answer №1

Fortunately, I have developed a solution for your specific request in some of my previous projects. I encountered a similar issue and created a small CSS extension to address it.

To implement this solution, simply create a bootstrap-grid-xxl.css file, or incorporate the code into any existing CSS stylesheet. Be sure that the custom CSS is loaded after the original Bootstrap 4 CSS files to override the container max-width property. Below is the code snippet you can use:

/* BS4 Grid XXL breakpoint */

/* adding col-xxl classes */
.col-xxl, .col-xxl-1, .col-xxl-2, ... {position: relative; width: 100%; padding-right: 15px; padding-left: 15px;}

@media (min-width: 1570px){
    /* expanding BS4 max-width */
    .container {max-width: 1540px;}

    /* define grid columns xxl */
    .col-xxl, .col-xxl-auto, .col-xxl-1, ... {flex-grow: 1; flex-basis: 0; max-width: 100%;}

    /* include other styling rules for different elements based on xxl breakpoint */

}

Alternatively, you can explore incorporating this functionality using Sass if you are familiar with Bootstrap 4 Sass structure. Adapting the principles used in the provided CSS snippet should help you add an XXL breakpoint successfully.

Answer 2

Fortunately, I have developed a solution for your specific request in some of my previous projects. I encountered a similar issue and created a small CSS extension to address it.

To implement this solution, simply create a bootstrap-grid-xxl.css file, or incorporate the code into any existing CSS stylesheet. Be sure that the custom CSS is loaded after the original Bootstrap 4 CSS files to override the container max-width property. Below is the code snippet you can use:

/* BS4 Grid XXL breakpoint */

/* adding col-xxl classes */
.col-xxl, .col-xxl-1, .col-xxl-2, ... {position: relative; width: 100%; padding-right: 15px; padding-left: 15px;}

@media (min-width: 1570px){
    /* expanding BS4 max-width */
    .container {max-width: 1540px;}

    /* define grid columns xxl */
    .col-xxl, .col-xxl-auto, .col-xxl-1, ... {flex-grow: 1; flex-basis: 0; max-width: 100%;}

    /* include other styling rules for different elements based on xxl breakpoint */

}

Alternatively, you can explore incorporating this functionality using Sass if you are familiar with Bootstrap 4 Sass structure. Adapting the principles used in the provided CSS snippet should help you add an XXL breakpoint successfully.

Answer 3

Answer №2

Integrate SASS into your project and include a file named custom.scss (you have the freedom to choose any name you prefer).

Next, add:

$grid-breakpoints: (
        xs: 0,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px,
        xxl: 1600px
);

@import "~bootstrap/scss/bootstrap";

You can now utilize xxl in Bootstrap's mixins. However, if you wish to use col-xxl-*, you must compile custom.scss using node-sass and utilize this compiled bootstrap file as your current bootstrap file.

Find more information at: https://getbootstrap.com/docs/4.4/layout/grid/#grid-tiers

AN ALTERNATE METHOD

Visit the website below to create your breakpoints, then download the customized result:

Answer 4

Integrate SASS into your project and include a file named custom.scss (you have the freedom to choose any name you prefer).

Next, add:

$grid-breakpoints: (
        xs: 0,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px,
        xxl: 1600px
);

@import "~bootstrap/scss/bootstrap";

You can now utilize xxl in Bootstrap's mixins. However, if you wish to use col-xxl-*, you must compile custom.scss using node-sass and utilize this compiled bootstrap file as your current bootstrap file.

Find more information at: https://getbootstrap.com/docs/4.4/layout/grid/#grid-tiers

AN ALTERNATE METHOD

Visit the website below to create your breakpoints, then download the customized result:

Answer 5

Answer №3

None of the solutions provided worked for me, so I took matters into my own hands and created a custom gist based on Bootstrap 4.6.0.

The custom code included in the gist modifies the default .container size to 1600px but can easily be adjusted by commenting out specific blocks as needed.

// Customized from bootstrap 4.6.0

/* Styles for Extra Large Screens */
.container-xxl {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 1600px) {
  /* Adjusting container sizes for xxl screens */
  .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
    max-width: 1520px;
  }

  /* Additional styling for flexible column layouts */

  .col-xxl-1, .col-xxl-2, ... // More styles found in the gist link
}

Answer 6

None of the solutions provided worked for me, so I took matters into my own hands and created a custom gist based on Bootstrap 4.6.0.

The custom code included in the gist modifies the default .container size to 1600px but can easily be adjusted by commenting out specific blocks as needed.

// Customized from bootstrap 4.6.0

/* Styles for Extra Large Screens */
.container-xxl {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 1600px) {
  /* Adjusting container sizes for xxl screens */
  .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
    max-width: 1520px;
  }

  /* Additional styling for flexible column layouts */

  .col-xxl-1, .col-xxl-2, ... // More styles found in the gist link
}

Adding a fresh, spacious breakpoint in Bootstrap 4 with just CSS

Answer №1

Answer №2

Answer №3

Similar questions

Issue with backdrop-filter blur effect not functioning correctly

When the container size increases, elements may overflow and be pushed outside the boundaries

Can you place more than one Twitter Bootstrap carousel on a single webpage?

Adjusting element placement on collapsed navbar using Bootstrap

Establishing a boundary by incorporating a variable into a numerical value

What could be the reason for the d-flex class in bootstraps preventing my div from expanding to 100% width?

Changing the class of a <div> element with PHP

The height of the container is not adjusted correctly after loading data via ajax which causes it to overlap with

Javascript function fails to run smoothly during rapidscrolling

Is there a way to eliminate the directional tag from the base css by utilizing a separate css file?

Using flexbox to evenly distribute images with borders and padding to ensure consistent height

Ways to turn off the adaptive transient feature

What is the best way to incorporate the <input> tag within an additional div in a bootstrap 4 form displayed inline?

Utilize/Absolve/Add a Prefix to angular material scss styles

How can I adjust the size and alignment of each line within a single cell in an HTML table?

Dealing with a large amount of HTML content following an Ajax request: best practices

Issue with borders not displaying on cards in Bootstrap 3.4.0

jQ identifying children with particular styling attributes

Delay loading background image until a specific time has passed, preventing website from fully loading

Tips for resizing user-uploaded images to fit the required dimensions outlined in the design draft using CSS or JavaScript