Twitter Bootstrap Question posted in

margin and pull-right in bootstrap buttons – Twitter bootstrap

Hi I am trying to apply pull-right in my buttons but I noticed 2 things:

1 – the cancel button suppose be in the left but it is not, my html make be in the left, but after apply pull-right the cancel button goes after the save.

2- it is a way using just boostrap to give margin bettween the buttons? right now the buttons has no margin.

.col-md-12 {
  background: gray;
  border: 1px solid black;
  height: 50px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<footer class="col-md-12">
  <button class="btn btn-default pull-right" data-dismiss="modal" id="btn-cancel2" type="button">Cancel</button>
  <button class="btn btn-primary pull-right" data-dismiss="modal" id="btn-save2" type="button">Save</button>
</footer>
Tags:

5

Answers


  1. 0

    Here you are:

    .col-md-12 {
  background: gray;
  border: 1px solid black;
  height: 55px;
  padding-top: 9px; /*Visual improvement ;)*/
}

#btn-save2 {margin-left: 10px }
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<footer class="col-md-12">
  <button class="btn btn-primary pull-right" data-dismiss="modal" id="btn-save2" type="button">Save</button>
  <button class="btn btn-default pull-right" data-dismiss="modal" id="btn-cancel2" type="button">Cancel</button>
</footer>
    Login or Signup to reply.
  2. 0

    Remove class pull-right on Button

    Add Class parent div text-right

    <footer class="col-md-12 text-right">
<button class="btn btn-default" data-dismiss="modal" id="btn-cancel2" type="button">Cancel</button>
<button class="btn btn-primary" data-dismiss="modal" id="btn-save2" type="button">Save</button>
</footer>

    https://jsfiddle.net/wuuf5g87/6/

    Login or Signup to reply.
  3. 0

    Bootstrap buttons are inline-block element, you can simply use text-right to parent to shift button.

    .col-md-12 {
  background: gray;
  border: 1px solid black;
  height: 50px;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<footer class="col-md-12 text-right">
  <button class="btn btn-default" data-dismiss="modal" id="btn-cancel2" type="button">Cancel</button>
  <button class="btn btn-primary" data-dismiss="modal" id="btn-save2" type="button">Save</button>
</footer>
    Login or Signup to reply.
  4. 0 
     <footer class="col-md-12 ">

<div class="pull-right">


    <a class="btn navbar-btn btn-primary " href="#" target="_texturepack">Save</a>
    <a class="btn navbar-btn btn-default" href="#" target="_texturepack">Cancel</a>

</div>
 </footer>

    jsfiddle Working Demo

    Login or Signup to reply.
  5. 0 
    .col-md-12 {
  background: gray;
  border: 1px solid black;
  height: 50px;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<footer class="col-md-12">
  <div style="float:right;">
  <button class="btn btn-default" data-dismiss="modal" id="btn-cancel2" type="button">Cancel</button>
  <button class="btn btn-primary" data-dismiss="modal" id="btn-save2" type="button">Save</button>
</div>
</footer>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search