bootstrap col-md-offset not working?

Question

I'm using react and trying to render following :

render(){
return(
  <div className="col-md-12">
    <h1 className="col-md-6 col-md-offset-6">To do App</h1>


    <form onSubmit={this.handleSubmit}>
      <input onChange={this.handleChange} value={this.state.text}/>
      <button>Add {this.state.items.length+1}</button>
    </form>


    <Todolist items={this.state.items}/> 
  </div>
)
}

col-md-6 is working but col-md-offset-6 is not working ?? I'm using bootstrap 4.

Answer 1

.col-*-offset-* was removed in Bootstrap 4. The new syntax is simply .offset-*-* so you should be using .offset-md-6 in your above code.

You can learn more about offsetting Bootstrap's Grid columns on their 4.x documentation:

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

Answer 2

You have to change the format of offset to offset-md-6 in place of col-md-offset-6.

The Bootstrap 3 was supporting the format col--offset-* but in Bootsrap 4 the format is like offset--*