Bootstrap grid won't work using xs columns

Question

I started a new project on Codepen and I\'m using bootstrap.. It\'s been a while since I worked CSS. The grid sistem is not responding for me, I can\'t find the problem. I e

Answer 1

The pen is using Bootstrap 4, and the CSS class names have changed. The xs infix has been removed in 4.x...

col-xs-offset-3 is now offset-3
col-xs-6 is now col-6

  <div class="container-fluid">
    <div class="row">
      <div class="offset-3 col-6">
      <h1>FFC Calculator</h1> 
      </div>
    </div>
  </div>

http://codepen.io/anon/pen/JNyqWX

Answer 2

You are using Bootstrap 4. The class names that you are using are for Bootstrap 3. So you have two options:

• Include Bootstrap 3 in your project and remove bootstrap 4.

• Change the class names in your code. Check this link for offsets in Bootstrap 4 and this one for grid.

This is your code for Bootstrap 4. Also take care of col-md-x, col-lg-x based on your sceen sizes.

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 offset-3">
      <h1>FFC Calculator</h1>
    </div>
  </div>
</div>

Also check your CodePen link where I have fixed it.