create account

Initiating a grid in bootstrap ! by frstwalket

View this thread on: hive.blog |  peakd.com |  ecency.com
programming · @frstwalket ·
$0.22
Initiating a grid in bootstrap !
<center>*Hello everyone, My previous blog was about getting started with Bootstrap and learning the basics about it.*</center>

> Here is a link <a href="https://steemit.com/webdeveloping/@frstwalket/getting-started-with-bootstrap">Getting started with Bootstrap. </a>

# In today's blog, I will cover
<br/>
![main image.jpg](https://cdn.steemitimages.com/DQmcofwgcQ5cvAsy15vQcYUHgeWnbrM9Q2zcMy29V6i1sGn/main%20image.jpg)


<center> *<h1> Grid  system in bootstrap </h1>* </center>
Bootstrap allows its user to draw / design **12 columns** on screen. You can draw **maximum of *12* columns using bootstrap.** Make sure that the sum of columns add up to 12.

![coloums.PNG](https://cdn.steemitimages.com/DQmTQQnk2ndz4ujaJTZPehkibgKgHgxy6gcbDUARAeKs66x/coloums.PNG)

<center>*This is the total amount of columns you can use.*</center>

As you already know that bootstrap is famous because of its responsive behavior. The webpage accommodates its size with respect to the sizeof the screen. The columns in bootstrap also re-arrange themselves according to the size of the screen.

* Initiating a grid: -

*From my previous blog,You come to know that every pre-defined keyword in bootstrap is in the form of class. Similar is the case with grids of bootstrap !*

Yes you guessed this right ! There is also a class for rows and columns. Since a grid consists of both rows and columns.

To initiate a column, We use the class column which can be modified as the user wants .

Bootstrap grid has four classes 
* xs ( Extra small )
* sm (Small)
* md (Medium)
* lg (Large)

These classes will create a grid as it is specified by their name.

### For example :-

    <div class="row">
    <div class="col-sm-3" style="background-color:lavender"> I am a column</div>
    </div> 

*Creates a column with a lavender background which stacks on small screen sizes *

As we know a grid is a combination of rows and columns that's why we have typed a column class inside a row class.

## That's all for today, Tomorrow I'll cover more about grid systems in Bootstrap, How to use it and what actually screen sizes do !

# Until then peace !

![images.png](https://cdn.steemitimages.com/DQmPCzdkVTcu7Ey3DPXv7KyGUnrWa1asytHtrJM1HkG5H3k/images.png)
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 111 others
properties (23)
authorfrstwalket
permlinkinitiating-a-grid-in-bootstrap
categoryprogramming
json_metadata{"tags":["programming","coding","webdeveloping","bootstrap","website"],"image":["https://cdn.steemitimages.com/DQmcofwgcQ5cvAsy15vQcYUHgeWnbrM9Q2zcMy29V6i1sGn/main%20image.jpg","https://cdn.steemitimages.com/DQmTQQnk2ndz4ujaJTZPehkibgKgHgxy6gcbDUARAeKs66x/coloums.PNG","https://cdn.steemitimages.com/DQmPCzdkVTcu7Ey3DPXv7KyGUnrWa1asytHtrJM1HkG5H3k/images.png"],"links":["https://steemit.com/webdeveloping/@frstwalket/getting-started-with-bootstrap"],"app":"steemit/0.1","format":"markdown"}
created2018-08-05 13:57:45
last_update2018-08-05 13:57:45
depth0
children6
last_payout2018-08-12 13:57:45
cashout_time1969-12-31 23:59:59
total_payout_value0.192 HBD
curator_payout_value0.031 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length2,227
author_reputation11,410,175,929
root_title"Initiating a grid in bootstrap !"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id67,192,685
net_rshares144,969,073,989
author_curate_reward""
vote details (175)
@steemitboard · 
Congratulations @frstwalket! You have completed the following achievement on Steemit and have been rewarded with new badge(s) :

[![](https://steemitimages.com/70x80/http://steemitboard.com/notifications/votes.png)](http://steemitboard.com/@frstwalket) Award for the number of upvotes

<sub>_Click on the badge to view your Board of Honor._</sub>
<sub>_If you no longer want to receive notifications, reply to this comment with the word_ `STOP`</sub>



> Do you like [SteemitBoard's project](https://steemit.com/@steemitboard)? Then **[Vote for its witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1)** and **get one more award**!
properties (22)
authorsteemitboard
permlinksteemitboard-notify-frstwalket-20180818t000259000z
categoryprogramming
json_metadata{"image":["https://steemitboard.com/img/notify.png"]}
created2018-08-18 00:02:57
last_update2018-08-18 00:02:57
depth1
children0
last_payout2018-08-25 00:02:57
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length674
author_reputation38,975,615,169,260
root_title"Initiating a grid in bootstrap !"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id68,548,568
net_rshares0
@steemitboard · 
Congratulations @frstwalket! You have completed the following achievement on Steemit and have been rewarded with new badge(s) :

[![](https://steemitimages.com/70x80/http://steemitboard.com/notifications/votes.png)](http://steemitboard.com/@frstwalket) Award for the number of upvotes

<sub>_Click on the badge to view your Board of Honor._</sub>
<sub>_If you no longer want to receive notifications, reply to this comment with the word_ `STOP`</sub>



**Do not miss the last post from @steemitboard:**
[SteemitBoard and the Veterans on Steemit - The First Community Badge.](https://steemit.com/veterans/@steemitboard/steemitboard-and-the-veterans-on-steemit-the-first-community-badge)

> Do you like [SteemitBoard's project](https://steemit.com/@steemitboard)? Then **[Vote for its witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1)** and **get one more award**!
properties (22)
authorsteemitboard
permlinksteemitboard-notify-frstwalket-20180825t143247000z
categoryprogramming
json_metadata{"image":["https://steemitboard.com/img/notify.png"]}
created2018-08-25 14:32:48
last_update2018-08-25 14:32:48
depth1
children0
last_payout2018-09-01 14:32:48
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length908
author_reputation38,975,615,169,260
root_title"Initiating a grid in bootstrap !"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id69,327,339
net_rshares0
@steemitboard · 
Congratulations @frstwalket! You have completed the following achievement on Steemit and have been rewarded with new badge(s) :

[![](https://steemitimages.com/70x80/http://steemitboard.com/notifications/votes.png)](http://steemitboard.com/@frstwalket) Award for the number of upvotes

<sub>_Click on the badge to view your Board of Honor._</sub>
<sub>_If you no longer want to receive notifications, reply to this comment with the word_ `STOP`</sub>



> Do you like [SteemitBoard's project](https://steemit.com/@steemitboard)? Then **[Vote for its witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1)** and **get one more award**!
properties (22)
authorsteemitboard
permlinksteemitboard-notify-frstwalket-20180903t000256000z
categoryprogramming
json_metadata{"image":["https://steemitboard.com/img/notify.png"]}
created2018-09-03 00:02:57
last_update2018-09-03 00:02:57
depth1
children0
last_payout2018-09-10 00:02:57
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length674
author_reputation38,975,615,169,260
root_title"Initiating a grid in bootstrap !"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id70,135,115
net_rshares0
@steemitboard · 
Congratulations @frstwalket! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

[![](https://steemitimages.com/70x80/http://steemitboard.com/notifications/votes.png)](http://steemitboard.com/@frstwalket) Award for the number of upvotes

<sub>_Click on the badge to view your Board of Honor._</sub>
<sub>_If you no longer want to receive notifications, reply to this comment with the word_ `STOP`</sub>



> Support [SteemitBoard's project](https://steemit.com/@steemitboard)! **[Vote for its witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1)** and **get one more award**!
properties (22)
authorsteemitboard
permlinksteemitboard-notify-frstwalket-20180914t172423000z
categoryprogramming
json_metadata{"image":["https://steemitboard.com/img/notify.png"]}
created2018-09-14 17:24:21
last_update2018-09-14 17:24:21
depth1
children0
last_payout2018-09-21 17:24:21
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length678
author_reputation38,975,615,169,260
root_title"Initiating a grid in bootstrap !"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id71,294,357
net_rshares0
@steemitboard · 
Congratulations @frstwalket! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

[![](https://steemitimages.com/70x80/http://steemitboard.com/notifications/votes.png)](http://steemitboard.com/@frstwalket) Award for the number of upvotes

<sub>_Click on the badge to view your Board of Honor._</sub>
<sub>_If you no longer want to receive notifications, reply to this comment with the word_ `STOP`</sub>



> Support [SteemitBoard's project](https://steemit.com/@steemitboard)! **[Vote for its witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1)** and **get one more award**!
properties (22)
authorsteemitboard
permlinksteemitboard-notify-frstwalket-20181019t064905000z
categoryprogramming
json_metadata{"image":["https://steemitboard.com/img/notify.png"]}
created2018-10-19 06:49:03
last_update2018-10-19 06:49:03
depth1
children0
last_payout2018-10-26 06:49:03
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length678
author_reputation38,975,615,169,260
root_title"Initiating a grid in bootstrap !"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id73,601,716
net_rshares0
@steemitboard · 
Congratulations @frstwalket! You received a personal award!

<table><tr><td>https://steemitimages.com/70x70/http://steemitboard.com/@frstwalket/birthday2.png</td><td>Happy Birthday! - You are on the Steem blockchain for 2 years!</td></tr></table>

<sub>_You can view [your badges on your Steem Board](https://steemitboard.com/@frstwalket) and compare to others on the [Steem Ranking](https://steemitboard.com/ranking/index.php?name=frstwalket)_</sub>


###### [Vote for @Steemitboard as a witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1) to get one more award and increased upvotes!
properties (22)
authorsteemitboard
permlinksteemitboard-notify-frstwalket-20190717t210914000z
categoryprogramming
json_metadata{"image":["https://steemitboard.com/img/notify.png"]}
created2019-07-17 21:09:15
last_update2019-07-17 21:09:15
depth1
children0
last_payout2019-07-24 21:09:15
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length628
author_reputation38,975,615,169,260
root_title"Initiating a grid in bootstrap !"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id88,421,573
net_rshares0
Help/Feedback