Learn Bootstrap - Part 2

Опубликовано: 04 Март 2025
на канале: WEBoLOGY. in
19
2

Presented by: Aakash Biswas

Duration: 12.31 minutes

Watch Tutorial 1:    • Learn Bootstrap  - Part 1  

Bootstrap Grid System
Grid systems are used for creating page layouts by a series of rows and columns that make your content
Rows must be placed within a .container class for proper alignment and padding
Use rows to create horizontal groups of columns
Content should be placed within the columns, and only columns may be the immediate children of rows
Predefined grid classes like .row and .col-xs-4 are available for making grid layouts

Columns create gutters or gaps between column content via padding.
The padding is in rows for the first and the last column with negative margin on  .rows

Grid columns are created by specifying the number of columns available you want to span.
There are twelve columns totally that can be used.


Typography in Bootstrap
Bootstrap's global default font-size is 14px with a line-height of 1.428
This is applied to the body element and all paragraphs p elements
Bootstrap also has some contextual classes that can be used to provide some meaning through colors to text and data.
Examples of the classes for text colors are: .text-muted, .text-primary, .text-success, .text-info, .text-warning, and .text-danger

Contextual Classes
Contextual classes can be used to color table rows tr or table cells td
Examples: .lead, .small, .text-left, .text-right


Responsive Tables in Bootstrap
The .table-responsive class creates a responsive table.
The table will then scroll horizontally on small devices under 768px