CODEWITHSUNDEEP
csstwitter-bootstrap
Jeremy Beamer
Jeremy Beamer

Reputation: 31

Two Jumbotrons in One Row in Bootstrap?

Looking to get two Jumbotrons in one row in Bootstrap, which I've done successfully in the code below, but they are directly side by side, so they touch. I would like to get some separation between them. I've tried changing the col-sm-6 to col-sm-5, but it creates a space on the wrong side. Any solutions for me? 

<div class="container">
  <div class="row">
    <div class="well-lg">
    <div class="one">
    <div class="jumbotron col-sm-6 text-center">
      <div class="text-center">
        <p>Caption</p>
        <a href="#" class="btn btn-sm ban-default">Link & Such</a>
      </div>
    </div>
  </div>
  <div class="two">
    <div class="jumbotron col-sm-6 text-center">
        <p>Caption</p>
        <a href="#" class="btn btn-sm ban-default">Link & Such</a>
      </div>
  </div>
</div>
</div>
</div>

CSS: 

.one .jumbotron
{ background-image:url('Img');
color:white;
padding-top: 0;
min-height:200px;
min-width:45%;
border-radius:0;
}

.two .jumbotron
{ background-image:url('Img');
color:white;
padding-top: 0;
min-height:200px;
min-width:45%;
border-radius:0;
}

Upvotes: 1

Views: 2028

Answers (1)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85575

I've tried changing the col-sm-6 to col-sm-5, but it creates a space on the wrong side.

I hope you want to use offset like this:

<div class="col-sm-6">

and for the next div:

<div class="col-sm-5 col-sm-offset-1">

Now, the space is between col-sm-6 and col-sm-5 and the space is equal to 1 column width.

Upvotes: 1

Related Questions