how to center glyphicon in a navbar - html

I am trying to have 3 icons in a navbar at positions left, right and center
The left and right ones are at correct position but the center link is not in the center but towards the left i.e. contiguous with the left glyphicon
Any idea how to center it?
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<a href="/left_link" class="btn btn-info btn-lg pull-left hidelink">
<span class="glyphicon glyphicon-log-out"></span> Left
</a>
<a href="/center_link" class="btn btn-info btn-lg hidelink">
<span class="glyphicon glyphicon-log-out"></span> Center
</a>
<a href="/right_link" class="btn btn-info btn-lg pull-right hidelink">
<span class="glyphicon glyphicon-log-out"></span> Right
</a>
</div>
</div>

Add the text-center class to your container div:
<div class="container text-center">
Bootply example

Related

Bootstrap - Center align page header with floating buttons

Behold the following image of a .page-header I currently have:
As you can see, I'd like to have the page header in the center and buttons aligned to the left and right.
This works because both buttons have the same size. Now, if I increase the size of the left button, look what happens:
You see? The header isn't aligned to the center anymore, it's pushed to the right by the left button. Which is undesirable in my case. I would like to have the header centered, no matter what the size of the buttons are. If the buttons are too big, it would be even okay if they overlap the header.
Here is a code sample and a jsfiddle:
<div class="container">
<div class="page-header">
<a class="btn btn-primary pull-left" role="button" href="#">
<span class="glyphicon glyphicon-plus"></span>
</a>
<a class="btn btn-success pull-right" role="button" href="#">
<span class="glyphicon glyphicon-plus"></span>
</a>
<h3 class="text-center">Header</h3>
</div>
<div class="alert alert-danger" role="alert">No results</div>
</div>
You just need to use positions to make them consistent with the size.
.page-header .pull-left {position: absolute; left: 15px;}
.page-header .pull-right {position: absolute; right: 15px;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="page-header">
<a class="btn btn-primary pull-left" role="button" href="#">
<span class="glyphicon glyphicon-plus"></span>
</a>
<a class="btn btn-success pull-right" role="button" href="#">
<span class="glyphicon glyphicon-plus"></span>
</a>
<h3 class="text-center">Header</h3>
</div>
<div class="page-header">
<a class="btn btn-primary pull-left" role="button" href="#">
<span class="glyphicon glyphicon-plus"></span> text pushes to right
</a>
<a class="btn btn-success pull-right" role="button" href="#">
<span class="glyphicon glyphicon-plus"></span>
</a>
<h3 class="text-center">Header</h3>
</div>
<div class="alert alert-danger" role="alert">No results</div>
</div>
Preview
This is one way, but obviously, this has issues with sizing. When the width is very less, there might be overlaps.

Navbar buttons group is not alighed correctly

I am trying to build a nav-bar that would appear on the left-hand side while the rest of the content would be on the right-hand side. The problem is the nav-bar buttons group is not in the same section with the navbar-header. I want the nav-bar buttons to align together vertically with the navbar-header on the left-hand side, but right now they just overlap each other. Not only that, it looks like the buttons group is sitting/overlapping between the navbar-header and the rest of the HTML content.
Much appreciate all the help that can point me to fix this! Thank you!
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-lg-2">
<nav class="navbar navbar-default navbar-fixed-side">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="./">Lessons</a>
</div>
<div class="btn-group-vertical navbar-btn">
<div class="btn-group navbar-btn">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
Lesson #1<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Lecture</li>
<li>Quiz</li>
<li>Exam</li>
</ul>
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
Lesson #2<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Lecture</li>
<li>Quiz</li>
<li>Exam</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
<div class="col-sm-9 col-lg-10">
<div id="lesson">
<h2>Choose a lesson on the left panel to start your study module.</h2>
</div>
</div>
</div>
</div>
First off, You seem to be missing a outline CSS.
I assume the code is also incomplete, as I do not see at the very least a "body" tag. Note, if you do have a outline CSS, and you didn't include it, that may also be your issue.
Towards alignment, you can use "margin(-*):[distance][unit];", or "align="[Center, right, justified, etc]"

How do you get an element to fill out the rest of the space in a btn-group?

I'm trying to get a Bootstrap btn-group to work, with a few fixed elements and a btn in the middle that grows to fill out the entire thing.
JSFiddle of what I'm trying to do: http://jsfiddle.net/DTcHh/2988/
Basically the idea is I'm trying to get the 3 and 4 buttons to stick to the right, while the "Text here" element fills out the rest of the space. Menu sticks to the left.
I've tried putting btn-group-justified on the element I want to expand out but that makes it take up the entire width of the screen, whereas I want everything to be on one line.
HTML:
<div class="btn-group" role="group" aria-label="First group" style="width:100%; margin-right:-300px">
<div class="btn-group dropup" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Menu <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Edit Lead</li>
<li>Transfer Call</li>
</ul>
</div>
<div class="btn-group" role="group" aria-label="First group" style="width: 100%; margin-right:-320px">
<span class="btn btn-default" style="width:100%;">
Some text here
</span>
</div>
<button type="button" class="btn btn-default">3</button>
<button type="button" class="btn btn-default">4</button>
</div>
Any idea how I can achieve this?
Solved it.
Needed to set table-layout:auto on the parent group and add width:1% to the fixed size elements, width:100% to the expandable elements and add the class btn-group-justify to the parent group. Looks perfect now!
Fiddle: http://jsfiddle.net/DTcHh/2996/
try this
<div class="btn-group btn-group-justified" role="group" aria-label="First group" style="table-layout:auto">
<div class="btn-group dropup" role="group">
<a type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Menu
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>Edit Lead</li>
<li>Transfer Call</li>
</ul>
</div>
<span class="btn btn-default" style="width: 100%;">Hey there</span>
<a type="button" class="btn btn-default">3</a>
<a type="button" class="btn btn-default">4</a>
</div>

BootStrap show element upon collapse

I am using BootStrap. I have a navbar at the bottom of my page with a phone number. I want that phonenumber to be hidden upon collapse and then show a phone icon instead. Currently I can't get the phone icon to be hidden before collapse. Here is my code:
<div class = "navbar navbar-default navbar-fixed-bottom">
<div class="navbar-inner">
<div class ="container">
<div>
<img src="logo.png" alt="#" href="#">
</div>
<div class = "collapse.in navbar-collapse navbar-right" id="bund-navbar-collapse-semi">
<a class = "navbar-btn btn-success btn-xl btn pull-right">
<span class="glyphicon glyphicon-earphone" ></span>
</a>
</div>
<div class="collapse navbar-collapse navbar-right" id="bund-navbar-collapse-fuld" >
<a class = "navbar-btn btn-success btn-xl btn pull-right">
<span class="glyphicon glyphicon-earphone "></span> +45 30 30 30 30
</a>
</div>
</div>
</div>
</div>
make use of the responsive-utilitie classes from Bootstrap.
add the classes
hidden-sm
hidden-md
hidden-lg
to the button with just the phone icon, see the fiddle. Never mind that the icon isn't showing properly. I would use bootply but its down for maintenance.

How to align a large glyph left in a button

I'm using Bootstrap 3 to make a button:
<a class="btn btn-primary btn-lg" href="#">
<span class="glyphicon glyphicon-shopping-cart" style="font-size: xx-large"></span>
Buy Now<br/>
<span class="small">Instant and secure</span><br/>
</a>
The glyph is, as I intend, large. But I want the two lines of text to both push to the left to make room for the glyph.
What I get currently is this:
What I'm aiming for is this:
How can I do this?
You could use pull-left in the icon, and change the btn to text-align:left:
CSS
.btn-lg {
text-align:left;
width:190px;
}
HTML
<a class="btn btn-primary btn-lg" href="#">
<span class="glyphicon glyphicon-shopping-cart pull-left" style="font-size:xx-large;margin:5px;"></span>
Buy Now<br>
<small>Instant and secure</small>
</a>
Demo: http://bootply.com/86858