Notes: Bootstrap
Web Development Frameworks
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 and CSS
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.
Bootstrap Container Class
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.
Responsive 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.
| X-Small | Small | Medium | Large | X-Large | XX-Large |
|---|---|---|---|---|---|
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.
Layout with the Bootstrap Grid System
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.
Summary of Bootstrap Classes
The table below summarizes the Bootstrap classes we'll encounter in the starter project.
| Category | Class Sample | Notes |
|---|---|---|
| Use | |
| 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. | |
| Add gutters to a row. They create horizontal padding with | |
| The | |
| Set the the number of rows in a column. Use just | |
| These colors can be customized, otherwise defaults are used. Add to | |
| The | |
| The | |
| The | |
navbar-brand | Use navbar-brand to style the brand link in the upper left corner. | |
| Use | |
| Use | |
| Use navbar-toggler for responsive menu collapse. | |
| The navbar-toggler-icon is, by default, an image comprising 3 short horizontal lines and is sometimes called a "hamburger". | |
| The | |
| The nav-link is the clickable element, usually an anchor tag that routes the user. It can be assigned the | |
| The card is a versatile container that can contain text and images. By default, it does not have a margin. | |
| The | |
| Place the | |
| The | |
| The | |
| The | |
| Borders are added to all sides with | |
| Font style is added to provide italics or remove them | |
| Font weight is used to make text bold. There is a range of weights moving from the most to the least bold: | |
| Set height relative to a parent where | |
| Line height is controlled by sizes that expand the space between text in a paragraph or other block element. | |
| 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 alignment provides | |
| Set the width relative to the parent. This is the same method as height where the default values are | |
Button | ||
| Add |
Last updated
