Patrick McDermott Patrick McDermott - 9 months ago 46
CSS Question

Issue with Bootstrap grid system and vertical aligning


I finally found an easy way of vertical aligning

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.
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.


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


<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 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 class="col-xs-12 col-sm-6 col-md-3 text-md-right">
<span class="txt--white"></span><br>
<span class="no-margin-bottom txt--white">001111111111 (8am - 8pm GMT)</span>


.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 Source

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;">

Codepen here

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