Columns in Bootstrap 3.0 Only Stacking Vertically

Vertical space when stacking columns in Bootstrap 3

One way would be with CSS that adds margin-bottom to col-* on smaller devices/widths..

@media (max-width: 768px) {

  [class*="col-"] {
      margin-bottom: 15px;
  }

}

Another way is to add a div that is only visible on smaller devices/widths..

 <div class="col-sm-6">
    <div class="hidden-lg hidden-md hidden-sm"> </div>
        ...

Demo: http://bootply.com/92276

Update 2019

Bootstrap 4 now has spacing utilities that can be used.

Also see: Add spacing between vertically stacked columns in Bootstrap 4

Bootstrap columns stacking vertically on mobile device

The columns are stacking vertically because you're using Bootstrap 4, and the -xs- infix is no longer used. Just use col-4..

  <div class="container border-show center-div">
    <div class="row">
      <div class="col-4 border-show">1</div>
      <div class="col-4 border-show">2</div>
      <div class="col-4 border-show">3</div>
    </div>
  </div>

http://www.codeply.com/go/sCct2CzZte

Bootstrap 4 columns are stacking vertically instead of horizontally

To my understanding, you are trying to achieve something like this:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>    <div class="container-fluid">        <div class="d-flex flex-row align-items-stretch">            <div class="col-md-5">                <div class="jumbotron m-0">                    <h6 class="display-6 m-0">Sorry to see you go!</h6>                </div>            </div>
            <div class="backdrop d-none d-md-flex col-md-7 align-items-center" style="background-color: rgba(255,0,0,.1);">                [.backdrop]            </div>        </div>    </div>

Bootstrap columns stacking vertically and not horizontally

Your code works just fine. The .col-sm-* classes are applied for width 768px and above. If you want make this three divs always horizontally, you have to use classes .col-xs-4 in your case. Updated jsfiddle

Futher reading - http://getbootstrap.com/css/#grid-options

Bootstrap Columns Vertical stacking

Bootstrap has a built in utility for this problem you can use cards and wrap them in card columns. See the documentation here

Why are these columns stacking vertically instead of horizontally bootstrap 4

Remove this div <div id="album"> from your HTML code
As bootstrap 4 uses Flex layout, flex properties should be given to its direct child (here album class )

Bootstrap columns just stack vertically

Bootstrap is functioning properly, but your screen size is likely at the xs level, meaning col-xs-12 renders the columns as full-width sections. Try changing each col-xs-12 col-sm-6 to just col-xs-6:

<div class="container-fluid" id="content">
  <div class="row" id="slideshow">
    <div class="col-xs-12">
      <h1 id="greeting">Welcome to Website.com!</h1>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6 centerButton" id="button1">
      button 1
    </div>
    <div class="col-xs-6 centerButton" id="button2">
      button 2
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6 centerButton" id="button3">
      button 3
    </div>
    <div class="col-xs-6 centerButton" id="button4">
      button 4
    </div>
  </div>
</div>

That should have each button shown in a half-width section. See this Bootply for an example.

With buttons it would look similar to this:

<div class="row">
  <div class="col-xs-6 centerButton form-group" id="button1">
    <button class="btn btn-default btn-block">1</button>
  </div>
  <div class="col-xs-6 centerButton form-group" id="button2">
    <button class="btn btn-default btn-block">2</button>
  </div>
   <div class="col-xs-6 centerButton form-group" id="button3">
    <button class="btn btn-default btn-block">3</button>
  </div>
  <div class="col-xs-6 centerButton form-group" id="button4">
    <button class="btn btn-default btn-block">4</button>
  </div>
</div>

Bootply 2