NewToCode NewToCode - 5 months ago 17
CSS Question

How to get the wells in a bootstrap row giving space between it

I am using bootstrap and trying to get two

wells
in a row not to be squashed right up against each other but am having trouble.
This is my code:

<div class="container">
<div class="row">
<div class="col-sm-4 well"> first column</div>
<div class="col-sm-4 well"> second column</div>
</div>
</div>


I'm following a tutorial which has the code written as I have done, but their webpage loads with spaces between the wells.
Can anyone suggest how to get them to have a space between them on the row?
Thanks.

Answer

According to bootstrap docs

Use the well as a simple effect on an element to give it an inset effect.

So don't use them with col-*-* instead to achieve what you want you can use them as child of col-*-*

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <div class="well">first column</div>
    </div>
    <div class="col-xs-4">
      <div class="well">second column</div>
    </div>
  </div>
</div>


INFO:

Default well:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="well">first column</div>
    <div class="well">second column</div>
  </div>
</div>

Plus you have the optional classes:

Control padding and rounded corners with two optional modifier classes.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="well well-sm">first column</div>
    <div class="well well-lg">second column</div>
  </div>
</div>