what is grid system

Bootstrap For Beginners what is grid system
6 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$49.99
List Price:  $69.99
You save:  $20
€46.14
List Price:  €64.60
You save:  €18.46
£39.56
List Price:  £55.40
You save:  £15.83
CA$67.95
List Price:  CA$95.14
You save:  CA$27.18
A$76.57
List Price:  A$107.21
You save:  A$30.63
S$67.34
List Price:  S$94.29
You save:  S$26.94
HK$391.09
List Price:  HK$547.55
You save:  HK$156.46
CHF 45.27
List Price:  CHF 63.39
You save:  CHF 18.11
NOK kr538.11
List Price:  NOK kr753.41
You save:  NOK kr215.29
DKK kr344.20
List Price:  DKK kr481.90
You save:  DKK kr137.70
NZ$83.23
List Price:  NZ$116.54
You save:  NZ$33.30
د.إ183.57
List Price:  د.إ257.02
You save:  د.إ73.44
৳5,499.56
List Price:  ৳7,699.83
You save:  ৳2,200.26
₹4,167.10
List Price:  ₹5,834.28
You save:  ₹1,667.17
RM236.60
List Price:  RM331.26
You save:  RM94.66
₦69,821.03
List Price:  ₦97,755.03
You save:  ₦27,934
₨13,934.82
List Price:  ₨19,509.87
You save:  ₨5,575.04
฿1,818.68
List Price:  ฿2,546.30
You save:  ฿727.62
₺1,611.24
List Price:  ₺2,255.86
You save:  ₺644.62
B$248.81
List Price:  B$348.35
You save:  B$99.54
R944.09
List Price:  R1,321.80
You save:  R377.71
Лв90.32
List Price:  Лв126.46
You save:  Лв36.13
₩67,464.25
List Price:  ₩94,455.35
You save:  ₩26,991.10
₪183.01
List Price:  ₪256.23
You save:  ₪73.22
₱2,812.31
List Price:  ₱3,937.46
You save:  ₱1,125.14
¥7,558.63
List Price:  ¥10,582.69
You save:  ¥3,024.06
MX$831.44
List Price:  MX$1,164.09
You save:  MX$332.64
QR182.70
List Price:  QR255.79
You save:  QR73.09
P686.44
List Price:  P961.07
You save:  P274.63
KSh6,573.68
List Price:  KSh9,203.68
You save:  KSh2,630
E£2,361.53
List Price:  E£3,306.33
You save:  E£944.80
ብር2,846.98
List Price:  ብር3,986
You save:  ብር1,139.02
Kz41,802.18
List Price:  Kz58,526.40
You save:  Kz16,724.22
CLP$49,007.19
List Price:  CLP$68,613.99
You save:  CLP$19,606.80
CN¥361.21
List Price:  CN¥505.72
You save:  CN¥144.51
RD$2,963.72
List Price:  RD$4,149.44
You save:  RD$1,185.72
DA6,734.30
List Price:  DA9,428.56
You save:  DA2,694.26
FJ$112.61
List Price:  FJ$157.67
You save:  FJ$45.05
Q390.88
List Price:  Q547.27
You save:  Q156.38
GY$10,492.79
List Price:  GY$14,690.75
You save:  GY$4,197.95
ISK kr6,908.11
List Price:  ISK kr9,671.91
You save:  ISK kr2,763.80
DH505.23
List Price:  DH707.37
You save:  DH202.13
L881.81
List Price:  L1,234.61
You save:  L352.79
ден2,838.22
List Price:  ден3,973.74
You save:  ден1,135.51
MOP$403.79
List Price:  MOP$565.34
You save:  MOP$161.54
N$947.89
List Price:  N$1,327.13
You save:  N$379.23
C$1,844.42
List Price:  C$2,582.33
You save:  C$737.91
रु6,678.27
List Price:  रु9,350.11
You save:  रु2,671.84
S/185.49
List Price:  S/259.70
You save:  S/74.21
K191.78
List Price:  K268.50
You save:  K76.72
SAR187.49
List Price:  SAR262.50
You save:  SAR75.01
ZK1,274.10
List Price:  ZK1,783.85
You save:  ZK509.74
L229.39
List Price:  L321.17
You save:  L91.77
Kč1,167.07
List Price:  Kč1,633.99
You save:  Kč466.92
Ft18,210.93
List Price:  Ft25,496.77
You save:  Ft7,285.83
SEK kr529.69
List Price:  SEK kr741.62
You save:  SEK kr211.92
ARS$42,828.93
List Price:  ARS$59,963.93
You save:  ARS$17,134.99
Bs347.51
List Price:  Bs486.54
You save:  Bs139.03
COP$194,817.51
List Price:  COP$272,760.10
You save:  COP$77,942.59
₡25,252.30
List Price:  ₡35,355.24
You save:  ₡10,102.94
L1,237.04
List Price:  L1,731.96
You save:  L494.91
₲368,282.43
List Price:  ₲515,624.88
You save:  ₲147,342.44
$U1,890.31
List Price:  $U2,646.58
You save:  $U756.27
zł199.06
List Price:  zł278.71
You save:  zł79.64
Already have an account? Log In

Transcript

Welcome our videos tutorial learnings In this video I will teach you what is the bootstrap grid system bootstrap grid system divided whole website and container it totally 12 columns cross the page bootstrap grid system a built with the flexible box and allow up to 12 columns across the page if you do not want to use alt pearl columns individually you can group the columns together to create that column if you want to 12 columns use you can use third column are you not want to use 12 columns you can group it all can use within container the grid system is is responsive and the column will be rearranged Automatically depending on the screen size, make sure that some adds up to our favor. It is not required at the EU has to allow available columns. It's depend on you when you're designing websites, but kind of the side you need and how you manage your website according to your requirements.

There is a use grid classes bootstrap for grid system has five classes. Call extra small devices.co co call for use extra small devices the screen with less than 565 76 pixels it less than for that use column dot c a simple devices screen with equal r greater than 576 pixels. Color medium for like tablet and others. 768 pixel column large large devices are where they call and greater than 992. Extra Large, extra large devices is screen width equal to or greater large. When are you using the greatest system?

We have defined the classes in these classes, we use these things. Suppose we use dot Cole minus, it's less than 576 pixels can use which designing you want to display on that devices. And if you want similar devices screen with the color greater than 576 pixels, you can design according to your wishes on their devices. I will guide you how you get it and for medium devices like tablets and other devices you can use on this class. What ever color font size whatever you need you can device extra large you can use for your laptops and tablets according to your wishes. bootstrap grid system there is a total columns defining in the web page.

You can grip on us one all these are all use you one by one issues depending on your website what kind of website are you going to use and how you like to your website display on screen it is depend completely depend on you. Let's come there is a container Let me check it. Come on, run it. Let's 1234 columns. We have there is a for current we have disputed 12344 columns we have displayed there and the four columns showing that if we increase that 448 Let's check six columns here and you can resize here and files suppose we want to use that girl. Let's check it show total size completely and we used for that suppose 8864244 Our columns divided differently according to their sizes 12345678 we are using here x.

In there you can use, make media theory files, and then resize according your webpage. Just we show grid system, how you can use on hair, according to your websites. in next lecture, I will teach you how you can resize the page according to your requirement like you use for tablets, mobiles and laptops. Thank you very much.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.