CODEWITHSUNDEEP
csstwitter-bootstrapnavbar
Whoever
Whoever

Reputation: 1399

How to center/justify text/icon button in Bootstrap collapsed header?

I have some jQuery mobile pages with header containing text and/or buttons. Sometimes there are centered text, others just crowded with buttons. There are several of screen sizes and/or number of buttons.

header with buttons and text

How do I duplicate this in Bootstrap collapsed navbar-header? I created this jsfiddle sample, but couldn't figure out how to center/justify text and buttons.

Jsfiddle Sample

<div class="navbar-header">
<!-- button left -->
<a type="button" class="navbar-toggle collapsed pull-left navbar-icon" data-toggle="collapse" data-target="#navbar"> 
    <i class="fa fa-bars fa-2x"></i>
</a> 

<!-- button right --->
<a class="navbar-toggle collapsed navbar-icon" data-toggle="collapse">
    <i class="fa fa-edit fa-2x"></i>
</a>

<!-- in the middle -->
<div style="text-align:center">
<a class="navbar-toggle collapsed navbar-icon" data-toggle="collaplse">
    <i class="fa fa-reply fa-2x"></i>
</a>
 <a class="navbar-toggle collapsed navbar-icon" data-toggle="collaplse">
    <i class="fa fa-foward fa-2x"></i>
</a>
 <a class="navbar-toggle collapsed navbar-icon" data-toggle="collaplse">
    Some Text
</a>
</div>
</div>

<style>
body {
padding-top: 60px;
}
.navbar-header .navbar-icon {
    line-height:30px;
    height:30px;
    border:0;
}

.navbar-header  a.navbar-icon {
    padding:0 0px;
}
</style>

The closest answer I can find is previous discussion. Tried the answers there, didn't work.

Any hint what I miss? Thanks

Update: Final version based on suggestions. Probably something to do with customized bootstrap, my local version looks a lot better than on jsfiddle.

enter image description here

Upvotes: 0

Views: 1384

Answers (2)

Sanova
Sanova

Reputation: 541

You mean like this?

http://jsfiddle.net/aoyss2Lm/6/

I added the bootstrap class "text-only" inline to the <li>

Upvotes: 1

Carlos Roque
Carlos Roque

Reputation: 458

The reason you are not able to center your icons is because they have a css property that is making them float right;

add a class to the icons for example 'no-float' then add this to your css
.no-float { float:none!important; }

that will make it work

So this
<a class="navbar-toggle collapsed navbar-icon" data-toggle="collaplse">
becomes this
<a class="no-float navbar-toggle collapsed navbar-icon" data-toggle="collaplse">

Upvotes: 1

Related Questions