Tips for breaking out of the traditional 12 column grid using Bootstrap 4 flexbox grid system

My excitement was palpable when I learned that Bootstrap 4 would be implementing flexbox for a grid system. I anticipated the fast and efficient element sizing capabilities that flexbox offers. However, it appears that Bootstrap 4 simply enhances the existing 12-column grid system with some additional functionality.

Does Bootstrap 4 simplify relating column widths in layouts with fewer than 12 columns?

Just like how flexboxes can easily relate to each other by specifying the horizontal space division using properties like flex-grow, flex-shrink, and flex-basis.

[1:5][-----3:5-----][1:5]

This could be achieved with a straightforward flex:3; on the col2 item. However, it still seems unattainable in Bootstrap 4. Am I overlooking something?

twitter-bootstrapcssflexboxbootstrap-4

Answer №1

Bootstrap 4 now includes flexbox capabilities while maintaining a 12-unit grid system. Additionally, there is a new auto-layout grid that allows for the use of any number of columns...

Auto-layout columns:

By utilizing SASS, you have the flexibility to adjust the number of grid columns through the $grid-columns variable. In the example provided, a 10-unit grid configuration can be achieved. When combined with auto-layout, a layout like [1:5][-----3:5-----][1:5] is possible.

SASS

  $enable-flex:true;
  $grid-columns: 10;
  $grid-gutter-width: 15px;

HTML 

 <div class="row">
         <div class="col-xs">
              1:5
         </div>
         <div class="col-xs-6">
               3:5
         </div>
         <div class="col-xs">
               1:5
         </div>
 </div>

Note: The $grid-gutter-width variable can also be adjusted to change the spacing between columns.

UPDATE

Bootstrap 4.0.0:

In the latest version of Bootstrap 4 (alpha 6), the auto-layout .col is now used for flex-grow, enabling the creation of half-unit column layouts. The layout option 

2.5--7--2.5</code closely resembles your custom <code>1.5--3.5--1.5
(10-unit) grid, providing an alternative to the SASS customization.

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

What is the Best Way to Implement a Three-Column Layout on a Website with Bootstrap?

https://i.sstatic.net/raF0B.jpg ...

cssbootstrap-4frontend

Reorder the nested list structure

Hello there and thank you for stopping by! I am facing a challenge with a list containing multiple nestings. I am interested in changing the order of these two lists, and I am curious if this is achievable using only CSS. List item 1 List item 2 List ...

cssflexbox

bootstrap-vue tabs - reveal specific tab content based on URL anchor tag

For my SPA, I am utilizing bootstrap-vue and currently working on a page where nested content needs to be placed within b-tabs. If given a URL with an anchor (e.g. www.mydomain.com/page123#tab-3), the goal is to display the content under Tab 3. Query: Ho ...

javascriptvue.jsbootstrap-4bootstrap-vue

Ensure that the following div remains positioned beneath the current one

After reading through this question on Stack Overflow, about creating a responsive table with both vertical and horizontal headers, I came across this particular issue, demonstrated in this codepen example: Currently, the second table appears directly bel ...

htmlcss

Develop your website layout with Flexbox (Bootstrap 4.2), using stacked grid designs similar to the float: left method

For my Wordpress theme, I am utilizing Bootstrap 4.2 to design a basic grid layout for a list of blog posts. In my design, I have a Card that is double the height of others and I am attempting to 'float' two single-height cards beside it. Previ ...

csslayoutflexboxbootstrap-4

What is the reason position:sticky does not align elements to right:0?

I attempted to align my element with the right:0 property, but it doesn't seem to have any effect. The element remains stuck to the left edge of the browser window. * { margin: 0; padding: 0; font-size: 50px; } .sticky { width: 50px; h ...

htmlcsscss-positionsticky

Why does my jQuery IMG center script not work in Chrome and Safari, but it works perfectly in IE?

I am experiencing an issue with centering the thumbnails of products on my e-commerce website. Despite successful centering in IE, FF, and Opera, Chrome and Safari are not aligning the thumbnails properly – they remain at the top of the div instead of be ...

phpjqueryhtmlcss

What method can be used to dynamically resize two side-by-side iframes in proportion to a specific ratio?

Hey, I've got this code snippet: So there are two iframes positioned side by side with a specific ratio as indicated in the link provided. My aim is to maintain that ratio regardless of the screen size where it's viewed. The first iframe is named ...

htmlcssiframe

Hiding elements with CSS using the display:none property and using the :

Trying to display an image when hovering over another image. Works well in Safari, but Chrome and Firefox fail to load the image properly. Have searched for solutions related to visibility:hidden but none seem to solve this cross-browser issue. HTML being ...

csshover

Tips on changing the text alignment in ant design's Select with search field component within a Form item to support various languages

Is there a way to dynamically change the text direction in a search field based on the language being typed by the user? For example, switch the direction to rtl when typing in Arabic and to ltr while typing in English. I need to achieve this functionalit ...

htmlcssreactjsantd

Issues with the width of Table TD cells not being responsive

I'm having trouble adjusting the width of my dropdown menu columns. I've tried various methods, but can't seem to get each column to be 200px wide as desired. .dropbtn { background-image: url("../sliki/meni.png"); width: 220px; heig ...

htmlcss

Creating a unique and personalized dual-row navigation bar using Bootstrap

Currently, I am striving to achieve a "conflict free" two-row fixed-top navbar in Bootstrap 3. I am unsure if it necessitates two separate "navbars" according to the official Bootstrap definition. While I possess decent coding skills, my knowledge of the B ...

jqueryhtmlcsstwitter-bootstrap

What is the reason for background images not loading when using `display: none`?

I'm really struggling to understand this puzzle: When the page loads, will mypic.jpg be downloaded by the browser? #test1 { display: none; } #test2 { background-image: url('http://www.dumpaday.com/wp-content/uploads/2017/01/random-pic ...

htmlcss

I'm attempting to use Bootstrap to align my divs, but unfortunately, it doesn't seem to be working as I had hoped

I've been attempting to align divs using bootstrap, but I'm encountering issues. I prefer not to use a table for this purpose and have experimented with the table tag, but would rather achieve alignment with divs and bootstrap. My familiarity ...

cssbootstrap-5

Safari is truncating the box-shadow of an element enclosed within a button

I'm struggling with a button that has an element inside receiving a box-shadow: button { padding: 0; border: 0; margin: 0; overflow: visible; -webkit-appearance: none; background: white; } .shadow { display: inline-block; vertical- ...

csssafaribox-shadow

Modify the appearance of material-ui checkbox

For my project, I am utilizing React along with the styled-component package for styling. However, I am facing an issue when it comes to styling the Material-ui checkbox using styled-component. The problem lies in narrowing the border of the checkbox, as t ...

cssreactjsfrontendmaterial-uistyled-components

Implement a JavaScript and jQuery code that alternates between fading in and fading out every two items in a

Can someone help me figure out how to create a loop that fades in and out every 2 items from an unordered list using jQuery? I've been trying to do this, but my loop only processes one item at a time. <div> <ul> <li>item1</li ...

javascripthtmljquerycss

The span's presence causes the neighboring span to shift downwards

HTML <span class="symbol">$</span> <span class="value">400</span> This code snippet displays the symbols "$" and "400" at the same level in the document. However, if we introduce some styling using CSS: .symbol { font-size: 2e ...

htmlcss

An error occurs when trying to modify the classList, resulting in an Uncaught TypeError for setting an indexed property

I am attempting to modify the classes of multiple sibling elements when a click event occurs. Some of these elements may have multiple classes, but I always want to change the first class. Below is the code that I created: let classList = event.currentTa ...

javascriptcsscss-selectors

Looking to effectively personalize various React MUI components?

I want to enhance the MUI component by adding more variations and new properties. Check out this screenshot of a React Example component: The Example component can be seen in the image above. I am seeking advice as I don't have much experience with ...

cssreactjsmaterial-ui