Student Tech Life: November 2015

Chapter 6 - Bootstrap 3 - Hide specific grid columns in mobile, tablet and desktop

This chapter will teach, How you can hide specific columns in different resolution screens mobile, tablet and desktop? Sometime according to the requirements we need to hide some modules (div) on different gadgets. Like we are showing a div containing a image ad in the site but we only want to see this dive in the desktop and tablet and not want to show in the mobile. Similar there can be a requirement to show div in the mobiles but not show in the desktop or tablet. So we can do this by the bootstrap css grid classes. Yes not need to write any custom and not need to write and jQuery script. Just add additional classes into the div and you can hide and show the div according the resolution changes.

	Extra small devices Phones (<768px)	Small devices Tablets (≥768px)	Medium devices Desktops (≥992px)	Large devices Desktops (≥1200px)
`.visible-xs`	Visible	Hidden	Hidden	Hidden
`.visible-sm`	Hidden	Visible	Hidden	Hidden
`.visible-md`	Hidden	Hidden	Visible	Hidden
`.visible-lg`	Hidden	Hidden	Hidden	Visible
`.hidden-xs`	Hidden	Visible	Visible	Visible
`.hidden-sm`	Visible	Hidden	Visible	Visible
`.hidden-md`	Visible	Visible	Hidden	Visible
`.hidden-lg`	Visible	Visible	Visible	Hidden

For example here some requirements:-

1. We have four div with the color of red, green, blue, orange and gray.
2. In the desktop in large resolution grater than equal to 1200px the all the div should visible instead of the gray color div.
3. In the medium screen grater than equal to 992px resolution all the div should visible instead of the the orange and gray.
4. In the small screen grater than equal to the 768px resolution all the div should visible instead of the blue, orange and gray.
5. In the extra small screens consider in the the mobile resolution less than equal to 768px all the div red, green, blue, orange and gray should be visible.

The above screen will show you where the code will affected the div columns and in which one resolution.

Below the explanation how it works:-

1. As you can see class .hidden-lg hiding the div gray in the large resolution.
2. In the pointer second class .hidden-md hiding the div orange in the medium screen.
3. In the third pointer thing you can see class .hidden-sm hiding the div blue in the small screen.
4. In the point four you can see the class .hidden-xs hiding the div green in the extra small screen.

<html>
<head>
<title>Bootstrap 3 Grid classes Introduction</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="css/style.css" rel="stylesheet">

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

<script src="https://code.jquery.com/jquery.js"></script>

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



<style type="text/css">
/* My custom override classes */
.container{padding-top: 10px;}
.row{margin-bottom: 10px;}
.row div{margin-top: 15px; margin-bottom: 15px; color: #fff;
font-weight: bold;font-size: 100px; min-height: 250px;}
.red{background-color: red;}
.green{background-color: green;}
.blue{background-color: blue;}
.orange{background-color: orange;}
.gray{background-color: gray;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 red">1</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 hidden-xs green">2</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 hidden-sm blue">3</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 hidden-md orange">4</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 hidden-lg gray">5</div>
</div>
</div>
<body>
</html>

Chapter 5 - Bootstrap 3 - Grid on Mobile, Tablet and Desktop

How the grid column classes work in the different resolutions?

How can we use these classes for view on different resolution?

The above questions comes in mind when we learn the columns and offset classes. Now you will learn how you can user these classes as per need on different gadgets screens. Before you learn there are four standers for size, these standards work with whole the bootstrap elements. Fist we use these standards sizes with the columns and show you what the response of different screens. For example we have a fours columns row in our web page.

The requirements are:

1. In large screen desktop grater than equal to 1200px show these four columns in single row.
2. In medium screen desktop like laptop grater than equal to 992px visible all columns of row but max three columns will show in a single row others will automatically show in the next rows.
3. In small screen like tablet grater than equal to 768px visible all columns of row but max two columns show in a single row others will automatically show in the next rows.
4. In extra small screen like mobile less than equal to 768px visible all columns of row but only one column show in a row others will automatically show in the next rows.

Functional knowledge:

1. First take and container class div to contain all the document data.
2. Nest a row class div to group the columns class div.
3. Now nest four columns div within the row class div.
4. Create four different background-color classes with name of .red, .green, .blue, orange and us background color same as name of class.
5. Use different background color class for each column div.
4. Give each column div another class .col-lg-3 . After use this class, each row column occupy the four column space. and this row will show four columns withing single row. Because we divide twelve grid space in these four columns in large screen.
5. Use another class .col-md-4 for each row columns. after apply this class three columns will occupy twelve grid columns space in the medium screen and the fourth column will automatically response in the next row.
five Add another third column class .col-sm-6 for each row columns. after apply this class, two columns will occupy twelve grid columns space in the small screens and the another two column will automatically response in the next row. These another thwo columns will automatically occupy the twelve grid space within the next row.
6. Use another fourth class .col-xs-12 for each row columns. Using this new class you see in the mobile screen each column of the row will occupy full width of the screen. And each columns will automatically come in the single row.

<html>
<head>
<title>Bootstrap 3 Grid classes Introduction</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="css/style.css" rel="stylesheet">

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

<script src="https://code.jquery.com/jquery.js"></script>

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



<style type="text/css">
/* My custom override classes */
.container{padding-top: 10px;}
.row{margin-bottom: 10px;}
.row div{margin-top: 15px; margin-bottom: 15px; color: #fff;
font-weight: bold;font-size: 10px; min-height: 250px;}
.red{background-color: red;}
.green{background-color: green;}
.blue{background-color: blue;}
.orange{background-color: orange;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 red"></div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 green"></div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 blue"></div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 orange"></div>
</div>
</div>
<body>
</html>

Chapter 4 - Bootstrap 3 - Columns offset grid classes

This unit will teach you how to offset the area before and grid column with the standards grid system using the standard classes. For example you need to place a single column leaving the two single columns space. You can do very easily using the in build classes not need to write a huge code. Simple add the offset classes with the col classes and it will start working. the class used for the offset is .col-md-offset-* use 0-11 value replacing (*) you can use the value according to space you need before a div. For more understanding we need a single column after the space of 11 columns in a row so we user the class .col-md-1 and .col-md-offset-11 it will look like class="col-md-1 col-md-offset-11" this will show the column in the 12th grid position in the row. You can see this example in the screenshot bottom of the grid it is a last one row.

- White background in above screenshot is the body color.
- Green color is container div nested in the body tag.

- Blue are the rows div nested in the container div.

- Red are the different div columns nested in the rows with white text (text are the class used ). Every row have the different column class to understand the system.

After understanding this your can develop the web layouts with multiple sidebars and multiple module positions within you web page. mostly we see there a left sidebars, right sidebars, footer multiple columns, after header or in a header multiple columns in the layouts. If we use this grid system these all sidebars and modules positions will you develop, they will auto response on all screens.

<body>
<div class="container">
<div class="row">
<div class="col-md-1 col-md-offset-0">.col-md-1<br>.col-md-offset-0</div>
</div>
<div class="row">
<div class="col-md-1 col-md-offset-1">.col-md-1<br>.col-md-offset-1</div>
</div>
<div class="row">
<div class="col-md-1 col-md-offset-2">.col-md-1<br>.col-md-offset-2</div>
</div>
<div class="row">
<div class="col-md-1 col-md-offset-3">.col-md-1<br>.col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-1 col-md-offset-4">.col-md-1<br>.col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-1 col-md-offset-5">.col-md-1<br>.col-md-offset-5</div>
</div>
<div class="row">
<div class="col-md-1 col-md-offset-6">.col-md-1<br>.col-md-offset-6</div>
</div>
<div class="row">
<div class="col-md-1 col-md-offset-7">.col-md-1<br>.col-md-offset-7</div>
</div>
<div class="row">
<div class="col-md-1 col-md-offset-8">.col-md-1<br>.col-md-offset-8</div>
</div>
<div class="row">
<div class="col-md-1 col-md-offset-9">.col-md-1<br>.col-md-offset-9</div>
</div>
<div class="row">
<div class="col-md-1 col-md-offset-10">.col-md-1<br>.col-md-offset-10</div>
</div>
<div class="row">
<div class="col-md-1 col-md-offset-11">.col-md-1<br>.col-md-offset-11</div>
</div>
</div>
<body>

Chapter 3 - Bootstrap 3 - Grid classes Introduction

In the last chapter you learned about the grid system and viewport screen resolution fundamental. Now this lesson will teach you about the grid classes. All the previous we learn about to implement that we need to learn the classes use to achieve this. The gird system need to implement proper in the structure look like table. We need to use a div as a table and nested div as a row in the table and again some nested div in it as the columns. So it look like a table structure but it not a table it is just for better understanding. Here some of the things we need to consider to use the bootstrap grid.

1. Before start all the layout first take a div with the class name of .container nested first in the body tag. And a div taken as a row must be nested within the .container class div. So there can be more than one div as row using class .row with the class .container .

2. Next is column divs as last chapter there are some css classes for the 12 grid columns And also for the offset classes to leave space left side of the div column. There is a table for the classes according to standard screen resolutions.

Extra small devices Phones (<768px)	Small devices Tablets (≥768px)	Medium devices Desktops (≥992px)	Large devices Desktops (≥1200px)
For columns * means use value 1-12
.col-xs-*	.col-sm-*	.col-md-*	.col-lg-*
For columns offset * means use value 0-11
.col-xs-offset-*	.col-sm-offset-*	.col-md-offset-*	.col-lg-offset-*

2.1 - White background in above screenshot is the body color.
2.2 - Green color is container div nested in the body tag.

2.3 - Blue are the rows div nested in the container div.

2.4 - Red are the different div columns nested in the rows with white text (text are the class used ). Every row have the different column class to understand the system.

<html>
<head>
<title>Bootstrap 3 Grid classes Introduction</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="css/style.css" rel="stylesheet">

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

<script src="https://code.jquery.com/jquery.js"></script>

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



<style type="text/css">
/* My custom override classes */
.container{background-color: #00ff00;padding-top: 10px;}
.row{background-color: #1818BB;margin-bottom: 10px;}
.row div{background-color: #ff0000;margin-top: 15px; margin-bottom: 15px; color: #D24040;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-2">.col-md-2</div>
</div>
<div class="row">
<div class="col-md-3">.col-md-3</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-5">.col-md-5</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
</div>
<div class="row">
<div class="col-md-7">.col-md-7</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
</div>
<div class="row">
<div class="col-md-9">.col-md-9</div>
</div>
<div class="row">
<div class="col-md-10">.col-md-10</div>
</div>
<div class="row">
<div class="col-md-11">.col-md-11</div>
</div>
<div class="row">
<div class="col-md-12">.col-md-12</div>
</div>
</div>
<body>
</html>

Chapter 2 - Bootstrap 3 - layout grid system

Bootstrap layouts works on the layout of grid system. This grid follow the 12 columns row system. It means this is 12 column graph where you can draw your design considering these 12 columns. And in the column you can nest this column grid system. To the better understanding you can see the screens of this tutorial. To achieve our layout design we can merge, split and and use offset for these columns. Also important thing is the bootstrap work according to the four screen resolution categories. these four screens are large computer screens, medium computer screens, tablets and cell phones.

The resolution for the different screen sizes considers are:

1. Large Devices Desktops - (>=1200px)
2. Medium Devices Desktops - (>=992px)
3. Small Devices Desktops - (>=768px)
4. Extra Small Devices Desktops - (<768px)

To get our different size and positions grids we need to user some standard classes of bootstrap. To merge we user the single div and use the class col-md-* according to need. Actually we don't split in bootstrap just take the more than one column and use the class col-md-* accordingly. And also can user the class row for a div to nest some column divs in the row. Class col-md-offset-* used to offset or spam the columns before the div.

Below is the grid Code for the practice.

<div class="bs-docs-grid">

<div class="row show-grid">
<div class="col-md-1">1</div>
<div class="col-md-1">2</div>
<div class="col-md-1">3</div>
<div class="col-md-1">4</div>
<div class="col-md-1">5</div>
<div class="col-md-1">6</div>
<div class="col-md-1">7</div>
<div class="col-md-1">8</div>
<div class="col-md-1">9</div>
<div class="col-md-1">10</div>
<div class="col-md-1">11</div>
<div class="col-md-1">12</div>
</div>

<div class="row show-grid">
<div class="col-md-8"><font color="red">Merged 8 Columns</font><br> <font color="green"> Class .col-md-8</font></div>
<div class="col-md-4"><font color="red">Merged 4 Columns</font><br> <font color="green"> Class .col-md-4</font></div>
</div>

<div class="row show-grid">
<div class="col-md-4"><font color="red">Merged 4 Columns</font> <br><font color="green"> Class .col-md-4</font></div>
<div class="col-md-4"><font color="red">Merged 4 Columns</font> <br><font color="green"> Class .col-md-4</font></div>
<div class="col-md-4"><font color="red">Merged 4 Columns</font><br> <font color="green"> Class .col-md-4</font></div>
</div>

<div class="row show-grid">
<div class="col-md-6"><font color="red">Merged 6 Columns</font> <br><font color="green"> Class .col-md-6</font></div>
<div class="col-md-6"><font color="red">Merged 6 Columns</font> <br><font color="green"> Class .col-md-6</font></div>
</div>

<div class="row show-grid">
<div class="col-md-4">
<font color="red">Merged 4 Columns</font>
<br>
<font color="green"> Class .col-md-4</font>
</div>
<div class="col-md-4 col-md-offset-4">
<font color="blue">Offset 4 Columns</font>
<br>
<font color="red"> Merged 4 Columns</font>
<br>
<font color="green"> class .col-md-4 .col-md-offset-4</font>
</div>
</div>

<div class="row show-grid">
<div class="col-md-3 col-md-offset-3">
<font color="blue">Offset 3 Columns</font>
<br>
<font color="red"> Merged 3 Columns</font>
<br>
<font color="green"> class .col-md-3 .col-md-offset-3</font>
</div>

<div class="col-md-3 col-md-offset-3">
<font color="blue">Offset 3 Columns</font>
<br>
<font color="red"> Merged 3 Columns</font>
<br>
<font color="green"> class .col-md-3 .col-md-offset-3</font>
</div>
</div>

<div class="row show-grid">
<div class="col-md-6 col-md-offset-4">
<font color="blue">Offset 4 Columns</font>
<br>
<font color="red"> Merged 6 Columns</font>
<br>
<font color="green"> class .col-md-6 .col-md-offset-4</font>
</div>
</div>

</div>

Chapter 1 - Bootstrap 3 - Beginner getting start

Everyone know that bootstrap 3 is the largely used front-end framework for the website development for responsive layouts. To developing your first bootstrap site you need know about the bootstrap structure and also know hot to works. So this is the beginning guide how you can start. There are some simple steps and there more some chapters after reading you can develop your own bootstrap responsive websites.

1. Download the bootstrap framework these are some files of js and css. you can get these files from the bootstrap official website. And download the 'Precompiled Bootstrap'. After downloading and extracting the zip folder you can see there are some directors with the name of the css, js and fonts. Here the all source files of the bootstrap framework. You need to copy these folders in your project and attach these files in your html document.

2. In this tutorial i am creating a home.html where i am going to use the bootstrap framework.

3. Also create a style.css in the css directory (/css/style.css) you can use this css file to write your own classes and to override the bootstrap classes instead of changing direct in the bootstrap files.

4. Now time to see the code of attaching the css and js files. All the js and css need to attach in the head section of the html document. But before attaching the files we need to add the meta viewport.
Meta viewport code also need to mentioned in the head section of the document. Viewport is the user visible area of the webpage. When we talking about the responsive design. There are different view area in different screens. Now there are tablet and mobiles and computer screens in the use. So viewport fix the issues of layout visible area. It scale the view of the website according the the screen resolution. See how can we add viewport and attach the files in our webpage.

<!DOCTYPE html>
<html>
  <head>
    <title>My First Bootstrap page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- My own CSS -->
    <link href="css/style.css" rel="stylesheet">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>My First Bootstrap Page.</h1>    
  </body>
</html>

 5. Not need to us to attach fonts the fonts will auto attached because all the fonts attached or import code already exists within the bootstrap.css file. Now you can continue work on your web page after all these done.

To learn more about the bootstrap 3 see others bootstrap articles in this blog.

CHAPTER 1 - Bootstrap 3 getting started

<!DOCTYPE html>
<html>
<head>
<title>My First Bootstrap page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="css/style.css" rel="stylesheet">

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

<script src="https://code.jquery.com/jquery.js"></script>

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



</head>
<body>
<h1>My First Bootstrap Page.</h1>
</body>
</html>

Students Tech Life