control layouts with multiple classes

there are three way to control layout

1. container(-SIZ) class
2. row row-cols(-BP)(-Col)
   1. col(1-6)
3. col(-BP)(-COL)
   1. col(1-12)

Containers

These classes will give hundred percent width when screen size is lower than defined view port.

container-md this class will give uss 100% width untill the view port size is less than 768 pixel. when view ports size becomes equal or greater than view port size of medium which is 768 pixels, than that container leave the 100 percent width.

.container .container-sm .container-md range 768 to 991 .container-lg range 992 to 1199 .container-xl range 1200 to infinity. .container-fluid

Rows

Gutter

by defualut in grid system every column inside rows receives 30 pixelx padding in between them.

Formula

row-cols(-BP)(-Col)

row-cols-3 class will try to fit 3 items in a row no matter what the screen size is.

col(-BP)(-COL)

Aligning Columns

align-TYP-DIR

Layout techniques using row classes.

1. we first create container
2. then in container we create a div with clsss row, we can also add another class like class= row row-cols-3 in addition to row class.
3. row-cols-lg-4 will try to adjust 4 cloums when viewport is lg or greater than lg. class= row row-cols-3 row-cols-lg-4
4. we add col class to every section/element.
5. we may also use class = row justify-content-center when some units of space is empty in row to allign cloums in row.
6. for vertical allignment class = row vh-100 align-items-center justify-content-center
   1. class = col-3 align-self-end

Layout Page with column classes.

1. add class of row to div.
2. then add col-3 to each item. then only 4 items will fit into one row because size of the grid is 12 units. to display only two element on one row add class= "col-6"
3. we can also play with colmns layout like in row . for example we could add class of class = col-3 col-lg-6
4. example class = "coll-lg-3 col-med-4 col-sm-6"

Column offsets

• offset-BP-COL
  • COL: 1-11

example class="offset-sm-2"

nesting colums

order

1. apply order to all the elements you want to order

<div class="row">
<section class"col order-2 d-flex flex-column">
<img class="order-2" src="#">
<h1></h1>
<p></p>
</section>
</div>

Vertical Alignment

1. use in rows
2. allign-items-ALN
   1. ALN: start, center, end
3. works on nested colomns

Note: if items are not aligned equally then nest the elements into another row and column. row align-items-center col row col

Horizontal Alignment

1. use in rows
2. need col width
3. justify-content-ALN
   1. ALN: start, center, end, around, between

individual alignment

• Use in cols
• align-self-ALN
  • ALN: start, center, end, around, between

position

• position classes
  • fixed-top, fixed-bottom, sticky-top (lacks-support)

Basic Display

• mimics css
• d(-BP)-TYP
  • table, table-row, table-cell, flex, inline-flex

Print Display

• d-none d-print-block

Basic Flex Container

• d(-BP)(-inline)-flex (by default flex element are block level)
  • d-flex works on container only

Flex Container Classes

• container classes( classes that are added to conatiner)

1. Direction Class
   1. flex(-BP)(-DIR)(-reverse)
   2. DIR: (row (default), column(to stack items))
2. Order
   1. order(-BP)-ORD
   2. ORD: 1-12
3. Justify
   1. justify-content(-BP)-ALG
   2. ALG: start, end, center, around, between
4. Wrap
   1. flex(-BP)-WRP(-reverse)
   2. WRP: wrap, nowrap
5. align-content(-BP)-ALG
   1. ALG:start, end, center, between, around, stretch

• item classes (flex classes for individual element in the felx container)

flex for elements

• align-self(-BP)-ALG
  • ALG: start, end, center, baseline, stretch
• order(-BP)-ORD
  • ORD: 1-12

Floating elements

float-(BP)-SID Note use clearfix class in container to avoid loose track of individual elements.

Margin/Padding

• pb(-BP)-(N)SIZ
  • PRO: (m= margin, p= padding)
  • SID: t r b l x y
  • SIZ: 0 1 2 3 4 5 auto
  • Note N means negative it only works with margins

Visibility

• invisible
• visible

Sizing

• SIZ(-AMT)
  • siz: w, h, mw, mh, vw, vh, min-vw, min-vh
  • AMT: 25 50 75 100 auto

Border

• BORDER(-SID)(-COL)(-0)
  • top, right, bottom, left
  • Note -0 clears the border
• BORDER(-SID)(-SHA)(-SIZ)
  • top, right, bottom, left
  • SHA: circle, pill
  • SIZ: 0, sm, lg