I'm making a web with bootstrap and I need to create an specific header but I have problems.
The image below is what I have to do:
and the image below here is what I have made:
The code I'm using is:
#wrapper {
background-color: #F2F2F2;
height: 100%;
}
.navbar {
background-color: #000000;
color: #FFFFFF;
}
#profile {
border-radius: 100%;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="wrapper">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="nav navbar-left top-nav">
<img id="profile" width="50px" src="assets/images/nobody.jpg">
<p>Nombre y apellido usuario</p>
</div>
<div class="navbar-header">
<img src="assets/images/logo.jpe">
</div>
<ul class="nav navbar-right top-nav">
<li>Logout<i class="mdi mdi-logout"></i></li>
</ul>
</nav>
</div>
Here is an option using basic Bootstrap concepts. Hope it helps.
<!--Container-->
<div class="container-fluid">
<!--Row-->
<div class="row">
<!--Col-MD-12-->
<div class="col-md-12">
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
<!--Left Nav Div-->
<div class="col-sm-4">
<ul class="nav navbar-nav">
<li>
<span><img class="img-circle" src="http://placehold.it/50x50"></span>
</li>
<li>
<p style="color: white; margin-top: 20%;">Nombre y apellido usuario</p>
</li>
</ul>
</div>
<!--Mid Nav Div-->
<div class="col-sm-4 text-center"><h3 style="color: white; margin-top: 5%;">LOGO</h3></div>
<!--Right Nav Div-->
<div class="col-sm-4">
<ul class="nav navbar-nav navbar-right" style="margin-top: 2%; ">
<li>Logout <span class="glyphicon glyphicon-off"></span></li>
</ul>
</div>
</nav>
</div> <!-- End Col-MD-12-->
</div> <!--End Row-->
</div> <!--End Container-->'
This can be done it many ways.. I have just added some inline css in your html for normal view(desktop view).Yet you can try better option to make it work responsively.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
#wrapper {
background-color: #F2F2F2;
height: 100%;
}
.navbar {
background-color: #000000;
color: #FFFFFF;
}
#profile {
border-radius: 50%;
}
</style>
</head>
<body>
<div id="wrapper">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="nav navbar-left top-nav" style="margin:10px;">
<img id="profile" width="50px" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
<p style="display:inline;">Nombre y apellido usuario</p>
</div>
<div class="navbar-header" style="margin:0.2% 25%;">
<img width="100" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
</div>
<ul class="nav navbar-right top-nav" style="margin:0.8% 1%;">
<li>Logout<i class="mdi mdi-logout"></i></li>
</ul>
</nav>
</div>
At the end I find the solution. I have been searching and I found a solution to center the elements vertically:
https://stackoverflow.com/a/35388513/1888372
Here it's says to use display: flex; align-items: center; on parent div, so the result is:
#wrapper {
background-color: #F2F2F2;
height: 100%;
}
.navbar {
background-color: #000000;
color: #FFFFFF;
height: 76px;
display: flex;
align-items: center;
}
.navbar p {
display: inline;
}
.brand {
position: absolute;
left: 50%;
margin-left: -50px !important;
display: block;
}
#profile {
border-radius: 100%;
}
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
<div class="col-sm-4">
<img class="img-circle" src="assets/images/nobody.jpg" width=60>
<p>Nombre y apellido usuario</p>
</div>
<div class="col-sm-4 text-center">
<img src="assets/images/logo.jpe">
</div>
<div class="col-sm-4">
<div class="nav navbar-nav navbar-right">
Logout<i class="mdi mdi-logut"></i>
</div>
</div>
</nav>
</div>
</div>
</div>
Now it is finished (I have to fix some issues but I can do by myself).t
Related
Good day, slight issue here, I cannot seem place all three of my images in the same row together, can anyone help solve the issue? the first is in one row, then the second and third overlap each other. I have already used bootstrap's 12 column grid but the other 2 just kept going down a row. Also, is there a bootstrap code where the image adjusts to the row? thank you for reading.
heres a js fiddle link: https://jsfiddle.net/wxofr2ae/5/
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>Homepage</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">MWC</a>
</div>
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>FAQ</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="box">
<h2>BEAUTY</h2>
<img src="img/link_beauty.jpg" class="bhw_link">
</div>
<div class="col-sm-4">
<div class="box">
<h2>HEALTH</h2>
<img src="img/link_health.jpg" class="bhw_link">
</div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>WELLNESS</h2>
<img src="img/link_wellness.jpg" class="bhw_link">
</div>
</div>
</div>
</div>
</div>
<div class="legend">
<span class="key-container">.container</span>
<span class="key-row">.row</span>
<span class="key-col">.col-*</span>
<span class="key-box">.box (custom)</span>
</div>
</body>
</html>
CSS:
#media only screen and (max-width : 767px) {
.box {
height: auto !important;
}
}
.bhw_link {
width: 300px;
height: 300px;
}
Okay! I just solve your problem by doing just 3 steps:
Step 1: add the closing tag for the <div class="box"> of the BEAUTY block.
<div class="box">
<h2>BEAUTY</h2>
<img src="img/link_beauty.jpg" class="bhw_link">
</div> <!-- you forgot this closing tag -->
Step 2: remove a redundant </div> tag of the <div class="container"> block
Step 3: change the css class, make width: 100%, this step will solve the image overlap:
.bhw_link {
width: 100%;
height: 300px;
}
You missed closing div <div class="box"> and change css of
.bhw_link {
width: 100%;
height: auto;
}
#media only screen and (max-width : 767px) {
.box {
height: auto !important;
}
}
.bhw_link {
width: 100%;
height: auto;
}
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">MWC</a>
</div>
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>FAQ</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="box">
<h2>BEAUTY</h2>
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bhw_link"></div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>HEALTH</h2>
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bhw_link">
</div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>WELLNESS</h2>
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bhw_link">
</div>
</div>
</div>
</div>
</div>
<div class="legend">
<span class="key-container">.container</span>
<span class="key-row">.row</span>
<span class="key-col">.col-*</span>
<span class="key-box">.box (custom)</span>
</div>
It's just because you ommitted the closing tag
<div class="col-sm-4">
<div class="box">
<h2>BEAUTY</h2>
<img src="img/link_beauty.jpg" class="bhw_link">
</div> <!-- you omitted this closing tag-->
</div>
Try class "img-responsive" for your image tag if you want to scale the image to the parent element or just set it to width 100% because the image is already inside the grid system of bootstrap
Hello I am trying to design a web page everything works but container-fluid is adding extra padding on the right.
As you can see in the picture there's a gap right after the navigation bar ends.
This is my index.html :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!--Custom Stylesheets and Scripts -->
<link rel="stylesheet" href="resources/css/app.css">
<link rel="stylesheet" href="resources/css/index.css"> </head>
<body>
<!-- navigation bar -->
<div class="container-fluid navigation-bar-container text-center" >
<div class="navigation-bar">
<div class="row">
<div class="col-md-2">
<div class="navigation-item">
<div class="dropdown">
<button class="dropdown-btn">Home</button>
<div class="dropdown-content">
Login
Register
Van Boening Sets World Record
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="navigation-item">
<div class="dropdown">
<button class="dropdown-btn">Tour Info</button>
<div class="dropdown-content"> How it Works Games Played How to get your room playing Become an event coordinator Mission and Goals </div>
</div>
</div>
</div>
<div class="col-md-4">
<!-- Logo -->
<div class="logo"> <img src="resources/images/Logos/Logo%20Vertical%20Transparent.png" class="img-responsive center-block"> </div>
</div>
<div class="col-md-2">
<div class="navigation-item">
<div class="dropdown">
<button class="dropdown-btn">Events</button>
<div class="dropdown-content"> Schedule Results Locations </div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="navigation-item">
<div class="dropdown">
<button class="dropdown-btn">Contact</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This is my app.css:
body{
font-family: "Open Sans";
}
.navigation-bar{
background-color: black;
height: 65px;
padding-top: 10px;
}
.navigation-bar-container{
padding-left: 0px;
padding-right: 0px;
}
.navigation-item{
padding-top: 10px;
}
.dropdown{
position: relative;
display: inline-block
}
.dropdown-btn {
background-color: transparent;
border: none;
color:#8CFB76;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #1E392A;
min-width: 250px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: #cccccc;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #234331;
color: #e6e6e6;
}
.dropdown:hover .dropdown-content {
display: block;
}
This is my index.css :
body{
background-color: #1a1a1a;
}
Can someone please tell me how I can fix this?
Edit:
After Changing the code like ZenSystem suggested:
In Bootstrap, .row should be the immediate child of
.container-fluid
The padding on .navigation-bar-container is breaking the normal offset container provides for the .row
Change it to this..
<div class="container-fluid text-center">
<div class="navigation-bar row">
<div class="col-md-2">
<div class="navigation-item">
...
http://www.codeply.com/go/NPtXsxCSxX
I am having trouble to align my image to the navbar correctly its slightly to the side. I am trying to set it out so that it fits with the navbar together in the white area.
So when you click on the image the navbar pops up below it.
body {
font-family: 'Arimo', sans-serif;
padding-top: 50px;
}
.menu-bar {
position: absolute;
top: 20px;
left: 50%;
height: 14px;
margin-left: -10px;
}
.logo {
width: 100px;
height: 50px;
}
.menu {
display: none;
width: 100%;
padding: 30px 10px 50px;
margin: 0 auto;
text-align: center;
background-color: #fff;
}
.menu ul {
margin-bottom: 0;
}
.menu a {
color: #333;
text-transform: uppercase;
opacity: 0.8;
}
.menu a:hover {
text-decoration: none;
opacity: 1;
}
/*deviders*/
.home{
height: 100%;
padding-top: 150px;
text-align: center;
background: #423840;
}
.about {
height: 100%;
padding-top: 150px;
text-align: center;
background: #8dd8f8;
}
.service {
height: 100%;
padding-top: 150px;
text-align: center;
background: #9D714F;
}
.info{
height: 100%;
padding-top: 150px;
text-align: center;
background: #eee;
}
.contact {
height: 100%;
padding-top: 150px;
text-align: center;
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script src="js/custom.js"></script>
</head>
<body class="scroll-area" data-spy="scroll" data-offset="0">
<a class="menu-bar" data-toggle="collapse" href="#menu">
<img src="http://i.imgur.com/Bu0B6O8.png" alt="Logo" class = "logo">
</a>
<div class="collapse menu" id="menu">
<ul class="list-inline">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Works</li>
<li>Contact</li>
</ul>
</div>
<section id="home" class="home">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Home</h1>
</div>
</div>
</div>
</section>
<section id="about" class="about">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Profolio</h1>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="service" class="service">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Service</h1>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="info" class="info">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Info</h1>
</div>
</div>
</div>
</section>
<section id="contact" class="contact">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Contact us</h1>
</div>
</div>
</div>
</section>
</body>
You need to make little change in your css, Just replace the below css code. I hope it work for you.
.menu-bar {
top: 20px;
margin: 0 auto;
display: table;}
See it on: voiddevelopment.com
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Test Website</title>
<meta name="viewport" content="width=device-width,, maximum-scale=1, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menuCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><Void></a>
</div>
<div class="collapse navbar-collapse" id="menuCollapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Purchase</li>
<li>Contact Us</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="search" />
</div>
<button type="submit"><span class="glyphicon glyphicon-search"></span></button>
</form>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container-fluid push-spaces">
</div>
</div>
<div class="supporting">
<div class="container-fluid" style="alignment: top;">
<div class="col">
<span class="glyphicon glyphicon-eye-open"></span>
<h3>Professional Design</h3>
<br />
<p>Work with us to create the website design of your dreams.</p>
</div>
<div class="col">
<span class="glyphicon glyphicon-console"></span>
<h3>Great Functionality</h3>
<br />
</div>
<div class="col">
<span class="glyphicon glyphicon-tags"></span>
<h3>Order Now</h3>
<br />
</div>
</div>
</div>
CSS:
.jumbotron{
background: url("jumbotron.jpg") no-repeat center top;
-webkit-background-size: 70%;
-moz-background-size: 70%;
-o-background-size: 70%;
background-size: 70%;
margin-top: 0 auto;
}
.push-spaces {
height: 550px;
}
.supporting {
padding-top: 80px;
padding-bottom: 100px;
}
.supporting .col {
float: left;
width: 33%;
font-family: 'Raleway', sans-serif;
text-align: center;
}
.supporting .glyphicon {
font-size: 4em;
}
.supporting .col h3 {
font-weight: bold;
}
On all mobile platforms, there is a odd whitespace showing up between the jumbotron image and the supporting content. This is odd because I did not add any. Perhaps some CSS tag to pull up the supporting content?
you have a div called .push-spaces that's 550px high , a class of container-fluid, which has a margin of 0 auto it is causing the white space.
This ended up being the solution:
<img src="jumbotron.jpg" class="img-responsive" style="margin-left: 10%; margin-right: 10%; width: 80%;">
Just changed the jumbotron to an image. Realized that I didn't need text over it anyway.
I am using Bootstrap and I need two layouts for wide and boxed. And I want to easly toggle (change) between layouts when needed.
EDIT : How can I do like this : http://htmlstream.com/preview/unify-v1.7/
Beetween boxed and wide layout changing only in body class (boxed-layout container) I don't need switcher. I will put "boxed-layout container" class to body for boxed layout or I will remove boxed-layout container class from body for wide layout. But I can not do it with bootstap and need help for this.
How can I create wide and boxed layouts like following example images? And how can I change layout via class?
For example:
<html>
<head>
<style>
.main-wrapper-wide {
width: 100% !important;
}
.main-wrapper-boxed {
width: 850px !important;
box-shadow: 0 0 5px #ccc;
}
</style>
</head>
<body>
<div class="main-wrapper-wide or main-wrapper-boxed">
<!-- header content here !-->
<!-- slider here !-->
<!-- site content here !-->
<!-- footer content here start !-->
</div>
</body>
</html>
Do you just want the Navbar and the main containers to only be a max of 800px wide and then still be free to resize on all screens sizes.
If so then this is probably all you need.
Just use max-width:800px; and you also need to <center> the divs.
Here is a full size Fiddle.
<!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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
}
.clear {
margin-top:60px;
margin-bottom:60px;
}
.block1 {
height: 440px;
margin-bottom:60px;
}
.block2 {
height: 200px;
}
.bg-clr {
background-color: blueviolet;
}
.bg-clr-blk {
background-color: black;
}
.section-max-width {
max-width:800px;
}
b {
color:black;
}
</style>
</head>
<body class="bg-clr">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container section-max-width">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<center>
<section class="section-max-width">
<div class="clear">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 bg-primary block1">
<br>
The overall <b>Max Width</b> these containers and the navbar can be is <b>800px</b>.
<br>
They are still free the reduce in size when resized to fit smaller screen sizes.
<br>
Resize to see.
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 bg-primary block2"></div>
</div><!-- /.container -->
<div class="container col-lg-12 col-md-12 col-sm-12 col-xs-12 bg-clr-blk clear"><br><br></div>
</section>
</center>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
Take a look at this code snippet and try changing the main-wrapper-wide class to main-wrapper-boxed:
body {
background-color: #E5E5E5;
}
.container {
max-width: 850px;
border: solid 1px #6c757d;
padding: 10px;
margin-bottom: 10px;
}
.main-wrapper-boxed {
max-width: 850px;
margin: 0 auto;
padding: 10px;
background-color: #FF7777;
}
.main-wrapper-boxed .container-fluid {
padding-left: 0;
padding-right: 0;
}
.slider {
padding: 10px;
background-color: #CDCDCD;
}
.footer {
color: #fff;
padding: 10px;
background-color: #1C1C1C;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="main-wrapper-wide"> <!-- change class name to main-wrapper-boxed -->
<div class="container">
<div class="row header mx-0">
<div class="col-3">Logo</div>
<div class="col-8 offset-1">Header menu</div>
</div>
</div>
<div class="container-fluid slider">
<div class="container">Slider</div>
</div>
<div class="container">Site content</div>
<div class="container-fluid footer">
<div class="container">Footer</div>
</div>
</div>
These were the steps I took:
First of all, I created the page as you wanted in the Bootstrap wide example. This became the main-wrapper-wide version.
After that, I changed the class to main-wrapper-boxed and customized it for the Bootstrap boxed example by giving it max-width=850px.
Done!
Here's a Fiddle just in case...