Bootstrap Alignments

Alginment are very much required for a web developer to tell how the elements are arranged in a webpage !


lets have a detailed look at it !



END Alignment !

column1
column2
column3



Alignment start !

column1
column2
column3



Alignment Center !

column1
column2
column3



Alignment Center with self align for item !

column1
column2
column3



Alignment Center with Justify start !

column1
column2



Alignment Center with Justify Center !

column1
column2



Alignment Center with Justify Between !

column1
column2



Working with Offsets !

column1
column2



Margin Alignements

column1
column2

Need to learn about padding display and margines.

margin - m it has following variants

l -left r- right t-top b-bottom x- left or right y- top or bottom - y -axis blank all way around.

example mt-1, means margin top -1

here 0, 1, 2, 3, 4, 5 has relativd margins respect to font size.

0 - 0 1 - 0.25 2 - 0.5 3 - 1 4 - 1.5 5 - 3 $spacer variable will note this.



Margin example - my own

This is going to be big text with the option to justify the content in the column box. m5
Another text with some option to have margins with just - mt-5



Padding example - my own

This is going to be big text with the option to justify the content in the column box. padding p5
Another text with some option to have padding with just - pt-0



Span Elements

Span inline element 1 Span inline element 2
Span inline element 3



Flexible Boxes : Aside HTML tags are used for side content apart from main article eg:logins, comment form etc.



Flexible Boxes : row : Justify Start



Flexible Boxes : row : Justify Center



Flexible Boxes : column : Justify Center



Flexible Boxes : column : Justify Baseline based on typography like h1,h2



Flexible Boxes : column : Justify Baseline based on typography also for certain devices can be given in the order.