CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
raduken
raduken

Reputation: 2119

margin and pull-right in bootstrap buttons

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>

Upvotes: 2

Views: 13229

Answers (5)

Ravi Ubana
Ravi Ubana

Reputation: 395

.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>

Upvotes: 0

this.girish
this.girish

Reputation: 1306

 <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

Upvotes: 1

Abhishek Pandey
Abhishek Pandey

Reputation: 13568

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>

Upvotes: 4

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

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/

Upvotes: 1

mayersdesign
mayersdesign

Reputation: 5310

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>

Upvotes: 2

Related Questions