How can I vertically center the glyphicon (and badge) elements in this context:
<ul class="list-group">
<li class="list-group-item">
Multi-line content...
<span class="glyphicon glyphicon-chevron-right pull-right"/>
</li>
<li class="list-group-item">
Multi-line content...
<span class="badge">123</span>
</li>
</ul>
By multi-line content I mean a varying number of lines and in some cases wrapping text and a variety of font sizes.
This is to provide navigation pages for a mobile app that include the visual hint of an arrow over to the right. When the content wraps or has other multi-line elements vertical centering is what other frameworks provide but they typically use background images. I am using Bootstrap 3.0.0.
How about this..
.list-group-item span {
margin-top: -0.5em;
}
DEMO: http://bootply.com/95790
<div class="list-group">
<div class="list-group-item">
<div class="media-body">
Multi-line content...
</div>
<div class="media-right" style="vertical-align:middle;">
<span class="glyphicon glyphicon-chevron-right"></span>
</div>
</div>
</div>
Related
I have here my sidenav but it keeps indenting and indenting everytime i put an icon before my link. Please help me..
<ul id="mobile-demo" class="side-nav">
<li>
<div class="userView">
<img class="background" src="http://materializecss.com/images/office.jpg">
<img class="circle" src="http://materializecss.com/images/yuna.jpg">
<span class="white-text name">Nelson Maranan</span>
<span class="white-text email">nmaranan11#gmail.com</span>
</div>
</li>
<li><i class="material-icons">home</i>Home</li>
<li><i class="material-icons">list</i>Browse</li>
<li><i class="material-icons">message</i>Messages <span class="badge">3</span></li>
<li><i class="material-icons">notifications</i>Notifications <span class="badge">10</span></li>
<li><div class="divider"></div></li>
<li><a class="subheader">Subheader</a></li>
<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>
Here's my screenshot to show the problem:
But when I remove icons it displays just fine. How can I fix this issue?
I faced this issue too.
Just add this rule in your stylesheet:
.side-nav li{
clear: both;
}
I have had a search and cannot find this exact problem so I hope the question is not duplicate.
First time users of Bootstrap 3.
From reading here and the bootstrap documentation I believe the navbar should have its own container such as:
<nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/index.html">My Site</a>
</div>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="active"><span class="glyphicon glyphicon-home"></span> Home</li>
<li><span class="glyphicon glyphicon-list-alt"></span> Services</li>
<li><span class="glyphicon glyphicon-info-sign"></span> About</li>
<li><span class="glyphicon glyphicon-envelope"></span> Contact</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">content goes here and this content is under the navbar</div>
</div>
The body of the page then has its own container. Is that Correct?
I have done that and then added a row but the first row content is under the navbar.
Have I missed something like a class that I should add to the first row to ensure it starts below the navbar and not after it?
I found a similar question where the answer was to ensure the navbar had "navbar-fixed-top" but I already have that.
Read documentation carefully.
According to Bootstrap navbar docs:
The fixed navbar will overlay your other content, unless you add padding to the top of the body. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
body {
padding-top: 70px; // Your navbar height
}
Make sure to include this after the core Bootstrap CSS.
If I understand your problem correctly that you want content below the navbar just write
navbar-fixed
instead of
navbar-fixed-top
like this
<nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-
fixed"role="navigation">
it will work
see this fiddle fiddle
are you looking for this ???
This is caused by the Bootstrap class fixed-top, Fixed navbars use position: fixed, which pulls the Nav from the normal flow of the DOM.
For this to have an effect, having your content below the Navbar not overflow unto the Navbar, BootStrap Docs>> https://getbootstrap.com/docs/4.5/components/navbar/
Under the #Placement section, advise you to give custom CSS to the body.
Add some padding to the <body style="padding: somepadding"> element.
I am not sure why my drop down menus are not showing as buttons for this prototype with bootstrap 3?
Also, how can I make this the correct layout if I want some content for above a navigation menu? I am trying to do this without editing the bootstrap CSS and use it natively.
http://www.bootply.com/8IqCa4lI6T
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
<img src="" class="img-responsive" alt="" height="50px" width="50px">picture
</div>
<div class="col-xs-4">
action
</div>
<div class="col-xs-4">
<span id="title">4rows text</span><br>
<span id="title">4rows text</span><br>
<span id="title">4rows text</span><br>
</div></div>
<!-- nav bottom -->
<div class="row">
<ul class="nav nav-pills navbar-nav navbar-left">
<li>menuleft1</li><li>menuleft2</li><li>menuleft3</li>
</ul><!-- /nav -->
<ul class="nav nav-pills navbar-nav navbar-right">
<li>menuright1</li><li>menuright2</li><li>menuright3</li>
</ul><!-- /right_nav -->
</div>
Here is a Bootply with the appropriate HTML to accomplish what I believe you are trying to:
http://www.bootply.com/eTDrQdGYJ7
As for placing something above the navbar. You do not need to modify the Bootstrap CSS. By giving the navbar an ID, and giving a CSS attribute to that ID, that will supercede the Bootstrap CSS.
Alternatively, it's typically okay practice to override the Bootstrap classes in a separate CSS file that is loaded in after the Bootstrap CSS file. That way you are not changing the Bootstrap CSS itself, but have control to modify styling as needed.
when the width gets < 768px it show the toggle icon on the right bottom but when I click on it it does not show the list items I defined. can anyone advise me on this? appreciated.
https://jsfiddle.net/fj0u49bj/
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav">
<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a>title</a>
</div>
<div class="collapse navbar-collapse" id="main-nav">
<ul class="nav navbar-nav navbar-right">
<li>
<a>Link2 </a>
</li>
<li>
<a>Log In</a>
<a>Sign Up</a>
</li>
</ul>
</div>
</nav>
I think you are missing to load jQuery. Bootstrap.js is build on top of jQuery which means that can not work without it.
If you do have jQuery (before bootstrap.js) than probably your navigation formatting is not properly done.
Have a look at this fiddle (link in the comment below) so you can see how a correct nav-bar must be.
I have a header section with a nav inside, because the header class has a image background image set in css which looks impressive. The issue is the navigation collapse expands the header and pushes the non-nav content that also resides inside the header section down.
Is there a way to make the collapse menu display above it's parent div when collapsing rather than pushing content down the page and expanding my Header area?
Please can you tell me how to collapse the nav bar over all other content?
Below is an example that shows how to have just about any kind of 'vanilla bootstrap' NAVBAR configuration you could want. It includes a site title, both collapsing and non-collapsing menu items aligned left or right, and static text. Be sure to read the comments to get a fuller understanding of what you can change. Enjoy!
Fiddle: http://jsfiddle.net/nomis/n9KtL/1/
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Title -->
<div class="navbar-header pull-left">
GNOMIS
</div>
<!-- 'Sticky' (non-collapsing) right-side menu item(s) -->
<div class="navbar-header pull-right">
<ul class="nav pull-left">
<!-- This works well for static text, like a username -->
<li class="navbar-text pull-left">User Name</li>
<!-- Add any additional bootstrap header items. This is a drop-down from an icon -->
<li class="dropdown pull-right">
<span class="glyphicon glyphicon-user"></span><b class="caret"></b>
<ul class="dropdown-menu">
<li>
Profile
</li>
<li>
Logout
</li>
</ul>
</li>
</ul>
<!-- Required bootstrap placeholder for the collapsed menu -->
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div>
<!-- The Collapsing items navbar-left or navbar-right -->
<div class="collapse navbar-collapse navbar-left">
<!-- pull-right keeps the drop-down in line -->
<ul class="nav navbar-nav pull-right">
<li>News</li>
<li>Shop</li>
</ul>
</div>
<!-- Additional navbar items -->
<div class="collapse navbar-collapse navbar-right">
<!-- pull-right keeps the drop-down in line -->
<ul class="nav navbar-nav pull-right">
<li>Locator</li>
<li>Extras</li>
</ul>
</div>
</div>
</nav>