2

I have a row container and several div elements containing images. The first div element in the bunch has a class of col-xs-2 as well as offset-xs-3. For some reason unknown to me, it will not work.

Here is the code:

<div>
    <div className='jumbotron' style={{'text-align': 'center'}}>

      <h1 className='header'>Welcome to Redux</h1>
      <h4 className='header_subtext'>Check out dynamic state alteration</h4>
      <br />

      <div className='row'>
        <div className='col-xs-2 offset-xs-3 '>
          <img src='react.png' height='96' alt='React' onClick={this.handleVoteReact} />
        </div>
        <div className='col-xs-2'>
          <img src='vue.png' height='96' alt='React' onClick={this.handleVoteVue} />
        </div>
        <div className='col-xs-2'>
          <img src='angular.png' height='96' alt='React' onClick={this.handleVoteAngular} />
        </div>
      </div>

    </div>
  </div>
WebDevBooster
  • 14,674
  • 9
  • 66
  • 70
cerrach
  • 187
  • 3
  • 14

1 Answers1

3

For some reason unknown to me, it will not work.

The reason is simple:

There's NO -xs- in Bootstrap 4 (anymore).

Just replace col-xs-2 with col-2 and offset-xs-3 with offset-3 and it'll work.

Bootstrap 4 is "mobile first".

That's why "xs" is redundant and not needed and the reason why it was removed.

Reference:

https://getbootstrap.com/docs/4.0/layout/grid/#grid-options

WebDevBooster
  • 14,674
  • 9
  • 66
  • 70