Notes: Bootstrap
Last updated
Last updated
Developers use frameworks to improve efficiency and consistency and minimize error. The Bootstrap framework provides components of CSS shorthand and HTML, CSS, and JavaScript. We'll be using Bootstrap CSS shorthand for the project. Working with HTML, CSS, and JavaScript in the browser classifies our work as front end. This differentiates it from backend development, which involves writing code for a server instead of a browser.
Frameworks are constructive when you are working on multiple pages or a team. As you learn the Bootstrap shorthand, think about how confusing it would be if every developer on a team created their own CSS shorthand or if every page used its own set of CSS class names. Bootstrap creates its shorthand using classes.
See this video to learn more about using the Bootstrap 5.3 documentation.
Bootstrap is well-documented. Visit the documentation to learn how Bootstrap has created a shorthand for CSS. We will link a local stylesheet containing Bootstrap's CSS to use it in the document.
The container class is essential in Bootstrap for layout. It contains centers and pads the elements it contains. So, if a developer wants to layout items on a web page, they will likely turn to a container to do so. You can use this class on every page and be confident that it means the same thing as long as every page links the same stylesheet. The Bootstrap container is responsive and manages padding and margins across different device ranges.
Bootstrap manages responsive pages using sizes like T-shirt sizes. The table below shows the cutoff points for each size. If the viewport is less than 575px, it is considered very small. After that, the cutoff points for viewports are designated by the minimum value of the range. So, a small device is between 576px and 765px, and a Medium device is between 768px and 991px.
It helps to picture mobile devices like a cell phone as X-Small and a tablet as Small. After that, the sizes refer to laptops and desktop monitors of different sizes.
up to 575px
576px
768px
992px
1200px
1400px
The code below shows a series of containers that will adjust their sizes at different breakpoints.
The container class works with the row and col classes to implement responsive flexbox layouts. The col class also uses the sizing values used by the container class.
Here is an example of the implementation of a FlexBox layout using Bootstrap. We'll look at the meaning of gx and p shortly. Notice that the two col elements are children of the element with the row class, and the elements of the row class are children of the container element.
The above code can be found in the bootstrap documentation, showing you what it renders.
We've looked at the container class. There is also a container-fluid class. The difference is that the container class takes up a fixed page width, and the container-fluid class takes up the entire page width.
The Grid System that containers define is a twelve-column grid that essentially breaks up the width of the page into 12 units. Element are laid out across these units. An HTML element may take up as little as 1 unit of the container's width or up to 12 units of the container. The columns are children of rows, so each row can be a container of a set of cols that each takes up 1 or more grid units.
The image below shows many ways to layout elements across a 12-unit grid.
The code for the image above shows how this grid could be implemented.
The table below summarizes the Bootstrap classes we'll encounter in the starter project.
container, container-fluid
Use container for fixed width and container-fluid for full width.
col, col-6, col-sm-6, col-auto
Use col to specify columns in the grid. Use .col and .col-* for all device sizes. Use size (1-12) for responsive changes to column size. Use a number to create a proportional width where all the numbers add up to 12 in a row.
row gx-4 or gy-4
Add gutters to a row. They create horizontal padding with gx and vertical padding with gy.
row
The row elements contain the col elements. Specify the gutter in the row element.
row-cols-2
Set the the number of rows in a column. Use just col for each column. In this example, there are 2 columns for each row.
-primary, -secondary,
-teritary,
-ephasis,
-border,
-success,
-danger,
-warning
These colors can be customized, otherwise defaults are used. Add to text to change the text color. Add to button to change button color. Add to bg to change the background color. By default, text-primary, bg-primary and btn-primary will be blue. See the documentation for other default colors.
active
The active class will highlight the link in the navbar corresponding to the current page.
disabled
The disabled class will render the link unclickable and gray out the color.
navbar
The navbar provides a container for branding, responsive collapse, and wraps navigation links.
navbar-brand
Use navbar-brand to style the brand link in the upper left corner.
navbar-expand-lg, navbard-expand-md
Use navbar-expand with a size to enable responsive collapse of the navbar.
navbar-nav
Use navbar-nav to provide full height for navigation item wrapper.
navbar-toggler
Use navbar-toggler for responsive menu collapse.
navbar-toggler-icon
The navbar-toggler-icon is, by default, an image comprising 3 short horizontal lines and is sometimes called a "hamburger".
nav-item
The nav-item is applied to the block element that contains the link.
nav-link
The nav-link is the clickable element, usually an anchor tag that routes the user. It can be assigned the active or disabled class.
card
The card is a versatile container that can contain text and images. By default, it does not have a margin.
card-body
The card-body is a container for the card title, card text, and buttons. These are optional. An image can be placed above or below the card body.
card-footer
Place the card footer below the card body in a block element.
card-img-top, card-img-bottom
The card-img class will round the image's border to match the card.
card-title
The card-title is usually a header element.
card-text
The card-text is usually a paragraph element. If there is a button, it often follows the text as a call to action. The button can be an anchor tag style with button.
b, b-top, b-top-0, b-bottom, b-start, b-end
Borders are added to all sides with b, or called out by position top, bottom, start (left), end (right). Adding a -0 will remove a border.
fst-italic, fst-normal
Font style is added to provide italics or remove them
fw-bold, fw-normal
Font weight is used to make text bold. There is a range of weights moving from the most to the least bold: bold, bolder, semi-bold, medium, normal.
h-25, h-auto
Set height relative to a parent where h-25 translates to 25% of the parent's height, and values can range from 0-100 or auto. Using h-100 will fill the parent space.
lh-base, lh-small, lh-large
Line height is controlled by sizes that expand the space between text in a paragraph or other block element.
mt-2, px-1
The mt-2 will set a margin of 50% of a $spacer on the top of the element. The $spacer variable is 1rem by default. A rem is the font size of the root element, which is usually 16px. The px-1 will set padding 25% $spacer. See the documentation for all values available.
text-start, text-center, text-end, text-lg-start, text-color
Text alignment provides start, center, and end as well as size for responsive alignment. For text-color, assign by name as in text-color-primary.
w-25
Set the width relative to the parent. This is the same method as height where the default values are 25%, 50%, 75%, 100%, and auto. Using w-100 will fill the parent space.
Button
btn
Add btn to an element like an anchor tag, a, or an input tag to make it appear as a button.
