# 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](https://youtu.be/UWfYY9CZblE?si=ZU-aSrVOY5_FDesw) to learn more about using the Bootstrap 5.3 documentation. ### Bootstrap and CSS Bootstrap is [well-documented](https://getbootstrap.com/docs/5.3/getting-started/introduction/). 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. ```html ``` #### 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. ```html

``` ### 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. ```

100% wide until small breakpoint

100% wide until medium breakpoint

100% wide until large breakpoint

100% wide until extra-large breakpoint

100% wide until extra extra large breakpoint

``` 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. ```html

Custom column padding

``` The above code can be found in the [bootstrap documentation](https://getbootstrap.com/docs/5.3/layout/gutters/#horizontal-gutters), 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. ```html

``` ### Summary of Bootstrap Classes The table below summarizes the Bootstrap classes we'll encounter in the starter project.

Category	Class Sample	Notes
Grid System
	`container`, `container-fluid`	Use `container` for fixed width and `container-fluid` for full width.
	`col`, `col-6`, c`ol-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.
Color
	`-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.
Nav
	`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
	`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`.
Utilties
	`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.