I have an issue with Bootstrap 3. I don't know why, but in mobile screen there is space between navbar-brand and navigation bar ending. I guess, it is because of navigation bar glyphicon doesn't fit my navigation bar. How can I solve this issue? I just need to remove that empty space...
Desktop-size version:
Mobile-size version:
HTML:
<header class="top" role="header">
<div class="container">
<a href="../aplikacija/app.html" class="navbar-brand pull-left">
Brand
</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-align-justify"></span>
</button>
<nav class="navbar-collapse collapse" role="navigation">
<ul class="navbar-nav nav">
<li>Page 1</li>
<li>Page 2</li>
</ul>
</nav>
</div>
</header>
CSS:
div.container {
background-color: #474747;
display: block;
width: 80%;
height: auto;
margin-left: auto;
margin-right: auto;
padding-left: 0px;
}
a.navbar-brand {
text-shadow: none;
background-color: #ccc;
color: #474747;
margin-left: 0px;
}
ul.navbar-nav li a{
text-shadow: none;
color: #ccc;
}
ul.navbar-nav li a:hover {
background-color: #373737;
color: #ccc
}
button.navbar-toggle {
color: #ffffff;
}
span.glyphicon {
color: #009B9B;
}
You can remove this space by removing the margin-bottom from the .navbar-toggle:
button.navbar-toggle {
color: #ffffff;
margin-bottom: 0px !important;
}
!important is optional, i can't tell you right now if you need this, just test it.
Related
I want to make my navbar links have a darker background color whenever I hover my mouse over them. It is working OK, but when I change padding (to 0px in this case) it starts to flicker: (View on full screen for better effect)
Also, the image link is not the same height as the other links(And when collapsed, it has this right blank space), and I can't get it in same line using the current styling rules.
**Edit: It's caused by the padding:0px!important, but that's because I do not want the hovering background to take the entire height. How to make the hovering background with less height?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.navbar {
min-height: 80px;
font-size: 0.8rem;
font-weight:500;
}
.navbar-brand {
padding: 0 15px;
height: 80px;
line-height: 80px;
}
.navbar-toggle {
/* (80px - button height 34px) / 2 = 23px */
margin-top: 23px;
padding: 9px 10px !important;
}
#media (min-width: 768px) {
.navbar-nav > li > a {
/* (80px - line-height of 27px) / 2 = 26.5px */
padding-top: 26.5px;
padding-bottom: 26.5px;
line-height: 27px;
}
}
.bottom-space {
margin-bottom: 20px;
}
#navbar_logged_in > a:link {
color: white ;
}
#navbar_logged_in > a:hover {
opacity:0.7 ;
}
#navbar_logged_in > a:visited {
color: white ;
}
#navbar_logged_in > li.nav-link{
color:white;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link{
background-color: #17A2B8;
}
body {
padding-top: 110px;
}
.main-nav a:hover {
background-color: #0D47A1!important;
padding: 0px!important;
}
</style>
<nav id="navbar_logged_in" class="navbar navbar-expand-lg navbar-light bottom-space fixed-top" style="background: linear-gradient(to right, #3399ff , #1a8cff, #0080ff, #0073e6);">
<div class="container">
<a class="navbar-brand mx-auto" href="#">
Logo
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-right" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item main-nav">
<a class="nav-link" href="#" style="color:white;margin-right:25px;">
<img class="img-circle" src="Image" alt="Image" width="35" height="35" style="border-radius: 50%!important;">
</a>
</li>
<li class="nav-item main-nav">
<a id="homepage_link" class="nav-link" href="#" style="color:white">Homepage</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link" href="#" style="color:white">About</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link" href="#" style="color:white">Log Out</a>
</li>
</ul>
</div>
</div>
</nav>
What's causing that? How can I fix it?
Thanks
The flickering is caused because when you hover, you are removing the padding, which pulls the element out from under the cursor. This then stops the hover and reapplies the padding which puts it back under the cursor, triggering the hover state. Rinse and repeat.
To stop the flicker, you need these two styles to work together:
#media (min-width: 768px) {
.navbar-nav > li > a {
padding-top: 26.5px;
padding-bottom: 26.5px;
line-height: 27px;
}
}
.main-nav a:hover {
background-color: #0D47A1!important;
padding: 0px!important;
}
If you want the hovering background to take less height, replace the part that you don't want the background on with margin. This might look like:
#media (min-width: 768px) {
.navbar-nav > li > a {
padding: 6.5px 8px; /* top/bottom, sides */
margin: 20px 0px;
line-height: 27px;
}
}
.main-nav a:hover {
background-color: #0D47A1!important;
}
In short, don't make your box size change on hover, and if you don't want background, use margin instead of padding
The padding in the hover is causing the problem: padding: 10px!important;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.navbar {
min-height: 80px;
font-size: 0.8rem;
font-weight:500;
}
.navbar-brand {
padding: 0 15px;
height: 80px;
line-height: 80px;
}
.navbar-toggle {
/* (80px - button height 34px) / 2 = 23px */
margin-top: 23px;
padding: 9px 10px !important;
}
#media (min-width: 768px) {
.navbar-nav > li > a {
/* (80px - line-height of 27px) / 2 = 26.5px */
padding-top: 26.5px;
padding-bottom: 26.5px;
line-height: 27px;
}
}
.bottom-space {
margin-bottom: 20px;
}
#navbar_logged_in > a:link {
color: white ;
}
#navbar_logged_in > a:hover {
opacity:0.7 ;
}
#navbar_logged_in > a:visited {
color: white ;
}
#navbar_logged_in > li.nav-link{
color:white;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link{
background-color: #17A2B8;
}
body {
padding-top: 110px;
}
.main-nav a:hover {
background-color: #0D47A1!important;
}
</style>
<nav id="navbar_logged_in" class="navbar navbar-expand-lg navbar-light bottom-space fixed-top" style="background: linear-gradient(to right, #3399ff , #1a8cff, #0080ff, #0073e6);">
<div class="container">
<a class="navbar-brand mx-auto" href="#">
Logo
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-right" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item main-nav">
<a class="nav-link" href="#" style="color:white;margin-right:25px;">
<img class="img-circle" src="Image" alt="Image" width="35" height="35" style="border-radius: 50%!important;">
</a>
</li>
<li class="nav-item main-nav">
<a id="homepage_link" class="nav-link" href="#" style="color:white">Homepage</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link" href="#" style="color:white">About</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link" href="#" style="color:white">Log Out</a>
</li>
</ul>
</div>
</div>
</nav>
I am using Angular 4, Bootstrap 4 alpha 6 (css). I am trying to make each <li> the equal width (not 100% of the navbar). I was trying to use flex box but I cant get it to make them all equal.
I've tried several ways but each time the items will all be a fixed width but not the same width.
Heres an example of what I'm trying to do
[ ---item 1--- | ---item 2--- | ---item 3--- ]
HTML
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ng-container *ngIf="isLoggedIn">
<span class="navbar-text"> </span>
<ul class="nav navbar-nav ">
<li class="nav-item active">
<a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="profileDropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
My Account
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item">My Account</a>
<a class="dropdown-item">My Account</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="accountDropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Profile
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" [routerLink]="['/profile', 'view']">My Account</a>
<a class="dropdown-item" [routerLink]="['/profile']">Edit my Profile</a>
</div>
</li>
</ul>
</ul>
</div>
</nav>
CSS
nav ul{
list-style: none;
margin: 0 2px;
padding: 0;
display: flex;
justify-content: space-around;
}
nav li{
width: 100%
}
.nav.navbar-nav > li{
border-right: 2px solid white;
}
EDIT: This works but I would prefer to use flex so that its done automatically
.nav.navbar-nav > li{
border-right: 2px solid white;
width: 200px;
max-width: 200px;
text-align: center;
}
Other ways I've tried
1)
.navbar ul.nav {
!*margin: 0;*!
display: table;
width: 100%;
!*direction: rtl;*!
table-layout: fixed;
margin:0;
padding:0;
}
.navbar ul.nav li {
!*float: right;*!
display: table-cell;
width: 20%;
!*float: none;*!
text-align: center;
!*direction: rtl;*!
}
.navbar .nav > li:hover {
background-color: #808080
}
.navbar .nav li:first-child a {
!*border-left: 0;*!
!*border-radius: 3px 0 0 3px;*!
}
.nav.navbar-nav > li{
!*width: 10%;*!
border-right: 2px solid white;
}
2)
nav {
text-align: center;
margin: 20px 0 0 ;
padding: 10px 0;
}
nav ul{
list-style: none;
margin: 0 2px;
padding: 0;
}
nav li {
display: inline-block;
padding: 5px 5px;
}
nav a {
font-weight: normal;
padding: 10px 5px;
}
Use calc() Basically by dividing 100% width by 3 each li will be 1/3 in width. Next you can set each "a" to 100% (width will be 100% of parent) and display:inline-block (so that width takes effect.
nav li{
width: calc(100% / 3);
}
I really don't see how you can get them to be the same size without giving your <nav> some kind of width. However, if you do give it a width, you can get all your child elements to be the same width using a combination of display: table; and display: table-cell. It's all the niceties of <table> without the syntactic commitment.
nav {
width: 50%;
position: relative;
}
nav ul {
display: table;
padding: 0;
margin: 0;
width: 100%;
}
nav ul li {
text-align: center;
display: table-cell;
border: 1px solid black;
}
<nav>
<ul>
<li>Fizz</li>
<li>Buzz</li>
<li>Foo</li>
</ul>
</nav>
This question already has answers here:
Bootstrap 3 Navbar Collapse
(12 answers)
Closed 6 years ago.
I've been learning bootstrap 3 and sass for last few days. Anyway, I'm trying to make a navbar that collapses when screen size is below 1000px. And it works, but when I click on toggle button, to show menu dropdown, it opens, then instantly closes.
Here is the code: http://jsbin.com/zahatekisa/edit?html,css,output
.navbar {
background-color: #202C39;
}
div.navbar-header a.navbar-brand {
font-family: "Caveat Brush";
margin-right: 20px;
font-size: 23px;
color: #F29559;
}
div.navbar-header a.navbar-brand:hover {
color: #ffb36b;
}
ul.nav.navbar-nav li a {
font-family: "PT Sans", "cursive";
color: #e6e6e6;
}
ul.nav.navbar-nav li a:hover {
color: #ffffff;
background-color: #2a394a;
}
ul.navbar-right li p.navbar-text {
display: block;
}
#media (max-width: 1050px) {
ul.navbar-right li a {
float: left;
}
ul.navbar-right li p.navbar-text {
margin-left: 15px;
position: relative;
top: -4px;
}
}
#media (max-width: 1000px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar-collapse.collapse {
display: none !important;
}
.navbar-nav {
float: none !important;
margin: 7.5px -15px;
}
.navbar-nav > li {
float: none;
}
.navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
}
}
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<!--Making the toggle button-->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--Logo-->
Lorem ipsum dolor.
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Lorem
</li>
<li>Lorem
</li>
<li>Lorem
</li>
<li>Lorem
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<p class="navbar-text">Contact Me:</p>
</li>
<li><i class="fa fa-facebook-official" aria-hidden="true"></i>
</li>
<li><i class="fa fa-twitter-square" aria-hidden="true"></i>
</li>
<li><i class="fa fa-skype" aria-hidden="true"></i>
</li>
<li><i class="fa fa-envelope" aria-hidden="true"></i>
</li>
</ul>
</div>
</div>
</nav>
The problem here is this particular style you have, which is forcing the navbar to be hidden regardless of whether it is open or closed:
#media (max-width: 1000px) {
.navbar-collapse.collapse {
display: none !important;
}
}
I can see what you're doing here - you're trying to combine Bootstrap's .collapse class with your own custom addition to the navbar. However, there's a problem with your logic: I suspect you wrote your style under the assumption that Bootstrap toggles .collapse to hide or show collapsed content. This is incorrect. In fact, Bootstrap toggles .in for this - so you should not be hiding the content if the element has the class .in. Simply change your selector to:
#media (max-width: 1000px) {
.navbar-collapse.collapse:not(.in) {
display: none !important;
}
}
Here's the fix in context:
.navbar {
background-color: #202C39;
}
div.navbar-header a.navbar-brand {
font-family: "Caveat Brush";
margin-right: 20px;
font-size: 23px;
color: #F29559;
}
div.navbar-header a.navbar-brand:hover {
color: #ffb36b;
}
ul.nav.navbar-nav li a {
font-family: "PT Sans", "cursive";
color: #e6e6e6;
}
ul.nav.navbar-nav li a:hover {
color: #ffffff;
background-color: #2a394a;
}
ul.navbar-right li p.navbar-text {
display: block;
}
#media (max-width: 1050px) {
ul.navbar-right li a {
float: left;
}
ul.navbar-right li p.navbar-text {
margin-left: 15px;
position: relative;
top: -4px;
}
}
#media (max-width: 1000px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar-collapse.collapse:not(.in) {
display: none !important;
}
.navbar-nav {
float: none !important;
margin: 7.5px -15px;
}
.navbar-nav > li {
float: none;
}
.navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
}
}
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<!--Making the toggle button-->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--Logo-->
Lorem ipsum dolor.
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Lorem
</li>
<li>Lorem
</li>
<li>Lorem
</li>
<li>Lorem
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<p class="navbar-text">Contact Me:</p>
</li>
<li><i class="fa fa-facebook-official" aria-hidden="true"></i>
</li>
<li><i class="fa fa-twitter-square" aria-hidden="true"></i>
</li>
<li><i class="fa fa-skype" aria-hidden="true"></i>
</li>
<li><i class="fa fa-envelope" aria-hidden="true"></i>
</li>
</ul>
</div>
</div>
</nav>
(Something else worth noting is that you may want to use max-width: 768px rather than max-width: 1000px for your media query, since that's the Bootstrap breakpoint for "tablet" sized devices.)
I have the following:
Basically, I want the text "Home" to begin in line with the edge of the car picture. The last nav item should end on the right´. The Navbar is placed inside of a container-fluid. All li-elements between "Home" and "Inscriptions & Contact" should be centered. How can I accomplish that?
My Code:
<nav class="navbar navbar-default text-uppercase">
<div class="container">
<!-- 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="nav-first">Home</li>
<li>Instructeurs</li>
<li>Véhicules</li>
<li>Examen & Liens</li>
<li class="nav-last">Inscriptions & Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
And this is what I changed in my custom css file:
#font-face {
font-family: MyriadPro;
src: url("../fonts/MyriadPro-Regular.otf");
}
.navbar {
font-family: "MyriadPro", sans-serif;
font-size: 18px;
}
.navbar-default {
background-color: inherit !important;
border-color: none !important;
text-align: center;
}
.nav > li > a {
padding-right: 50px !important;
padding-left: 50px !important;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
.active {
background-color: gray;
border-radius: 15px;
}
.navbar-nav>.active>a, .navbar-nav>.active>a:hover, .navbar-nav>.active>a:focus {
color: #8D1917 !important;
}
You can try this using table layout (similar to btn-group-justified in Bootstrap).
CSS:
.container-fluid > .navbar-collapse,
.container-fluid > .navbar-header,
.container > .navbar-collapse,
.container>.navbar-header {
margin-left: -15px;
margin-right: -15px;
}
.navbar-nav-justified {
display: table;
width: 100%;
table-layout: fixed;
}
.navbar-nav-justified > li {
display: table-cell;
vertical-align: middle;
float: none;
width: 100%;
}
CODEPEN
I encountered a problem with the bootstrap navbar.
I Made menu using the navbar-static-top - at first it was all good. When menu was expanded and few items added, and now with the width before to collapse, it is spreading into two lines that looks awful. In CSS bootstrap'a dig deeper, but without much success. Please help, how to be here?
Currently it looks like shown here:
Navbar code:
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="bright-logo-text navbar-brand" href="index.html">Clipboard Stripper</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
Features<b class="caret"></b>
<ul class="dropdown-menu">
<li>Features</li>
<li>Screenshots</li>
<li class="active">Usage</li>
</ul>
</li>
<li>Features</li>
<li>Screenshots</li>
<!--li class="active">Usage</li-->
<li>Download</li>
<li>Purchase</li>
<!--li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
</ul>
</li-->
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Contact</li>
<li> </li>
</ul>
</div>
</div>
</div>
</div>
</div>
I also wanted to use it through CSS without redownloading and customizing Bootstrap, Skelly answer is working fine on Bootstrap 3 but in my case Bootstrap 3.2 the CSS changed a litte... Here is an updated version of all CSS required
#media (max-width:992px){
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
You can have it collapse sooner using a CSS media query. The default breakpoint is 768px. Here we change it to 990 pixels so that it collapses before the 2-line wrapping starts..
#media (max-width: 990px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
}
Demo: http://www.bootply.com/119436