Bootstrap class on div not working as expected

Question

I have very simple example with bootstrap here:

<div class="col-sm-12">
    <div class="col-sm-12">
      <div class="col-sm-2">
        <input class="form-control" placeholder="Last name, first name" />
      </div>
      <div class="col-sm-1">
        <button class="btn btn-success btn-block">Search</button>
      </div>
    </div>
  </div>

Input and button should be side by side (like it's always used to be) - but it's not. Input is at the top of button (see photo below). What has happened with bootstrap col classes?

This is [covered in the docs](https://getbootstrap.com/docs/4.3/layout/grid/#how-it-works) ***"In a grid layout, content must be placed within columns and only columns may be immediate children of rows"*** — Carol Skelly, Nov 25 '19 at 00:57
This is new. It was not like this in version 3.3, I know that. Example like mine was working. — FrenkyB, Nov 25 '19 at 01:01

score 1 · Accepted Answer · answered Nov 25 '19 at 00:57

You need to use .row class for columns.

And those columns are too narrow to show contents.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="row">
  <div class="col-sm-3">
    <input class="form-control" placeholder="Last name, first name" />
  </div>
  <div class="col-sm-3">
    <button class="btn btn-success btn-block">Search</button>
  </div>
</div>

But this is new. OK, my previous bootstrap version was 3.3 - and my case was working. They've changed this. This is not backward compatible. — FrenkyB, Nov 25 '19 at 01:00

Bootstrap class on div not working as expected

1 Answers1