Bootstrap Layout

It divided into three parts:

  • Fixed Layout

  • Fluid layout

  • Responsive Layout

Bootstrap Layout define by bootstrap predefined columns (12 columns) and it manage by as per your requirements like if you need to divided our web pages into three part in ratio 1:2:3. Mean 2, 4, 6. Write it as col-md-2, col-md-4, col-md-6  within container class.

Here we understand Bootstrap Layout with the help of Examples:

Fixed Layout:

The process of creating the fixed yet responsive layout basically starts with the .container class. 

After that you can 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.

Grid within container:

Grid classes like .col-*, .col-sm-*, .col-md-*, .col-lg-* and .col-xl* where * represent grid number and should be from 1 to 12. 

                                      

Ex.

<div class=”container”>

<div class=”row”>

<div class="col-md-4">

            <h2>Bootstrap</h2>

            <p>Bootstrap is powerful framework to design webpage </p>

            <p><a href="https://www.codersarts.com/contact/" target="_blank" class="btn btn-success">Learn More »</a></p>

        </div>

</div>

</div>

Creating Fluid Layout:

In Bootstrap you can use the class .container-fluid to create fluid layouts to utilize the 100% width of the viewport across all device sizes (extra small, small, medium, large, and extra large).

Ex.

<div class="container-fluid">

    <div class="jumbotron">

        <h1>Learn to Create Websites</h1>

        <p class="lead">CodersArts is <a href="https://www.codersarts.com" target="_blank">codersarts.com</a> provides better platform to learn programming </p>

        <p><a href="https://www.codersarts.com" target="_blank" class="btn btn-success btn-lg">learn now</a></p>

    </div>

    <div class="row">

        <div class="col-md-4">

            <h2>HTML</h2>

            <p>Hi, learn HTML </p>

            <p><a href="https://www.codebasti.com/" target="_blank" class="btn btn-success">Learn More »</a></p>

        </div>

</div>

</div>

Responsive Layout:

Bootstrap 4 is responsive and mobile friendly from the start. Its five tier grid classes provides better control over the layout as well as how it will be rendered on different types of devices like mobile phones, tablets, laptops and desktops, large screen devices, and so on.

It define by div classes as per given below:

<div class="col-md-6 col-lg-4 col-xl-3">

<div class="col-md-6 col-lg-4 col-xl-3">

<div class="col-md-6 col-lg-4 col-xl-3">

<div class="col-md-6 col-lg-4 col-xl-3">

<div class="col-md-6 col-lg-4 col-xl-3">

<div class="col-md-6 col-lg-4 col-xl-3">

<div class="col-md-6 col-lg-4 col-xl-3">

<div class="col-md-6 col-lg-4 col-xl-3">

Ex.

<div class="container">

    <div class="jumbotron">

        <h1>How to use Bootstrap</h1>

        <p class="lead"> CodersArts <a href="https://www.codersarts.com" target="_blank">codersarts.com</a> is a platform to provide programing related help</p>

        <p><a href="https://www.codersarts.com" target="_blank" class="btn btn-success btn-lg">learn now</a></p>

    </div>

    <div class="row">

        <div class="col-md-6 col-lg-4 col-xl-3">

            <h2>HTML</h2>

            <p>HTML is a mark-up language.</p>

            <p><a href="https://www.codersarts.com/" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>

        </div>

</div>

Powered  by Codersarts