S Y D C O N

Loading

Responsive Web Page Design and Proper Structure Using the Most Popular Bootstrap Framework

Bootstrap CSS is a collection of predefined classes for responsive web development. You just need to use a particular class to an element on the page.

To utilize all the classes you just need to include bootstrap CSS on the page.

Bootstrap also provides rich bootstrap JavaScript library to add more interactive functionalities on web pages such as transitions, modals, dropdown, tab, tooltip, popover, alert collapse, carousel and much more.

Let’s get started:

1. Initialization:

In Header:

  • Initialization of first 3 meta-tags.
  • Include Bootstrap CSS.
  • Don’t forget to include viewport meta tag in the header. 
    
<meta name="viewport" content="width=device-width, initial-scale=1">
     
    • A <meta> viewport element gives the browser instructions on how to control the page’s dimensions and scaling.
    • The width=device-width part sets the width of the page to follow the screen width of the device (which will vary depending on the device).
    • The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser. More Info

At Bottom of the page:

  • Initialize jQuery before Bootstrap JavaScript initialization.
  • Initialize Bootstrap JavaScript.
  • Bootstrap JavaScript uses jQuery so make sure you have initialized jQuery before bootstrap js.

2. Page Structure:

Inside the body tag, divide your page into HTML5 Sections.

  • The first section would be the header section that includes Navigation bar.
  • For landing page generally Second Section would be for “Hero Image” / “Carousel” / “HTML5 video”
  • After that use each section for individual detailing.
  • At the end, the last section would be for the footer of the page.

Dividing page in sections makes design simple and easy to further development and less messy when we want to use different things in different sections.

3. Use of wrapper Tags:

Inside general detailing section tags use div with


  • Container class: for lesser width on the big screen.

  • container-fluid class: For full width.

This provides content perfect wrapping and required padding on different screen size.

4. Use of .row and .col classes inside wrapper tags.

Now inside the .container/.container-fluid we use .row and .col-*-* bootstrap classes that helps to make everything responsive.

.col-*-* are the classes that makes page responsive for different sizes.

.row and .col classes are like <tr> and <td> respectively.

Not similar to them but you can consider .row as <tr> for table and .col as <td> to understand them properly.

Inside the .container /.container-fluid we make rows and all rows will have columns inside.

To create a row we use div element with .row class and inside that div we use div element with .col-*-* classes.

.col-xx-n: This define on size of ‘xx’ width of the column will be ‘n’


  • n can be the number from 1 to 12.

  • 12 means 100%, full width of its parent.

  • 6 means 50%, half width of its parent.

  • 4 means 33.33%, one-third width of its parent.

  • 1 means the one-twelfth width of its patent. Like that 1 to 12.

There are 4 sizes:


  • lg: Large (Large Screen Computers/Laptops)

  • md: Medium (Medium Size Laptops/Computers)

  • sm: small (Tablet)

  • xs: Extra Small (Mobile)

We can provide more than one .col tag on one div to specify how the width of that div will be on different sizes screen.

For example, if we specify following div:

<div class=”row”> <div class=”col-lg-3 col-md-4 col-sm-6 col-xs-12”> </div> </div>


  • On the large screen, that column will cover one fourth of full width (of 12).

  • On medium, this will become one-third of a full width (of 12).

  • On small this will become one-half of full width (of 12).

  • On extra small, this will become full width (of 12).

Column div changes its width based on the device size and width is not defined explicitly. Width is some percentage of parent’s width. So you never get horizontal scroll bar unless there is an element with a larger width defined explicitly.

Conclusion:

Here we saw initialization of bootstrap and basics on structuring the page and how to make it responsive with proper use of bootstrap classes in one of the correct ways.

Bootstrap contains a very large collection of different classes that can be used to design different components of web page responsively and very easy.