CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
michltm
michltm

Reputation: 1469

Bootstrap: buttons in margins

I am trying to get the following layout with previous and next buttons in margins.

enter image description here

I feel like there is probably cleaner way to do that than I did until now. Especially I have a problem keeping a margin of 20 px between buttons and title/body.

Here is a Fiddle https://jsfiddle.net/bb61c412/418/

And code:

#title {
  height: 30px;
  background-color: red;
}
#middle {
  margin-top: 30px;
  height: 100px;
  background-color: yellow;
}
<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />



<div class="col-sm-1" id="left">

  <button>Prev</button>

</div>
<div class="col-sm-10" id="title"></div>
<div class="col-sm-offset-1 col-sm-10 col-sm-offset-1" id="middle"></div>
<div class="col-sm-offset-11 col-sm-1 " id="right">
  <button>Next</button>
</div>




<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Upvotes: 1

Views: 109

Answers (2)

Pranab Mitra
Pranab Mitra

Reputation: 389

Can you please try this: HTML:

<div class="row">
  <div class="col-sm-1" id="left">
    <button>Prev</button>
  </div>
  <div class="col-sm-10">
    <div id="title"></div>
    <div id="middle"></div>
  </div>
  <div class="col-sm-1 pull-right" id="right">
    <button>Next</button>
  </div>
</div>

CSS:

#title{
  height:30px;
  background-color:red;
}

#middle{
  margin-top:30px;
  height:100px;
  background-color:yellow;
}

#left {
  margin-bottom: 10px; 
}

#right {
  clear: both;
  margin-top: 10px;
}

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167192

Something like this?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-1">
      <input type="button" class="col-xs-1" />
    </div>
    <div class="col-sm-10 col-xs-12">
      Hello, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, sint distinctio eaque rem non culpa pariatur quae harum ratione, dolore quos maxime fugit ducimus odit, ex iste voluptatem molestiae repellendus.
    </div>
    <div class="col-xs-12 col-sm-1">
      <input type="button" class="col-xs-1" />
    </div>
  </div>
</div>

Upvotes: 1

Related Questions