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.
Related
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
.navbar-custom {
background-color:rgb(128 128 128 / 18%);
height:48px;
width:100%
}
.close{
margin-bottom: 40px;
}
h5{
margin-top: 30px;
margin-left: 30px;
margin-bottom: 10%;
}
.container-fluid {
max-width: 100%;
padding-right:0;
padding-left:0;
margin-right:0;
margin-left:0
}
html, body {
margin: 0;
padding: 0;
position: relative;
width: 100%;
right:0;
padding-right: 0px!important;
margin-right: 0px!important;
width: 100vw;
overflow-x: hidden;
}
.row row-cols-1{
width: 100%;
right: 0;
}
.img-fluid{
max-width: 100%;
height : auto;
}
.btn btn-primary{
width: 100%;
text-align: center;
display: block;
width: 48%;
box-sizing: border-box;
text-align: center;
margin-right: 10px;
position: absolute;
margin-left: 5px;
margin-right: 5px;
}
</style>
</head>
<body>
<nav class="navbar navbar-custom ">
<a class="navbar-brand" href="#">
<img src="logo.png" class="logo1" alt="logo" style="width:50px;">
</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<button type="button" class="close " aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</li>
</ul>
</nav>
<div class="container-fluid ">
<h5><b>Do you have Fever above 101.4?</b></h5>
</div>
<div class="container-fluid ">
<img src="fever.png" class="img-responsive center-block d-block mx-auto mt-5" alt="logo" style="width:200px;">
</div>
</div>
<div class="container mt-5">
<div class="row row-cols-1 mx-2 ">
<button type="button" class="btn btn-primary mt-5 ">Yes,I do</button>
<button type="button" class="btn btn-primary mt-1">No, I don't</button>
</div>
</div>
</body>
</html>
I am experiencing a gap (space) below buttons when i'm resizing the window in vertical manner, the gap increases as i vertically upsize the window, it takes a space, i have tried different techniques including margin bottom, but didn't accomplish what i want to be, kindly suggest a solution which includes bootstrap 4. Thanks
moreover i want to center align the image on ipad such that is aligned on iphone screens
here the gap is increased
here the gap is decreased
i want to fill the gap below screen so that the image comes at center
just like it comes at center on iphone screens
Add fixed-bottom to your last div
like this:
<div class=" fixed-bottom row row-cols-1 mx-2 ">
<button type="button" class="btn btn-primary mt-5 ">Yes,I do</button>
<button type="button" class="btn btn-primary mt-1">No, I don't</button>
</div>
I have a quite weird problem (and a few of my fellows) that we are unable to put "card" bootstrap class to screen center, we tried a lot of solutions which were available on the internet, but neither of those worked out.
Here's the div that doesn't want to move:
<div class="container h-100">
<div class="flex-center-wrap">
<div class="card">
<div class="card-body text-center">
<h5 class="card-title mb-2">hihihihihih</h5>
<div class="card-subtitle mb-3">hihihihihihihihi</div>
<form id="generateSignatureForm" method="post" action="/?/api/generateSignature">
<input id="generateSignatureUsername" class="form-control form-control-sm mb-3" type="text" placeholder="Username" name="username" required="">
<input name="csrf" type="hidden" value="46d2ce8a-2271-471f-a46f-c58234324e99">
</form>
</div>
</div>
</div>
</div>
and here is a quick showup of how it looks like (that div is overlapping a navbar and doesn't want to go to center), vizualization is Here
You are trying to use align-items, which is a flex item property, on a div that's not a flex item.
Also, you are trying to align on the screen, but your html and body don't have height: 100% set.
To demonstrate, you can add style="height: 100vh; display: flex;" to the parent div. As you can see below, the card is getting correctly centered.
#import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');
/*---Media Queries --*/
#media (max-width: 992px) {
}
#media (max-width: 768px) {
}
#media (max-width: 576px) {
}
a {
color: #d7eaf4;
}
body {
color: #fff;
background: #2834d8 url(img/hotel.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
font-family: poppins,Helvetica,Arial,sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
}
/*---Firefox Bug Fix --*/
.carousel-item {
transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
/*--- Fixed Background Image --*/
figure {
position: relative;
width: 100%;
height: 60%;
margin: 0!important;
}
.footer {
font-size: 14px;
padding-left: 1rem!important;
}
.fixed-wrap {
clip: rect(0, auto, auto, 0);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.fixed-bottom {
position: fixed;
right: 0;
bottom: 0;
left: 0;
}
.h-100 {
height: 100%!important;
}
.navbar {
background: rgba(18,13,33,.8);
color: #d7eaf4;
box-shadow: 0 5px 15px #000000c0;
margin-top: 0;
margin-bottom: 0;
}
#fixed {
background-image: url('img/mac.png');
position: fixed;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: transform;
}
/*--- Bootstrap Padding Fix --*/
[class*="col-"] {
padding: 1rem;
}
.card {
margin: 0 auto; /* Added */
float: none; /* Added */
margin-bottom: 10px; /* Added */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#0e1a33" />
<title>Hotel Morenka Cipa</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.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>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link href="theme.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg fixed-top">
<a class="navbar-brand" href=""><img></a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ranking</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Support</a>
</li>
</ul>
</div>
</nav>
<footer class="footer fixed-bottom">
Copyright © 2020 Kuba Wroński & Mateusz Gołębiowski
</footer>
<div class=" d-dlex justify-content-center align-items-center a div" style="height: 100vh; display: flex;">
<div class="d-dlex justify-content-center align-items-center a div">
<div class="card">
<div class="card-body text-center">
<h5 class="card-title mb-2">hihihihihih</h5>
<div class="card-subtitle mb-3">hihihihihihihihi</div>
<form id="generateSignatureForm" method="post" action="/?/api/generateSignature">
<input id="generateSignatureUsername" class="form-control form-control-sm mb-3" type="text" placeholder="Username" name="username" required="">
<input name="csrf" type="hidden" value="46d2ce8a-2271-471f-a46f-c58234324e99">
</form>
</div>
</div>
</div>
</div>
</body>
</html>
add css class
.centered {
display: flex;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#0e1a33" />
<title>Hotel Morenka Cipa</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.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>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link href="theme.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg fixed-top">
<a class="navbar-brand" href=""><img></a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ranking</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Support</a>
</li>
</ul>
</div>
</nav>
<footer class="footer fixed-bottom">
Copyright © 2020 Kuba Wroński & Mateusz Gołębiowski
</footer>
///////////////////// add class here
<div class="centered">
<div class=" d-dlex justify-cointent-center align-items-center a div">
<div class="d-dlex justify-cointent-center align-items-center a div">
<div class="card">
<div class="card-body text-center">
<h5 class="card-title mb-2">hihihihihih</h5>
<div class="card-subtitle mb-3">hihihihihihihihi</div>
<form id="generateSignatureForm" method="post" action="/?/api/generateSignature">
<input id="generateSignatureUsername" class="form-control form-control-sm mb-3" type="text" placeholder="Username" name="username" required="">
<input name="csrf" type="hidden" value="46d2ce8a-2271-471f-a46f-c58234324e99">
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
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
I am creating a landing page in bootstrap so i have added the fixed navbar in which i had login form in right side the login form is adding more height to the navbar actually i used position to move to top but the height of the navbar is not reducing (i also tried margin-top and padding-top)and also i want to change the color of navbar (i tried to change the color of navbar by using background-color and !important property )how do i solve this problem
here is my code
<html>
<head>
<title>MyLandingPage</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<link rel="stylesheet" href="http://s.mlcdn.co/animate.css">
<style>
*{
margin: 0;
padding: 0;
position: relative;
}
.navbar-brand.navbar-header{
font-size:30px;
color:black;
}
.navbar{
background-color: #5b4282;
}
#bodycontainer{
background-image:url(wood.jpg);
width:100%;
background-size:cover;
}
form{
position:relative;
top:-50px;
}
#myheader h1{
font-size: 60px;
color:white;
font-weight:bold;
text-align:center;
margin-top:250px;
font-family: 'Pacifico', cursive;
}
#txt1{
text-align:center;
color:black;
font-weight:bold;
}
#txt2{
text-align:center;
color:black;
font-weight:bold;
}
#txt3{
text-align:center;
color:black;
font-weight:bold;
}
#txt4{
text-align:center;
color:black;
font-weight:bold;
}
.mybutton{
margin-left:250px;
}
</style>
</head>
<body>
<div class="container">
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-brand navbar-header">
My#PP
</div>
<div class="collapse navbar-collapse" id="navbar-example">
<ul class="nav nav-pills">
<li class="active">Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
<form class="navbar-form navbar-right" id="myform">
<input type="email" placeholder="username#abc.com" class="form-control"/>
<input type="password" placeholder="*********" class="form-control"/>
<button type="button" class="btn btn-info">Log-In</button>
</form>
</div>
<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>
<div class="container" id="bodycontainer">
<div class="row">
<div class="col-md-6 col-md-offset-3" id="myheader">
<h1 class="animated ZoomIn infinite ">MY APPLICATION</h1>
<p class="lead" id="txt1">This Why You Should Download The App</p>
<p id="txt2">For more Information about the app please scroll down the more to access the information you can get the idea about it</p>
<p id="txt3">If u are intrested please join our maling list</p>
<br/> <br/> <br/>
<form class="">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">#</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
</form>
<button type="button" class="btn btn-info btn-lg mybutton">Submit</button>
</div>
</div>
</div>
<div class="container">
<div class="row">
<h1 id="txt4">Why this app is Osome...?</h1>
</div>
</div>
<script>
$("#bodycontainer").css("height",$(window).height());
</script>
</body>
</html>
The solution is to override the default css values coming from the bootstrap by your css values.
Here class navbar is controlling the minimum height and color background color of the navigation bar , So changing their css properties can solve your problem.
I have done this one :
.navbar{ background: red; max-height: 50px; }
Place the above css in your page , and it will work as you want .you can change the values as your demand.
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...