Bootstrap examples
Key concepts:
- Details at: GetBootstrap.com.
- Breakpoints in the 12
column system. They remove the need for media queries.
You can use more than 1 class to define a div's behavior.col-sm-12 col-md-8 col-lg-4would make a div take up 100% of the screen width, and a third of the screen width on larger device, and two thirds in mid-sized. -
Margin and padding can be easily altered using classes like
my-2- .5 rem or 8px margin on the y axis, or various other values. -
It is easy to put in color using dark and other modes. Apply
data-bs-theme="dark"to the HTML element, or add-darkto a class name.
Card
Card title
Some quick example text to build on the card title and make up the bulk of the card’s content.
Go somewhereContainer: auto-width
In this scenario, the column without a width defined (top right) will take up all the width left available.
Container: responsive, columns on top of each other in smaller screens
You can remove col-sm-12 because it will default to 100% anyway if the screen is below
1200px wide, and therefore not subject to the xl. Therefore, each div will take up 100% at
the smaller width.
Container: responsive, first column on top of last two in smaller screens
At a large screen size, the first div is on the left. At a small screen size, it is on top. When the divs are squeezed into the width of phone screens, they are on top of each other.
Container: responsive, successive columns change size in 4 screen widths
Screen sizes: xxl >= 1400px; xl >=1200px; lg >= 992px; md >= 768px.
Sm has the default behaviour -
each item takes 100% width.
In this example, the ratios are: xxl: 1:11; xl: 2:10; l: 4:8; and md:
6:6.