CODEWITHSUNDEEP
htmlcssbuttontwitter-bootstrap-3glyphicons
gonzalo2000
gonzalo2000

Reputation: 648

Bootstrap 3: no line break when aligning icons and text

Using Bootstrap 3, I'm trying to align horizontally two buttons (aligned left and right, respectively) with a glyphicon centered between them. Right now I'm only able to align them while using a

element for the glyphicon, which causes for all three elements to appear on separate lines. How can I make all three be lined up horizontally while keeping to left, center, and right positions?

I have seen similar questions asked, and have been trying to implement text: nowrap; in CSS without success.

<div class="col-xs-10 col-xs-offset-1">
  <button type="button" class="btn btn-primary btn-lg" id="por-btn">por</button>

  <p class="text-center"><span class="glyphicon glyphicon-ok-sign"></span></p> 

  <button type="button" class="btn btn-primary pull-right btn-lg" id="para-btn">para</button>
</div>

Upvotes: 1

Views: 1325

Answers (2)

Hiren Vaghasiya
Hiren Vaghasiya

Reputation: 5544

Flexbox Solution is Great but this way also you can align items in horizonal

.valign{
line-height:46px;
vertical-align:middle;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
<div class="col-xs-10 col-xs-offset-1">
<div class="row">
<div class="col-xs-4">
  <button type="button" class="btn btn-primary btn-lg" id="por-btn">por</button>
</div>
<div class="col-xs-4 text-center valign">
  <span class="glyphicon glyphicon-ok-sign"></span> 
</div>
<div class="col-xs-4">
  <button type="button" class="btn btn-primary pull-right btn-lg" id="para-btn">para</button>
  </div>
  </div>
</div>

Upvotes: 2

Andrew Adam
Andrew Adam

Reputation: 1582

Flexbox can be of great help here:

.horizontalAlign{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
<div class="col-xs-10 col-xs-offset-1 horizontalAlign">
  <button type="button" class="btn btn-primary btn-lg" id="por-btn">tall<br>button<br>is<br>here</button>

  <p class="text-center">icon is here</span></p> 

  <button type="button" class="btn btn-primary pull-right btn-lg" id="para-btn">everything is centered</button>
</div>

P.S.: the paragraph tag can be anything (e.g. the required fa-icon) i jus wanted to display the positioning.

Upvotes: 1

Related Questions