Syl Syl - 1 month ago 15
CSS Question

Bootstrap push and pull options does not seems to work

I am trying to use the grid option pull and push, but they do not seems to work. I think it come from my integration of bootstrap css and or js (not sure if push/pull are done via js or CSS).

I have added a push pull that should work at the very top of my web page :

<div class="row">
<div class="col-md-9 col-md-push-3">Should be on the right</div>
<div class="col-md-3 col-md-pull-9">Should be on the left</div>
</div>


at this URL :
http://www.dylog.test.resamarket.com/clients/connexion

I have no idea why it does not work, and i am not sure where to start to investigate.

Answer

The push/pull classes are being applied incorrectly.

The format is:

[push|pull]-[viewport size]-[column size].

I've highlighted one of the columns so you can see the swap more easily.

.col-md-9.push-md-3 {
  background-color: #fc0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-9 push-md-3">.col-md-9 .push-md-3</div>
    <div class="col-md-3 pull-md-9">.col-md-3 .pull-md-9</div>
  </div>
</div>

Comments