Quick Contact

    Let’s Start Bootstrap Tutorial

    Introduction to Responsive Design

    Responsive design is an approach where the content and layout of web and mobile applications changes according to the user’s behavior and environment.

    In essence, the design responds to how the user interacts with it. That means regardless of the size of the screen, the type of device used or platform to read the content, the experience will render well across all media.

    If you open the same website on a desktop computer and a mobile device, the user should have the same viewing experience.

    Previously, before the dawn of responsive design, if you resized your internet browser you would be unable to view the content properly whereas with responsive design, the content will adapt according to the size and dimension of the browser.

    Why do we need responsive design?

    Since users will generally access content in a variety of different ways on a multitude of different devices, the need for responsive design is greater than ever.

    Before the widespread adoption of responsive design, a UI designer might create a mockup of a website and it would be put into production and put out into the world for everyone to use.

    There were standard dimensions, like 800 x 600 or 1024 x 786, which designers would adhere to. If you used a larger screen to view the content or a small screen, the design would stay at the same size. Designers would slowly increase the width of their designs as screen sizes became larger.

    Introduction to Bootstrap

    Bootstrap is a powerful front-end framework for faster and easier web development. It includes HTML and CSS based design templates for common user interface components like Typography, Forms, Buttons, Tables, Navigations, Dropdowns, Alerts, Modals, Tabs, Accordion, Carousel and many other as well as optional JavaScript extensions.

    Bootstrap also gives you ability to create responsive layout with much less efforts.

    Why Use Bootstrap?

    Mobile first approach: Bootstrap 3, framework consists of Mobile first styles throughout the entire library instead them of in separate files.

    Browser Support: It is supported by all popular browsers.

    Browser Icons

    Easy to get started: With just the knowledge of HTML and CSS anyone can get started with Bootstrap. Also the Bootstrap official site has a good documentation.

    Responsive design: Bootstrap’s responsive CSS adjusts to Desktops, Tablets and Mobiles.

    • Provides a clean and uniform solution for building an interface for developers.
    • It contains beautiful and functional built-in components which are easy to customize.
    • It also provides web based customization.
    • And best of all it is an open source.
    Bootstrap Responsive
    Bootstrap Grid System
    What is a Grid?

    In graphic design, a grid is a structure (usually two-dimensional) made up of a series of intersecting straight (vertical, horizontal) lines used to structure the content. It is widely used to design layout and content structure in print design. In web design, it is a very effective method to create a consistent layout rapidly and effectively using HTML and CSS.

    What is the Bootstrap Grid System?

    Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

    Working of Bootstrap Grid System

    Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here’s how the Bootstrap grid system works:

    • Rows must be placed within a .container class for proper alignment and padding.
    • Use rows to create horizontal groups of columns.
    • Content should be placed within the columns, and only columns may be the immediate children of rows.
    • Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. LESS mixins can also be used for more semantic layouts.
    • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and the last column via negative margin on .rows.
    • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
    Grid options

    The following table summarizes aspects of how Bootstrap grid system works across multiple devices:

      Extra small
    <576px
    Small
    ≥576px
    Medium
    ≥768px
    Large
    ≥992px
    Extra large
    ≥1200px
    Max container width None (auto) 540px 720px 960px 1140px
    Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
    # of columns 12
    Gutter width 30px (15px on each side of a column)
    Nestable Yes
    Column ordering Yes
    Basic Grid Structure

    Following is basic structure of Bootstrap grid:

    <div class = "container">
       
       <div class = "row">
          <div class = "col-*-*"></div>
          <div class = "col-*-*"></div>
       </div>
       
       <div class = "row">...</div>
        
    </div>
    
    <div class = "container">
       ....
    </div>
    
    Grid Classes

    The Bootstrap grid system has four classes:

    xs (for phones – screens less than 768px wide). Given below is an example for xs class.

    <div class="container">
      <div class="row">
    
        <div class="col-xs-6">
          <p>Column 1</p>
        </div>
    
        <div class="col-xs-6">
          <p>Column 2</p>
        </div>
    
      </div>
    </div>
    

    Note: Make sure that the column sum always adds up to 12.

    sm (for tablets – screens equal to or greater than 768px wide). Given below is an example for sm class.

    <div class="container-fluid">
      <h1>Hello World!</h1>
      <div class="row">
        <div class="col-sm-3" style="background-color:yellow;">
          <p>Lorem ipsum...</p>
        </div>
        <div class="col-sm-9" style="background-color:pink;">
          <p>Sed ut perspiciatis...</p>
        </div>
      </div>
    </div>
    

    Note: Make sure that the column sum always adds up to 12.

    md (for small laptops – screens equal to or greater than 992px wide). Given below is an example for md class.

    <div class="row">
      <div class="col-md-6" style="background-color:yellow;">
        <p>Lorem ipsum...</p>
      </div>
      <div class="col-md-6" style="background-color:pink;">
        <p>Sed ut perspiciatis...</p>
      </div>
    </div>
    

    Note: Make sure that the column sum always adds up to 12.

    lg (for laptops and desktops – screens equal to or greater than 1200px wide). Given below is an example for lg class.

    <div class="container-fluid">
      <h1>Hello World!</h1>
      <div class="row">
        <div class="col-lg-6" style="background-color:yellow;">
          <p>Lorem ipsum...</p>
        </div>
        <div class="col-lg-6" style="background-color:pink;">
          <p>Sed ut perspiciatis...</p>
        </div>
      </div>
    </div>
    

    Note: Make sure that the column sum always adds up to 12.

    Equal Columns, Unequal Columns
    Equal columns

    This refers where columns have equal width, starting at desktops and scaling to large desktops.

    Example

    Three Equal Columns

    .col-sm-4 .col-sm-4 .col-sm-4

    The following example shows how to get a three equal-width columns starting at tablets and scaling to large desktops. On mobile phones, the columns will automatically stack:

    <div class="row">
      <div class="col-sm-4">.col-sm-4</div>
      <div class="col-sm-4">.col-sm-4</div>
      <div class="col-sm-4">.col-sm-4</div>
    </div>
    
    Two equal Columns
    .col-sm-6 .col-sm-6

    The following example shows how to get a two equal-width columns starting at tablets and scaling to large desktops. On mobile phones, the columns will automatically stack:

    <div class="row">
      <div class="col-sm-6">.col-sm-6</div>
      <div class="col-sm-6">.col-sm-6</div>
    </div>
    
    Unequal Columns

    This refers where columns have unequal width, starting at desktops and scaling to large desktops.

    Example

    Three unequal Columns

    .col-sm-3 .col-sm-6 .col-sm-3

    The following example shows how to get a three various-width columns starting at tablets and scaling to large desktops:

    <div class="row">
      <div class="col-sm-3">.col-sm-3</div>
      <div class="col-sm-6">.col-sm-6</div>
      <div class="col-sm-3">.col-sm-3</div>
    </div>
    
    Two unequal Columns
    .col-sm-4 .col-sm-8

    The following example shows how to get two various-width columns starting at tablets and scaling to large desktops:

    <div class="row">
      <div class="col-sm-4">.col-sm-4</div>
      <div class="col-sm-8">.col-sm-8</div>
    </div>
    
    Layout Creation

    There are two types of layout creation in Bootstrap.

    • Fluid layout (.container-fluid)
    • Fixed layout (.container)
    Creating Fluid Layout with Bootstrap

    In Bootstrap (version 3.2+), you can use the class .container-fluid to create the fluid layouts in order to utilize the 100% width of the viewport.

    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.

    The following code creates a fluid layout that covers 100% width of the screen.

    <!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>Bootstrap 3 Fluid Layout Example</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
                        <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="#">Tutorial Republic</a>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="navbarCollapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="https://www.tutorialrepublic.com" target="_blank">Home</a></li>
                        <li><a href="https://www.tutorialrepublic.com/about-us.php" target="_blank">About</a></li>
                        <li><a href="https://www.tutorialrepublic.com/contact-us.php" target="_blank">Contact</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="jumbotron">
            <div class="container-fluid">
                <h1>Learn to Create Websites</h1>
                <p>In today's world internet is the most popular way of connecting with the people. At <a href="https://www.tutorialrepublic.com" target="_blank">tutorialrepublic.com</a> you will learn the essential of web development technologies along with real life practice example, so that you can create your own website to connect with the people around the world.</p>
                <p><a href="https://www.tutorialrepublic.com" target="_blank" class="btn btn-success btn-lg">Get started today</a></p>
            </div>
        </div>
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-4">
                    <h2>HTML</h2>
                    <p>HTML is a markup language that is used for creating web pages. The HTML tutorial section will help you understand the basics of HTML, so that you can create your own web pages or website.</p>
                    <p><a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
                </div>
                <div class="col-xs-4">
                    <h2>CSS</h2>
                    <p>CSS is used for describing the presentation of web pages. The CSS tutorial section will help you learn the essentials of CSS, so that you can fine control the style and layout of your HTML document.</p>
                    <p><a href="https://www.tutorialrepublic.com/css-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
                </div>
                <div class="col-xs-4">
                    <h2>Bootstrap</h2>
                    <p>Bootstrap is a powerful front-end framework for faster and easier web development. The Bootstrap tutorial section will help you learn the techniques of Bootstrap so that you can quickly create your own website.</p>
                    <p><a href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-xs-12">
                    <footer>
                        <p>© Copyright 2013 Tutorial Republic</p>
                    </footer>
                </div>
            </div>
        </div>
    </body>
    </html>    
    
    Creating Fixed Layout with Bootstrap

    With Bootstrap 3 you can still create layouts of web pages based on fixed number of pixels, however this time it is responsive from the start as opposed to previous 2.x version where you need to include the responsive style sheet to make it responsive for other devices.

    The process of creating the fixed yet responsive layout starts with the .container class. After that create rows with the .row class to wrap the horizontal groups of columns. Rows must be placed within a .container for proper alignment and padding.

    Further columns can be created inside the rows using the predefined grid classes like .col-xs-*, .col-sm-*, .col-md-* and .col-lg-* where * represent grid number and should be from 1 to 12.

    The following code creates a fixed 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.

    <!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>Bootstrap 3 Fixed Layout Example</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
                        <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="#">Tutorial Republic</a>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="navbarCollapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="https://www.tutorialrepublic.com" target="_blank">Home</a></li>
                        <li><a href="https://www.tutorialrepublic.com/about-us.php" target="_blank">About</a></li>
                        <li><a href="https://www.tutorialrepublic.com/contact-us.php" target="_blank">Contact</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="container">
            <div class="jumbotron">
                <h1>Learn to Create Websites</h1>
                <p>In today's world internet is the most popular way of connecting with the people. At <a href="https://www.tutorialrepublic.com" target="_blank">tutorialrepublic.com</a> you will learn the essential of web development technologies along with real life practice example, so that you can create your own website to connect with the people around the world.</p>
                <p><a href="https://www.tutorialrepublic.com" target="_blank" class="btn btn-success btn-lg">Get started today</a></p>
            </div>
            <div class="row">
                <div class="col-xs-4">
                    <h2>HTML</h2>
                    <p>HTML is a markup language that is used for creating web pages. The HTML tutorial section will help you understand the basics of HTML, so that you can create your own web pages or website.</p>
                    <p><a href="https://www.demoexample.com/html-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
                </div>
                <div class="col-xs-4">
                    <h2>CSS</h2>
                    <p>CSS is used for describing the presentation of web pages. The CSS tutorial section will help you learn the essentials of CSS, so that you can fine control the style and layout of your HTML document.</p>
                    <p><a href="https://www.demoexample.com/css-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
                </div>
                <div class="col-xs-4">
                    <h2>Bootstrap</h2>
                    <p>Bootstrap is a powerful front-end framework for faster and easier web development. The Bootstrap tutorial section will help you learn the techniques of Bootstrap so that you can quickly create your own website.</p>
                    <p><a href="https://www.demoexample.com/twitter-bootstrap-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-xs-12">
                    <footer>
                        <p>© Copyright 2013 Tutorial Republic</p>
                    </footer>
                </div>
            </div>
        </div>
    </body>
    </html>
    
    Summary
    • Responsive design is an approach where the content and layout of web and mobile applications changes according to the user’s behavior and environment.
    • Bootstrap is a powerful front-end framework for faster and easier web development.
    • Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
    • Bootstrap grid class are of following four types
      • xs (for phones – screens less than 768px wide)
      • sm (for tablets – screens equal to or greater than 768px wide)
      • md (for small laptops – screens equal to or greater than 992px wide)
      • lg (for laptops and desktops – screens equal to or greater than 1200px wide).
    • Always make sure that the column sum adds up to 12.
    • Equal columns refers where columns have equal width, starting at desktops and scaling to large desktops.
    • Unequal Columns refers where columns have unequal width, starting at desktops and scaling to large desktops.
    • Layouts can be classified into following two types:
      • Fluid layout (.container-fluid)
      • Fixed layout (.container)

    Copyright 1999- Ducat Creative, All rights reserved.