Bootstrap Tutorial : How to Creating Fixed & Fluid Layout in Bootstrap

Bootstrap tutorial for beginners : working with bootstrap layout, How to Creating Fixed & Fluid Layout in Bootstrap 3 for beginner

Bootstrap Tutorial for beginners : Fixed and Fluid responsive layout in bootstrap templates starts with the .container class. Next we need to create rows using the .row class to wrap the horizontal groups of columns. You must remember, the Rows class must be placed within a .container for proper alignment and padding layout.

At the previews lessons, we have learn about starting using bootstrap, please read :
  1. Installing Bootstrap
  2. Grid System in Bootstrap

Creating Fixed Layout in Bootstrap templates

In your index file, add this bootstrap source code

<!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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Fixed Bootstrap Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
      /* Some custom styles to beautify this example */
      .demo-content{
          padding: 15px;
          font-size: 18px;
          min-height: 300px;
          background: #dbdfe5;
          margin-bottom: 10px;
      }
      .demo-content.bg-alt{
          background: #abb1b8;
      }
      /* Some custom media query to make
         this example even better */
      @media screen and (max-width: 991px){
          .flexible{
              min-height: 150px;
          }
      }
    </style>
    <!-- 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.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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 fa fa-search" href="#"> Hc-Kr.Com</a>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="navbar">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">Link1</a></li>

            </ul>
            <form class="navbar-form navbar-left" role="search">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
              </div>
              <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">Link 2</a></li>
              <li><a href="#">Link 3</a></li>
            </ul>
          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
      </nav>
      <!-- Bootstrap Layouts with Column Wrapping Feature -->
      <div class="row">
        <div class="col-sm-3 col-md-2">
          <div class="demo-content">.col-sm-3 .col-md-2</div>
        </div>
        <div class="col-sm-9 col-md-8">
          <div class="demo-content">.col-sm-9 .col-md-8</div>
        </div>
        <div class="col-sm-12 col-md-2">
          <div class="demo-content">.col-sm-12 .col-md-2</div>
        </div>
      </div>
      <!-- Footer -->
      <div class="row">
        <div class="col-sm-6 col-md-12">
          <div class="demo-content">.col-sm-6 .col-md-12</div>
        </div>
      </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Instructions :

Bootstrap source code will creates a fixed layout width responsive layout that is 750px pixels wide on small devices like tablet having screen width ≥768px, whereas 970px wide on medium devices like desktop and laptop having screen width ≥992px and 1170px wide on large devices like large desktops having screen width ≥1200px. However the layout width will be automatically calculated for devices that has screen width <768px like cell phones.


Creating Fluid Layout in Bootstrap Template

Different layout with Fixed and Fluid layout at the .container class, if you need an Fixed Layout you just need to include .container class, if Fluid layout, use .container-fluid class,

<!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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Fixed Bootstrap Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
      /* Some custom styles to beautify this example */
      .demo-content{
          padding: 15px;
          font-size: 18px;
          min-height: 300px;
          background: #dbdfe5;
          margin-bottom: 10px;
      }
      .demo-content.bg-alt{
          background: #abb1b8;
      }
      /* Some custom media query to make
         this example even better */
      @media screen and (max-width: 991px){
          .flexible{
              min-height: 150px;
          }
      }
    </style>
    <!-- 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.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container-fluid">
      <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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 fa fa-search" href="#"> Hc-Kr.Com</a>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="navbar">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">Link1</a></li>

            </ul>
            <form class="navbar-form navbar-left" role="search">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
              </div>
              <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">Link 2</a></li>
              <li><a href="#">Link 3</a></li>
            </ul>
          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
      </nav>
      <!-- Bootstrap Layouts with Column Wrapping Feature -->
      <div class="row">
        <div class="col-sm-3 col-md-2">
          <div class="demo-content">.col-sm-3 .col-md-2</div>
        </div>
        <div class="col-sm-9 col-md-8">
          <div class="demo-content">.col-sm-9 .col-md-8</div>
        </div>
        <div class="col-sm-12 col-md-2">
          <div class="demo-content">.col-sm-12 .col-md-2</div>
        </div>
      </div>
      <!-- Footer -->
      <div class="row">
        <div class="col-sm-6 col-md-12">
          <div class="demo-content">.col-sm-6 .col-md-12</div>
        </div>
      </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Intructions :

the Source code above that is the class .container-fluid simply applies the horizontal margin with the value auto and left and right padding of 15px on element to offset the left and right margin of -15px (i.e. margin: 0 -15px;) used on the .row class.

Video Tutorial Creating Fixed & Fluid Layout in Bootstrap


See you next lessons....

COMMENTS

Next Recomended


Feel free to code it up and send us a pull request.

Hi everyone, let's me know how much this lesson can help your work. Please Subscribe and Follow Our Social Media 'kodeajaib[dot]com' to get Latest tutorials and will be send to your email everyday for free!, Just hit a comment if you have confused. Nice to meet you and Happy coding :) all ^^



Follow by E-Mail


Name

ADO.NET,3,Ajax,6,Android,9,AngularJS,4,ASP.NET,4,Blogger Tutorials,7,Bootstrap,7,C++,1,Codeigniter,2,Cplusplus,6,Crystal Report,6,CSharp,25,Ebook Java,2,FlyExam,1,FSharp,3,Game Development,2,Java,35,JDBC,2,Laravel,84,Lumen,2,MariaDB,2,Ms Access,3,MySQL,31,ODBC,6,OleDB,1,PHP,14,PHP Framework,5,PHP MYSQLI,9,PHP OOP,5,Python,8,Python 3,4,SQL Server,4,SQLite,4,Uncategorized,5,Vb 6,2,Vb.Net,89,Video,48,Vue Js,4,WPF,2,Yii,3,
ltr
item
KODE AJAIB: Bootstrap Tutorial : How to Creating Fixed & Fluid Layout in Bootstrap
Bootstrap Tutorial : How to Creating Fixed & Fluid Layout in Bootstrap
Bootstrap tutorial for beginners : working with bootstrap layout, How to Creating Fixed & Fluid Layout in Bootstrap 3 for beginner
https://3.bp.blogspot.com/-MFqpqyuh1pc/V-9nt0O9pxI/AAAAAAAACm0/TAYempN3jgM1WoXbAVKxQTgh72cCJX6rgCLcB/s320/bootstrap-3-tutorial-for-beginner.png
https://3.bp.blogspot.com/-MFqpqyuh1pc/V-9nt0O9pxI/AAAAAAAACm0/TAYempN3jgM1WoXbAVKxQTgh72cCJX6rgCLcB/s72-c/bootstrap-3-tutorial-for-beginner.png
KODE AJAIB
https://www.kodeajaib.com/2016/10/bootstrap-creating-fluid-and-fixed-layout.html
https://www.kodeajaib.com/
https://www.kodeajaib.com/
https://www.kodeajaib.com/2016/10/bootstrap-creating-fluid-and-fixed-layout.html
true
3214704946184383982
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy