Responsive Bootstrap Layout Template

A responsive Bootstrap layout can be created using the idea that your web page is a grid of twelve evenly spaced square-grids. Assume you want your page to consist of two evenly spaced panels. Each panel would consist of six square-grids.

HTML5 <div> tags define areas of the page for styling. They are used often to create areas for styling.

Responsive Bootstrap Layout for Even Two-Panel Page


<html>
++<head>
++++<link rel="stylesheet" type="text/css" href="bootstrap.css" />
++++<link rel="stylesheet" type="text/css" href="styles.css" />
++</head>
<body>
++<div class="container">
++++<h1>This is a header</h1>
++++++<div class="row">
++++++++<div class="col-md-6 thin_border">
++++++++++Panel 1 Content
++++++++</div>
++++++++<div class="col-md-6 thin_border">
++++++++++Panel 2 Content
++++++++</div>
++++++</div>
</body>
</html>

 

responsive bootstrapEffectively this creates two panels, consisting of six square-grids each. However, two columns will only appear on what Bootstrap defines as medium screen sizes are larger. The class “col-md-6” is saying make a column of six-square grids wide if the screen size is medium or larger.

Notice there are two linked style sheets. You can link as many as you like. They will cascade off of each other. Each style sheet you add can override the previous one if they have identical classes or selectors. Importantly, put your modifications in a new styles file. Do not change the Bootstrap file. Typically, web programmers will use just one more style sheet in addition to Bootstrap. But technically, more can be used.

In this example, styles.css has only:


.thin_border {
++border: 1px solid black;
}

This CSS3 code puts a border around out two columns.

You can copy this example in your own .html file. Be sure to put the bootstrap.css and style.css files in the same folder as your .html file. Open the file in different browsers or screen sizes and see how it responds. If the screen size is narrow, you should see the two six square-grids stack on top of the other.

These are the basics of responsive Bootstrap layouts. This layout can be combined with an MVC framework to make your web applications mobile friendly. Get started with Bootstrap, and get responsive!

Leave a Reply

Your email address will not be published. Required fields are marked *