Patrick McDermott Patrick McDermott - 1 month ago 9
CSS Question

Issue with Bootstrap grid system and vertical aligning

Issue

I finally found an easy way of vertical aligning

div
elements and any other type of element, using the CSS properties/values
display:flex; align-items: center
. Only issue now is that the Boostrap grid system i.e.
col-*-12
doesn't work. If I set a div to expand 12 columns when on a small screen, it doesn't react, in less I remove the styling used for vertically aligning the items.

Aim

To be able to use the grid system and vertically align elements. Any idea why
display: flex
is preventing the grid from working?

HTML

<div class="header-container padding-top--sm padding-bottom--sm">
<div class="row" style="display:flex;align-items:center">
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="#" alt="logo">
</div>
<div class="col-xs-12 col-sm-6 col-md-6 text-md-center">
<p class="txt--white no-margin-bottom h-thin"> Lorem Ipsume, lorem ipsum</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 text-md-right">
<span class="txt--white">support@support.com</span><br>
<span class="no-margin-bottom txt--white">001111111111 (8am - 8pm GMT)</span>
</div>
</div>
</div>


CSS

.padding-top--sm { padding-top: 1rem; }
.padding-bottom--sm { padding-bottom: 1rem; }


.header-container {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
width: 90%;
}

Answer

The reason is because you are not letting your row "wrap" its contents.

By default its is set to nowrap value which means it does not allow the content to extend the container.

Try adding flex-wrap: wrap; property to your row style

<div class="row" style="display:flex;align-items:center;flex-wrap: wrap;">
...
</div>

Codepen here

PS: Consider avoiding inline styles, use external or atleast internal styles as much as possible

Comments