Bootstrap Learnings


Bootstrap Topic - Container with Colours

Primary !
Secondary!
Danger !
Warning !
Information !
Dark !
White !


Working with Images and Container !!


Image Properties : Title: farm Url: /assets/images/farm.jpg


Somehow using the imagedata set directly doesnot work. following lines dont work ! no idea why !! Title: Url:


Image with Bootstrap Fluid Image class : farm image icon alternative text

Bootstrap Image tutorials

Media Breakpoints in Bootstrap:



For Bootstrap Navigation Bars !

Lets learn about Nav bar from Bootstrap and how it is helpful to design navigatable webpages !

Try to re-use the navbars from Bootstrap Navbar sample code itself. its better.

Understanding Bootstrap grid system !

It is following the newspaper 12 column layout style.

Equal
Equal
Equal
Equal
Equal
Equal
Equal
Equal
Equal
Equal
Equal
Equal



Choosing the Column in the layout by specifying the coloum

Auto
Auto
Auto



For Mobile screen automatic size change and stack into row wise, one below one. Re-size the browser to undersand this behaviour.

Mobile
Mobile
Mobile



Ordering the column :

Third in display
First
Second - dont go by name



Nesting the columns using nested section tag !! Important concept - to layout the blog or webpage. Hint: Check where the fist div tag is getting closed !

First
Second
Third

Adoptive Sizing for the container !! Based on device width !!

This is a Sample text ! This will align based on the device width, to make this as a really long sentence ! I am typing simply without any new line !

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.



Bootstrap also has h1 to h5 level heading classes.

Need to write in proper fonts and using proper typography to make readers read!



Heading with a small sideline

This is Typed Text Without much thoughts!



Display Headline Tag !

BIG Display tag



Text rowours - with option to override !
“!important” tag in code is necessary to override the default bootstrap rowor!

Text - primary

Text - secondary

Text - danger

Text - success

Text - info

Text - warning

Text - dark

Text - body

Text - black

Text - light



Learning About paragraphs in bootstrap !

Learning about paragraph tags !

This is my lead paragaraph with good spacing between lines.

Quoted text with gray light fonts !



Some Tags in Bootstrap !



Bootsrap Lists



list items may contain other span elements. dl - refers to description list.

Memory
Boon or curse - no idea
Good thoughts
Good for oneself - gives good sleep most times !



With Bootstrap !

Memory
Boon or curse - no idea
Good thoughts
Good for oneself - gives good sleep most times !



Bootstarp has cool, javascript based list, with information for the selected tag.

Memory
Boon or curse - no idea
Good thoughts
Good for oneself - gives good sleep most times !



Fixed Top Title and wondering about sticky-top and fixed-top tags !

Learning Typgropahy






some text







some text