I am creating a nav menu and finding it difficult center aligning the text under the glyphyicon. Here is my code below. Not sure if i am doing things right. It needs to be like the expected navbar
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Requests</p></li>
<li><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span><p>Activities</p></li>
<li><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Reports</p></li>
<li><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Admin</p></li>
<li class="dropdown">
Country <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li><span class="glyphicon glyphicon-save" aria-hidden="true"></span><p>Save View</p></li>
</ul>
Current Nav bar
Expected Navbar
Just use text-center in the UL navbar:
<ul class="nav navbar-nav text-center">
<li><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Requests</p></li>
<li><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span><p>Activities</p></li>
<li><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Reports</p></li>
<li><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Admin</p></li>
<li class="dropdown">
Country <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li><span class="glyphicon glyphicon-save" aria-hidden="true"></span><p>Save View</p></li>
</ul>
http://www.bootply.com/xuzJVpzuat
Maybe you can try to do this, it works for me !
<div class="navbar-brand navbar-brand-centered"><span class="glyphicon glyphicon-log-in" id="logIcon"></span></div>
You can check the code in a working fiddle: HERE
Related
I'm having a problem with the text-center class of bootstrap not working, here is it.
I have a div that contains several list and other tags, but when I apply the text-center class to make this center on the screen it does nothing, this applies also in a div that contains divs in shapes, here is my code:
<div class="col-md-12 options-bar text-center">
<ul class="nav nav-pills">
<li class="normal-li">Ordenar por: </li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
Status <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
Clientes <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
Fecha <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
Productos <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
Asignación <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li class="normal-li">Ver por: </li>
<li><input type="radio"><label style="color: rgb(46, 116, 241 );">Solicitud</label></li>
<li><input type="radio"><label style="color: rgb(46, 116, 241 );">Producto</label></li>
<li id="clock"><span class="glyphicon glyphicon-time"></span></li>
<li>
<input type="text" class="form-control" placeholder="Buscar solicitudes">
</li>
</ul>
</div>
As you can see my div with class options-bar is the one that contains the rest, but the class text-center does nothing.
Here is my css stylesheet for options-bar:
.options-bar {
line-height: 50px;
width: 100%;
}
You may use this for centering div's. Add the below code to the div that you want to center.
.centered {
margin: 0 auto;
}
Note: Usually div's occupy entire width(since its a block element). Make sure that the div which you want to center has width lesser than the screen width. Otherwise you may not see any difference.
You can set the .nav.nav-pills li items to flex-grow: 1; which will cause all the list items to expand equally to fill the space. See this fiddle for an example. I also added a snippet below, but it only looks right in full-screen.
.options-bar {
line-height: 50px;
width: 100%;
}
.nav.nav-pills li {
flex-grow: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div class="col-md-12 options-bar text-center">
<ul class="nav nav-pills">
<li class="normal-li">Ordenar por: </li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
Status <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
Clientes <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
Fecha <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
Productos <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
Asignación <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li class="normal-li">Ver por: </li>
<li>
<input type="radio">
<label style="color: rgb(46, 116, 241 );">Solicitud</label>
</li>
<li>
<input type="radio">
<label style="color: rgb(46, 116, 241 );">Producto</label>
</li>
<li id="clock"><span class="glyphicon glyphicon-time"></span></li>
<li>
<input type="text" class="form-control" placeholder="Buscar solicitudes">
</li>
</ul>
</div>
Try this css class in your divs:
.vertCenter {
display: flex;
justify-content: center;
align-items: center;
I'm working on a bootstrap template, I created a div class with a logo, but when I tight the window of chrome, the logo is up above the mobile menu.
My site (mobile version)
*What I want the mobile version of my site to look like**
My code:
<div class="logo">
<img src="img/bulls-logo.png" class="img-responsive" width="500px" height="100px">
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><i class="fa fa-home" aria-hidden="true"></i> HOME<span class="sr-only">(current)</span></li>
<li class="dropdown">
<i class="fa fa-users" aria-hidden="true"></i> ATLETI<span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
<i class="fa fa-calendar" aria-hidden="true"></i> CALENDARIO GARE<span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="active"><a href="#">
<i class="fa fa-plus" aria-hidden="true"></i> AFFILIAZIONI<span class="sr-only">(current)</span></a></li>
<li class="dropdown">
<i class="fa fa-star" aria-hidden="true"></i> RISULTATI <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="active"><a href="#">
<i class="fa fa-phone" aria-hidden="true"></i> CONTATTI<span class="sr-only">(current)</span></a></li>
<li class="dropdown">
<i class="fa fa-cart-plus" aria-hidden="true"></i> SHOP<span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
CSS:
.logo
{background-color: #FFF;
height: auto;
width: 100%;
padding-bottom: 10px;}
.navbar
{margin-bottom:0px !important;
font-size: 12px;
: #000;}
If you want that your logo be inside your navbar, you should put your logo inside html code of the navbar.
Try to add this line inside your navbar header (and change img path):
<img src="path/to/your/image.jpg">
and add some classes to your extra logo div
<div class="logo">
<img src="img/bulls-logo.png" class="img-responsive hidden-xs" width="500px" height="100px">
</div>
EDITED example :
<div class="logo">
<img src="img/bulls-logo.png" class="img-responsive hidden-xs" width="500px" height="100px">
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<img src="path/to/your/image.jpg">
<button type="button" class="navbar-toggle collapsed navbar-left" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><i class="fa fa-home" aria-hidden="true"></i> HOME<span class="sr-only">(current)</span></li>
<li class="dropdown">
<i class="fa fa-users" aria-hidden="true"></i> ATLETI<span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
<i class="fa fa-calendar" aria-hidden="true"></i> CALENDARIO GARE<span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="active"><a href="#">
<i class="fa fa-plus" aria-hidden="true"></i> AFFILIAZIONI<span class="sr-only">(current)</span></a></li>
<li class="dropdown">
<i class="fa fa-star" aria-hidden="true"></i> RISULTATI <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="active"><a href="#">
<i class="fa fa-phone" aria-hidden="true"></i> CONTATTI<span class="sr-only">(current)</span></a></li>
<li class="dropdown">
<i class="fa fa-cart-plus" aria-hidden="true"></i> SHOP<span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
I don't know, when this mobile view comes, so you have to edit the px. In my example the view is showed, when the width is below 720px.
#media (max-width: 720px) {
.logo{
width: 50%;
float: left;
}
.logo img{
width: 100%;
float: none;
}
}
And in the headtag of your html-file you have to add:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I am a new web designer and I am struggling right now in designing a responsive navbar in bootstrap with the proper icons. Could you please tell me which icons I should use for the following menu options?
Here's my HTML Code:
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">
<i class="glyphicon glyphicon-home"></i> Home</a></li>
<li>Services</li>
<li>Time Series</li>
<li>Profile</li>
<li>Place Order</li>
<li>FAQ</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Admin <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
First time I see a request like this .. You're the designer, you should do whatever you want and don't need advices from others.
But since you asked it, here something you could start with : http://www.bootply.com/jePKaJ3ebg
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">
<i class="glyphicon glyphicon-home"></i> Home</a></li>
<li><i class="glyphicon glyphicon-th"></i> Services</li>
<li><i class="glyphicon glyphicon-calendar"></i> Timeline</li>
<li><i class="glyphicon glyphicon-user"></i> Profile</li>
<li><i class="glyphicon glyphicon-inbox"></i> Place a Request</li>
<li><i class="glyphicon glyphicon-question-sign"></i> FAQ</li>
<li><i class="glyphicon glyphicon-info-sign"></i> About</li>
<li><i class="glyphicon glyphicon-envelope"></i> Contact</li>
<li class="dropdown">
<i class="glyphicon glyphicon-wrench"></i> Admin <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
<i class="glyphicon glyphicon-bullhorn"></i> Support <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
And as I commented, you could use Font Awesome Icons to get a wider catalog, and IMO they are better designed than Bootstrap's glyphicons.
I have some things in a <ul>, but I need the last one to be all the way to the right. How do I put it there? (I need the dropdown to move to the right.)
<ul class="nav navbar-nav">
<li><a class="btn" href="#"><i class="glyphicon glyphicon-pencil"></i></a></li>
<li><a class="btn" href="#"><i class="glyphicon glyphicon-book"></i></a></li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
Split it into two navbars: one that is on the left and one that is floated right with pull-right:
<ul class="nav navbar-nav">
<li><a class="btn" href="#"><i class="glyphicon glyphicon-pencil"></i></a></li>
<li><a class="btn" href="#"><i class="glyphicon glyphicon-book"></i></a></li>
</ul>
<ul class="nav navbar-nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Dropdown <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
Check out the example from Bootstrap's example site: http://examples.getbootstrap.com/navbar-fixed-top/index.html
<div class="container">
<ul class="nav navbar-nav">
<li><a class="btn" href="#"><i class="glyphicon glyphicon-pencil"></i></a></li>
<li><a class="btn" href="#"><i class="glyphicon glyphicon-book"></i></a></li>
<!--// add a class of .pull-right //-->
<li class="dropdown pull-right ">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
DEMO
relatively new to HTMl and CSS, but I solved a similar problem without having to make a duplicate menu bar. Simply 'float: right;' in the tage you want to appear on the right. (Best to have them as the last elements to maintain logical order.)
for example
Action
becomes
Action
Repeat this for any elements you want on the right hand side. It will overwrite the defined float:left default.
Dropdown
Action
Another action
Something else here
Nav header
Separated link
One more separated link
How do you make a dropdown control work inside a badge with Twitter Bootstrap? Here's what I'm trying to do:
<ul>
<li>
<span class="badge badge-success">
Badge with dropdown
<span class="dropdown-toggle" data-toggle="dropdown">>>></span>
<ul class="dropdown-menu">
<li>Alpha</li>
<li>Beta</li>
<li>Gamma</li>
</ul>
</span>
</li>
</ul>
http://jsfiddle.net/HhqJN/
If you click on the greater than symbols at the end of the badge, it should open the dropdown. But because it's inside a badge, the dropdown menu's style looks horrible. If I try to move the actual menu list outside the badge, then the dropdown doesn't work at all. Is there a way to reset or undo the style set for the badge?
Here's my customization...
Hope this works for you...
Demo:- http://jsfiddle.net/HhqJN/4/
HTML:-
<div class="btn-toolbar btn-custom">
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle btn-mini" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-danger dropdown-toggle btn-mini" data-toggle="dropdown">Danger <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div><!-- /btn-group -->
</div>
Thanks....