How do I center both the brand and the navbar in bootstrap. Also how can I have the navbar stop around the brand and links, ie wraps around content and navbar and not stretch across the entire page. Please take a look at the
.navbar-default {
background-color: #395085;
border-color: #2a3858;
}
.navbar-default .navbar-brand {
color: #dcdcdc;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #ffffff;
}
.navbar-default .navbar-text {
color: #dcdcdc;
}
.navbar-default .navbar-nav > li > a {
color: #dcdcdc;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #ffffff;
}
.navbar-default .navbar-nav > li > .dropdown-menu {
background-color: #395085;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
color: #dcdcdc;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
color: #ffffff;
background-color: #2a3858;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li.divider {
background-color: #2a3858;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffffff;
background-color: #2a3858;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #ffffff;
background-color: #2a3858;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #ffffff;
background-color: #2a3858;
}
.navbar-default .navbar-toggle {
border-color: #2a3858;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #2a3858;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #dcdcdc;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #dcdcdc;
}
.navbar-default .navbar-link {
color: #dcdcdc;
}
.navbar-default .navbar-link:hover {
color: #ffffff;
}
.navbar-brand {
background-size: 1
^% auto;
background-repeat: no-repeat;
margin-right: 0px;
background-clip: padding-box;
}
.container-fluid .row .col-lg-offset-1.col-lg-5 {
margin-top: 5px;
}
@media (max-width:649px){
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #dcdcdc;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffffff;
background-color: #2a3858;
}
.navbar-toggle {
color: #FFFFFF;
}
}
#mid_title {
font-size: 24px;
line-height: 24px;
font-weight: 400;
color: #fff;
margin-bottom: 10px; /* text-shadow: 2px 2px 4px #000 */;
}
#middle_wrapper {
clear: both;
padding: 40px 15px 0;
overflow: hidden;
font-size: 14px;
color: #f4e9d9;
background: url(/images/templatemo_middle.jpg) center top;
}
.col_allw300 {
float: left;
}
.templatemo_text {
color: #08122a;
font-weight: normal;
text-decoration: none;
}
.lower_specs {
background-color: #BFC5CE;
}
.sb_news_box {
clear: both;
margin-bottom: 17px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Electro-Tech Inc</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/etp.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<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="#defaultNavbar1"><span class="sr-only">Toggle navigation</span>Menu <span class="glyphicon glyphicon-chevron-down"></span></button>
<a class="navbar-brand" href="about.html">Electrotech</a></div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav justify-content-center">
<li><a href="about.html">About Us</a></li>
<li><a href="industries.html">Industries</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="news.html">News</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.2.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</html>css I just added
