'Bootstrap CSS for wide and boxed layouts

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>

enter image description here

enter image description here

htmlcsstwitter-bootstrap


Solution 1:[1]

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"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></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>

Solution 2:[2]

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:

  1. First of all, I created the page as you wanted in the Bootstrap wide example. This became the main-wrapper-wide version.
  2. After that, I changed the class to main-wrapper-boxed and customized it for the Bootstrap boxed example by giving it max-width=850px.
  3. Done!

Here's a Fiddle just in case...

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 AngularJR
Solution 2 Barnee

Related Questions