D4mations.com

Bootstrap Grid System

[ad_1]
https://i.ytimg.com/vi/GDwWmrpCa30/hqdefault.jpg



bootstrap 3 grid example
bootstrap 3 grid system
bootstrap 3 columns layout
bootstrap grid system example
bootstrap 3 page layout
bootstrap page layout examples
bootstrap 3 layout examples
bootstrap page layout tutorial
bootstrap grid layout tutorial
bootstrap column layout
how to use bootstrap 3 grid system

In this video we will discuss, How to create page layouts using bootstrap grid system.

One of the very important concept that we need to understand in Bootstrap is it’s Grid System. The Grid system is used for creating page layouts through a series of rows and columns. The Grid System consists of 12 columns. This grid system is so flexible that you can create any page layout that you want.

Let us now see how to create a 3 column layout using the Bootstrap Grid System.

The page should be divided into 3 columns with 1:4:1 ratio. One important thing to keep in mind here is that, if we add the 3 numbers in the ratio (1:4:1), the sum should be equal to 12, because the bootstrap grid system consists of 12 columns. This means if the LEFT SIDE BAR column is 2 units, the MAIN CONTENT AREA column should be 8 units and the RIGHT SIDE BAR column should be 2 units. So when we add these 3 numbers (2 Units + 8 Units + 2 Units), we get 12 units.

Bootstrap includes several grid classes for creating layouts for different devices like mobile phones, tablets, laptops, desktops, etc. The table below shows the available bootstrap grid classes that you can use to create grid column layouts ranging from extra small devices like mobile phones to large devices like large desktop screens.

We will discuss these different classes in detail with examples in a later video. For now let’s use .col-md-* class to create a 3 column layout.

There are 3 simple steps to create the 3 column layout that we want, using the bootstrap 12 column grid system
1. First, create a container. We do this by creating a [div] element using the bootstrap .container class. All the rows will be within this container.
2. Second, create a row within the container. We do this by creating a [div] element using the bootstrap .row class.
3. Finally within the row we create the 3 columns that we need. We do this by creating [div] elements using any of the bootstrap grid classes (.col-xs-*, .col-sm-*, .col-md-* & .col-lg-*). In this example we are using col-xs-* class.

Please note that here I am also using a custom class (.customDiv) to apply some custom styles to each of the div elements.

[div class=”container”]
[div class=”row”]
[div class=”col-md-2″]
[div class=”customDiv”]LEFT SIDE BAR[/div]
[/div]
[div class=”col-md-8″]
[div class=”customDiv”]MAIN CONTENT AREA[/div]
[/div]
[div class=”col-md-2″]
[div class=”customDiv”]RIGHT SIDE BAR[/div]
[/div]
[/div]
[/div]

Here is the definition of the custom css class (.customDiv)

.customDiv{
margin:3px;
min-height:300px;
background-color:silver;
text-align:center;
font-size:large
}

I have created this class in a stylesheet that I named CustomStyles.css. I have placed this in the root folder of the project.

Some important points to keep in mind when working with the bootstrap grid system to create page layouts
1. Rows must be placed within a container for proper alignment and padding.
2. Use rows to create horizontal groups of columns.
3. Content should be placed within columns, and only columns may be immediate children of rows.
4. If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
5. Grid columns are created by specifying the number of twelve available columns you wish to span. For example, to create four equal columns we would use four .col-xs-3.

Link for all dot net and sql server video tutorial playlists
https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1

Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspot.com/2016/05/bootstrap-grid-system.html

Original source

d4mer

,
, , , , , , , , ,

47 responses to “Bootstrap Grid System”

  14. firstly thanks for your tutorials
    Quest: bootstrap design code is unable execute on browser?

    I am trying to make a simple page on asp.net(visual studio 2012) using bootstrap. i have follow all your instructions. but it is not displayed on browser. and the same code save by .html then it execute properly

  15. Your videos are better than how my professors teaches . ALL OF YOUR TUTORIAL ARE HELPING ME BIG TIME. I'm sure almost everyone watching feels the same way. GREAT STUFF!!!! THANK YOU SO MUCH FOR THIS.

  21. thanks for providing this free video sir, really help me a lot when learning bootstrap. I would like to ask if you are also using Visual Studio Code and which to you think is better. Visual Studio or Visual Studio code. thanks

  25. sir i am not able to get the white spacs between the 3 columns.they are all created in a continuous manner so it just shows a grey bar.
    this is my code.please help me out

    <!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>Bootstrap 101 Template</title>

    <!– Bootstrap –>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!– 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]–>
    <style>
    .grey-box
    {
    background-color: grey;
    height: 300px;
    margin-bottom: 3px;
    font-size: large;
    text-align: center;
    padding: 80px;
    }
    </style>
    </head>
    <body>
    <h1 class="text-danger">Hello, world!</h1>
    <div class="container">
    <div class="row">
    <div class="col-md-2" align="center">
    <div class=" grey-box"> left side bar</div>
    </div>
    <div class="col-md-8" align="center">
    <div class="grey-box">middle bar</div>
    </div>
    <div col-md-2" align="center">
    <div class="grey-box"> right bar</div>
    </div>

    </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
    </html>

  27. very nice tutorial, I have a question. Why to create a nested div element for CustomDiv class? Is it not possible to use multiple classes in a same div? like <div class ="col-md-8 customDiv"> ??? please answer. thanks.

  34. Hi Kudvenkat!
    Thank you for the GREAT Bootstrap setup walk through…all the other videos I've seen are outdated and do not match the current bootstrap download. Your explanations are excellent, precise, and thorough!

    I was wondering if you could make a video on creating a multi-page eCommerce site with Bootstrap…and, if you would please create a separate video showing how to create or integrate Bootstrap with WordPress. Thank you!!!

  37. Dear my Teacher, these are great jobs, God bless YOU ALL, and thank you very much for these videos, I have one question for direction. from right site text to left site text … I have a project in ASP.net Bootstrap MVC with multi-languages in resources file I can not make change direction. I tried to use Direction { dir = "rtl"} is not working… please help.

Leave a Reply