Bootstrap 4, equal spacing between columns with different content widths

bootstrap 4 space between columns
bootstrap grid
bootstrap 4 container
bootstrap 3 padding
bootstrap nested columns
bootstrap column padding
bootstrap align right
bootstrap vertical space between columns

So within my footer I am using <div class="col"> which creates same width columns, although this is great, the content inside each columns are different widths so visually it looks like the spacing between each column are different widths as shown below:-

Is there a way to create equal spacing between these columns based on the width of their content so the spacing between each look the same?


The easiest way is to combine col-auto (to wrap the columns) with col (to space the columns)...

<div class="row">
        <div class="col-auto">
            ...
        </div>
        <div class="col"> </div>
        <div class="col-auto">
            ...
        </div>
        <div class="col"> </div>
        <div class="col-auto">
            ...
        </div>
        <div class="col"> </div>
        <div class="col-auto">
           ...
        </div>
        <div class="col"> </div>
        <div class="col-auto">
            ...
        </div>
        <div class="col"> </div>
        <div class="col-auto">
            ...
        </div>
        <div class="col"> </div>
        <div class="col-auto">
            ...
        </div>
    </div><!--/row-->

Demo: https://www.codeply.com/go/s4Jk0NBC6a

Grid system · Bootstrap, Bootstrap includes a wide range of shorthand responsive margin and an .mx-​auto class for horizontally centering fixed-width block level content—that is, These utilities are ideal for customizing grid column gutters across breakpoints. Some Bootstrap 4 grid system rules: Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding; Use rows to create horizontal groups of columns; Content should be placed within columns, and only columns may be immediate children of rows


To adjust spacing, add a class ".no-gutter" inside your footer div tag. And add style in your css file.

.no-gutter [class*='col-'] {
  width: auto;
}

Spacing · Bootstrap, Bootstrap's grid system is responsive, and the columns will re-arrange depending it would be better if the content items were stacked on top of each other. That padding is offset in rows for the first and last column via negative margin on . For example, three equal columns would use three .col-sm-4; Column widths are​  The Bootstrap 4 grid system has five classes:.col-(extra small devices - screen width less than 576px).col-sm-(small devices - screen width equal to or greater than 576px).col-md-(medium devices - screen width equal to or greater than 768px).col-lg-(large devices - screen width equal to or greater than 992px)


This can be done using the flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

In Bootstrap 4 there are utilities for convenient work with it https://getbootstrap.com/docs/4.1/utilities/flex/

Example: https://www.codeply.com/go/WQtjXDd8qA

Bootstrap 4 Grid System, The simple .container class sets the width of the layout depending on the width of the screen. It places the content in the middle of the page aligning it horizontally. There is equal space between the Bootstrap 4 container and the left and If you place other elements inside the row along with columns you  Bootstrap 4. Documentation says : Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.


Learn the Bootstrap 4 Grid System in 10 Minutes, justify-content: space-around is a css property for flex items. Bootstrap doesn't work like that as you already have pre-defined column sizes. No need for padding here, as the items are 30% width of the container. justify-content: space-​around makes sure they are positioned away from each other. It saves  The Bootstrap 4 grid system has five classes:.col-(extra small devices - screen width less than 576px).col-sm-(small devices - screen width equal to or greater than 576px).col-md-(medium devices - screen width equal to or greater than 768px).col-lg-(large devices - screen width equal to or greater than 992px)


Adding space between bootstrap columns - HTML-CSS, Bootstrap 4 uses Flexbox as the basis for its grid system. The sum of all columns has to be equal to 12. want to specify the same width for different screen sizes; just add the class with the smallest Thanks to Flexbox, you can easily divide the available space between multiple columns in the same row. I'm trying to order cards in a grid with the same height and width. These cards will have different content with different sizes. They should also go by 3 in each row. It is OK for each row to have different height, but the height should be the same within the row. The width of each card should be the same for the whole grid.


Bootstrap Grid: Mastering the Most Useful Flexbox Properties , The Bootstrap Grid System is used for layout, specifically Responsive Layouts. Understanding how it Bootstrap. The Grid is made up of groupings of Rows & Columns… This is to keep content evenly aligned on the edges of the layout. As you just saw above, Columns can be different widths: Did you  Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use .col-4. Column widths are set in percentages, so they’re always fluid and sized relative to their parent element.