Bootstrap Topic - Container with Colours
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 :
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.
Choosing the Column in the layout by specifying the coloum
For Mobile screen automatic size change and stack into row wise, one below one. Re-size the browser to undersand this behaviour.
Ordering the column :
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 !
Adoptive Sizing for the container !! Based on device width !!
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 !
Alignment start !
Alignment Center !
Alignment Center with self align for item !
Alignment Center with Justify start !
Alignment Center with Justify Center !
Alignment Center with Justify Between !
Working with Offsets !
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
Padding example - my own
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.
Heading with a small sideline
Display Headline Tag !
Text rowours - with option to override !
“!important” tag in code is necessary to override the default bootstrap rowor!
Learning About paragraphs in bootstrap !
This is my lead paragaraph with good spacing between lines.
Quoted text with gray light fonts !
Some Tags in Bootstrap !
list items may contain other span elements. dl - refers to description list.
With Bootstrap !
Fixed Top Title and wondering about sticky-top and fixed-top tags !