Bootstrap syllabus

The Bootstrap grid system is used to create responsive layouts. It divides the page into a 12-column grid, allowing you to place elements in a structured and consistent manner. The grid system supports different breakpoints, ensuring that layouts adjust appropriately to different screen sizes.

The Bootstrap grid system uses a series of containers, rows, and columns to layout and align content. The grid is divided into 12 equal-width columns, and you can span a number of columns using classes like col-md-4 for a medium-sized screen. The grid system is responsive and fluid, adjusting the number of columns displayed based on the screen size.

.container creates a responsive fixed-width container, meaning it has a fixed width at different breakpoints, while .container-fluid creates a full-width container that spans the entire width of the viewport.

A layout is made responsive using Bootstrap by utilizing its grid system, breakpoints, and responsive utility classes. By defining different column sizes for different breakpoints (e.g., col-sm-6, col-md-4), the layout automatically adjusts for various screen sizes. Additionally, you can use responsive utilities like d-none, d-sm-block, etc., to show or hide elements on specific screen sizes.

Bootstrap utility classes provide quick, predefined styling without needing to write custom CSS. They can be used for margin and padding (m-2, p-3), text alignment (text-center, text-left), display properties (d-block, d-none), and more. They are helpful for rapid prototyping and consistent styling.

ABootstrap provides a set of typography styles that ensure text is readable and consistent across different devices. This includes base font size, headings, lists, inline text elements, and alignment utilities. Bootstrap also supports responsive typography using relative units and media queries.

col-sm-6 applies a column width of 6 (out of 12) when the screen size is small (≥576px) or larger, while col-md-6 applies the same width when the screen size is medium (≥768px) or larger. On smaller screens, the col-md-6 column will stack, while the col-sm-6 will not.

To create a responsive navbar in Bootstrap, use the navbar component along with navbar-expand to specify when the navbar should be expanded horizontally. Use navbar-light or navbar-dark for styling, and add collapse and navbar-collapse classes to the menu items that should collapse on smaller screens. Include a navbar-toggler button to control the expansion on small devices.

To create a modal dialog, use the modal component. Structure the modal with the modal-dialog, modal-content, modal-header, modal-body, and modal-footer classes. Use the data-toggle="modal" and data-target="#modalID" attributes on a button or link to trigger the modal.