Responsive spacing between navbar and content css - html

In a website I'm making with bootstrap, I need responsive spacing between the navbar( bootstrap ) and the content, in this case, a form as shown in the snippet below.
.curved-div svg {
position: absolute;
transform: scale(1, -1);
display: block;
z-index: -1;
}
.navbar-light .navbar-nav .nav-link {
color: white;
z-index: 2;
}
.curved-div {
height: 30vh;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="curved-div">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#0099ff" fill-opacity="1"
d="M0,224L48,197.3C96,171,192,117,288,117.3C384,117,480,171,576,208C672,245,768,267,864,250.7C960,235,1056,181,1152,160C1248,139,1344,149,1392,154.7L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z">
</path>
</svg>
<nav class="navbar navbar-expand-lg navbar-light sticky-top">
<div class="container">
My site
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link " href="/games">All blogs</a>
</li>
<li class="nav-item">
<a class="nav-link " href="/contactus">Contact us</a>
</li>
Login
Register
</ul>
</div>
</ul>
</div>
</div>
</nav>
</div>
<form>
<input type="text" name="username" placeholder="Username"> <br><br>
<input type="password" name="password" placeholder="Password" id="password" oninput="passwordInput()" maxlength="255"> <br><br>
<input type="password" name="password2" placeholder="Retype password" id="password2" oninput="passwordInput()" maxlength="255"> <br><br>
<input type="email" name="email" placeholder="Email( We will not spam )" maxlength="321"><br><br>
<button type="submit" value="Submit" id="submit"> Submit </button> <span id="error"></span>
</form>
But the spacing between the navbar and form varies on all devices, and I want the content to always be out of the navbar's styling. I tried setting the height of .curved-div to percentage( % ) and viewport height ( vh ) but on emulating it in the chrome dev tools, neither worked and both gave the same output of not being responsive. Any help is greatly appreciated. Thanks!

Related

Moving certain items to the right of navbar

Good day, everyone. Please I'm a newbie in CSS and HTML, and this is literally my first project.
So, I'm trying to build a navigation menu, and I'm trying to move two items("SIGN IN" and "CART") to the right, away from the other items on the navbar. But I can't seem to get them to move. navbar-right doesn't work. I've tried housing them inside a container and giving them a relative position, but then the navbar menu is not responsive when I decrease the size of the screen. Also, for some unknown reason, the glyphicon shopping cart item refuses to be displayed.
in my main.css, this is my code-
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<title>Ecommerce</title>
{% load static %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
crossorigin="anonymous">
<link rel="stylesheet"
href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="{% static 'store/styles.css' %}" />
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light md-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Jumaz</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"><i class="fa fa-fw fa-home"></i>Home</a>
</li>
<div id="formAndButton">
<form id="search" method="get" class="d-flex" action="#">
<input id="input" class="form-control me-2" type="text" placeholder="Search products" aria-label="Search">
<button class="btn btn-warning text-light" type="submit">SEARCH</button>
</form>
</div>
<!--i intend moving the following items to the right and make them responsive when screen is shrunk-->
<div class="navbar" id="moveRight">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
SIGN IN
</li>
<li class="nav-item">
<!-- glyphicon shopping cart item does not load -->
<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>CART
</li>
</ul>
</div>
</ul>
</div>
</div>
</nav>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
crossorigin="anonymous"></script>
{% block body %}
{% endblock body %}
</body>
</html>
in my styles.css, i have -
#input{
width: 500px;
border: 1px solid #555;
display: block;
padding: 9px 4px 9px 40px;
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 13px center;
}
#formAndButton{
margin-left: 100px;
}
/*i tried relative positioning of the items like this, but it isn't responsive when screen is shrunk*/
#moveRight{
position:relative; left:200px;
}
li { margin-left: 15px }
In my styles.css, I also tried-
#moveRight{
display: flex;
justify-content: flex-end;}
and also tried,
#moveRight{
grid-column-start: 5; }
<ul class="navbar-nav ms-auto"> should not be nested inside <ul class="navbar-nav me-auto mb-2 mb-lg-0">. They should be next to each other.
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"><i class="fa fa-fw fa-home"></i>Home</a>
</li>
<div id="formAndButton">
<form id="search" method="get" class="d-flex" action="#">
<input id="input" class="form-control me-2" type="text" placeholder="Search products" aria-label="Search">
<button class="btn btn-warning text-light" type="submit">SEARCH</button>
</form>
</div>
</ul>
<ul class="navbar-nav ms-auto">
<li class="nav-item">
SIGN IN
</li>
<li class="nav-item">
<i class="fa fa-fw fa-shopping-cart"></i>CART
</li>
</ul>
</div>
For the icon use the font-awesome shopping cart icon <i class="fa fa-fw fa-shopping-cart"></i>.

Jumbotron breaks navbar on mobile website

Bootstrap Jumbotrons go out of the container on my website which means the navbar on the mobile version does not fill the screen. Other pages where I don't have a jumbotron this problem does not occur.
I tried using a Card instead, but that has some problems when I put it anything other than text
<div class="row">
<div class="jumbotron col-lg-8 col-md-12"
style='margin-left: 15px; margin-top: 15px; padding-top: 10px; padding-bottom: 10px; margin-bottom: 10px;'>
<h1 class="display-3">
<b>Welcome to SkyWars.fun</b>
</h1>
<p class="lead">We focus on updating regularly, and we listen close to
our community suggestions.</p>
<hr class="my-4">
<p>We have a perk system, comparable with kits or abillities. Any
player can enable 3 perks at once. These perks give small advantages
for your gameplay. Choose wisely, and adapt with your perks! Happy
SkyWars! And have fun!</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="../tips" role="button">Tips
and tricks</a>
</p>
</div>
</div>
and for the navbar
<nav class="navbar navbar-expand-lg navbar-dark bg-primary" role="navigation">
<a class="navbar-brand" href="../">IP: SkyWars.fun</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarColor01" aria-controls="navbarColor01"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li
class="nav-item <?php if($_SERVER['REQUEST_URI'] === '/') echo 'active' ?>"><a
class="nav-link" href="https://www.skywars.fun/" title="Go to the main page">Home </a></li>
<li class="nav-item <?php if(isPage('/about/')) echo 'active' ?>"><a
class="nav-link" href="https://www.skywars.fun/about" title="Information about SkyWars.fun">About</a></li>
<li class="nav-item <?php if(isPage('/tips/')) echo 'active' ?>"><a
class="nav-link" href="https://www.skywars.fun/tips" title="Tips and Tricks">Tips</a></li>
<li class="nav-item <?php if(isPage('/donate/')) echo 'active' ?>"><a
class="nav-link" href="https://www.skywars.fun/donate" title="Donate">Donate</a></li>
<li class="nav-item <?php if(isPage('/search/')) echo 'active' ?>"><a
class="nav-link" href="https://www.skywars.fun/search" title="Leaderboard">Leaderboard</a></li>
</ul>
<form class="form-inline my-2 my-lg-0" action="../search" title="Lookup player">
<input class="form-control mr-sm-2" type="text" name="player"
placeholder="Search player">
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Images of the problem
https://drive.google.com/file/d/0ByAYcnq6pPDmNlJsUUNBbkM1aFRITEQ5TUF4U0JxWXpOYVBV/view?usp=sharing
https://drive.google.com/file/d/0ByAYcnq6pPDmcnVsbTNMbkI2MnlNdmZocmtXV0FWbXpmUTdN/view?usp=sharing
* {
margin: 0;
padding: 0;
}
.banner {
background: #e9ecef;
}
#media only screen and (max-width: 767px) {
.display-3 {
font-size: 2rem !important;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary" role="navigation">
<a class="navbar-brand" href="../">IP: SkyWars.fun</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarColor01" aria-controls="navbarColor01"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li
class="nav-item <?php if($_SERVER['REQUEST_URI'] === '/') echo 'active' ?>"><a class="nav-link" href="https://www.skywars.fun/" title="Go to the main page">Home </a></li>
<li class="nav-item <?php if(isPage('/about/')) echo 'active' ?>"><a class="nav-link" href="https://www.skywars.fun/about" title="Information about SkyWars.fun">About</a></li>
<li class="nav-item <?php if(isPage('/tips/')) echo 'active' ?>"><a class="nav-link" href="https://www.skywars.fun/tips" title="Tips and Tricks">Tips</a></li>
<li class="nav-item <?php if(isPage('/donate/')) echo 'active' ?>"><a class="nav-link" href="https://www.skywars.fun/donate" title="Donate">Donate</a></li>
<li class="nav-item <?php if(isPage('/search/')) echo 'active' ?>"><a class="nav-link" href="https://www.skywars.fun/search" title="Leaderboard">Leaderboard</a></li>
</ul>
<form class="form-inline my-2 my-lg-0" action="../search" title="Lookup player">
<input class="form-control mr-sm-2" type="text" name="player"
placeholder="Search player">
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<section class="banner">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="jumbotron">
<h1 class="display-3">
<b>Welcome to SkyWars.fun</b>
</h1>
<p class="lead">We focus on updating regularly, and we listen close to
our community suggestions.
</p>
<hr class="my-4">
<p>We have a perk system, comparable with kits or abillities. Any
player can enable 3 perks at once. These perks give small advantages
for your gameplay. Choose wisely, and adapt with your perks! Happy
SkyWars! And have fun!
</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="../tips" role="button">Tips
and tricks</a>
</p>
</div>
</div>
</div>
</div>
</section>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
I have reduced font-size for small devices, it was getting out of the container. Also use .container > .row > .col-lg-12 [just for example] before using the main class. For reference go through https://getbootstrap.com/docs/4.1/layout/grid/ this link. Hope it'll solve your problem

How to make a collapsible navbar with the links on the right hand side for big screens in Bootstrap?

I have made the navbar in Bootstrap with the links on the right hand side of the screen. Now I want to make the navbar responsive by adding the menu button to it. I have tried making a toggler class with breakpoint -md but by doing so my links appear on the left hand side on the big screens. Also, the button is not visible. Why, what am I doing wrong?
My code:
<nav class="navbar navbar-expand-md sticky-top fixed-top bg-white navbar-toggelable-md">
<div class="container">
<strong><a class="navbar-brand" href="#">Bhawna</a></strong>
<button class="navbar-toggler navbar-toggler-right" type="button"
data-toggle="collapse" data-target="#navbarContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbar-right" id="navbarContent">
<ul class=" navbar-nav navbar-right">
<li class="nav-item active"><a class="nav-link active"
href="index.html">Work</a> </li>
<li></li>
<li class="nav-item"><a class="nav-link" href="about.html">About
Me</a> </li>
</div>
<li> <label class="switch">
<input type="checkbox" checked data-toggle="toggle"
onclick="location.href='darkindex.html'">
<span class="slider round"></span>
</label>
</li>
</ul>
</div>
</nav>
You had the following block outside the <ul class=" navbar-nav navbar-right">... </ul>
<li> <label class="switch">
<input type="checkbox" checked data-toggle="toggle" onclick="location.href='darkindex.html'">
<span class="slider round"></span>
</label>
</li>
Rest, you can style it your way... I have applied a border to the toggler button to show where it is
working snippet below
.navbar-toggler-icon {
border: 1px solid red;
color: blue;
}
span {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000…p='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<nav class="navbar navbar-expand-md sticky-top fixed-top bg-light ">
<div class="container">
<strong><a class="navbar-brand" href="#">Bhawna</a></strong>
<button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#navbarContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbar-right" id="navbarContent">
<ul class=" navbar-nav navbar-right">
<li class="nav-item active"><a class="nav-link active" href="index.html">Work</a> </li>
<li></li>
<li class="nav-item"><a class="nav-link" href="about.html">About
Me</a> </li>
<li> <label class="switch">
<input type="checkbox" checked data-toggle="toggle" onclick="location.href='darkindex.html'">
<span class="slider round"></span>
</label>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).</p>
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
<p>Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar links and display the toggler button.
</p>
</div>

Bootstrap: Inline Form with button unaligns when navbar collapses

Been trying to learn Web Development and am currently messing around with BootStrap 4.0. I have a search field to the right of the navbar which is inline until the dimensions change to that of a phone and my nav links collapse. In the new format my search field and button are no longer inline. To be clear at tablet dimensions it works fine just not at what I would consider phone size. Any Help would be greatly appreciated.
<!-- NavBar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<!-- Brand and Name -->
<a href="#" class="navbar-brand">
<img src="https://logoobject.com/wp-content/uploads/edd/2018/02/Free-Coffee-Logo-1-820x820.png" width = "30" height="30" class="d-inline-block align-top" alt="">
Koffee
</a>
<!-- For hamburger menu -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapsable nav -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left hand side content use margin-right (mr) -->
<ul class="navbar-nav mr-auto">
<!-- Active Link -->
<li class="nav-item">About Us</li>
<!-- Dropdown Menu -->
<li class="nav-item dropdown">
Features
<div class="dropdown-menu" aria-labelledby = "navbarDropdown">
Cultural
The best Cocoa
For the workers
<!-- Just a line :) -->
<div class="dropdown-divider"></div>
Pricing
</div>
</li>
<!-- Disabled link -->
<li class="nav-item">Reviews</li>
</ul>
<!-- Right Hand side content use margin-left (ml) -->
<ul class="navbar-nav ml-auto">
<form class="form-inline">
<input class="form-control" type="search" placeholder="Search..." aria-label="Search">
<button type="button" class="btn btn-outline-success">Go!</button>
</form>
</ul>
</div>
</div>
</nav>
DEMO
Use d-flex instead of form-inline for the search form...
https://jsfiddle.net/ahotm7uv/
<ul class="navbar-nav ml-auto">
<form class="d-flex">
<input class="form-control" type="search" placeholder="Search..." aria-label="Search">
<button type="button" class="btn btn-outline-success">Go!</button>
</form>
</ul>
These are parts of styles that are applied to your .form-control class:
.form-control {
width: 100%;
}
#media (min-width: 576px)
.form-inline .form-control {
width: auto;
}
By default it has width: 100% which is not what you want. But when the screen size is getting bigger than 576px width: auto overlaps it. So changing the default width: 100% to width: auto should do the trick.

Center twitter bootstrap navigation items

I'm trying to center my navigation items, what do I need to edit in order to do so? I've looked in the bootstrap.css file and can't find where to change the settings. I can't figure out how to do it I've been trying everything.
<div id="nav" class="navbar navbar-inverse navbar-static-top">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li>Forum</li>
<li>Download</li>
<li>Play Now</li>
<li>Register</li>
<li class="dropdown">
<a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
Login
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<!-- login form -->
<form action="http://www.07-pk.com/forum/login.php" method="post" onsubmit="md5hash(vb_login_password,vb_login_md5password,vb_login_md5password_utf)">
<script type="text/javascript" src="http://www.07-pk.com/forum/clientscript/vbulletin_md5.js"></script>
Username: <input type="text" class="button" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="1" value="Username" onfocus="if (this.value == 'Username') this.value = '';" />
<br />
Password: <input type="password" class="button" name="vb_login_password" size="10" accesskey="p" tabindex="2" />
<input type="submit" class="button" value="Login" tabindex="4" title="" accesskey="s" />
<input type="hidden" name="s" value="" />
<input type="hidden" name="do" value="login" />
<input type="hidden" name="forceredirect" value="1" />
<input type="hidden" name="vb_login_md5password" />
<input type="hidden" name="vb_login_md5password_utf" />
<input type="hidden" name="url" value="http://www.07-pk.com" />
</form>
<!-- / login form -->
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
Twitter Bootstrap navigation items are having float: left by default. Consider adding the following styles to your own CSS file (or modify the bootstrap.css, which I would not recommend):
.navbar .nav li {
width: 100px; /* or whatever width you want for items */
display: inline-block;
float: none;
}
.navbar .nav {
float: none;
text-align: center;
}
Fiddle example
Wrap your objects you want to center with this <div>
<div style="width:300px; margin: 0 auto;">
//your code here
</div>
Brandon Himpfen give an example of this on his blog. http://www.himpfen.com/center-align-bootstrap-nav-pills/ "In Twitter Bootstrap there are navigation (nav) pills and by default, it is left aligned. We can wrap the navigation with a HTML div element and add a bit of CSS."
http://www.bootply.com/AiyCfTCcBV
/* CSS used here will be applied after bootstrap.css */
.centered-pills {
text-align: center;
}
.centered-pills ul.nav-pills {
display: inline-block;
}
.centered-pills li {
display: inline;
}
.centered-pills a {
float: left;
}
* html .centered-pills ul.nav-pills, *+html .centered-pills ul.nav-pills {
display: inline;
}
<nav class="navbar navbar-default" role="navigation">
<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="navbar-collapse collapse">
<a class="navbar-brand pull-left" href="#">Brand</a>
<div class="centered-pills">
<ul class="nav nav-pills">
<li>Home</li>
<li>Profile</li>
<li>Messages</li>
</ul>
<a class="navbar-brand pull-right" href="#">Brand</a>
</div>
</div>
</nav>