The Bootstrap Grid System
The Bootstrap grid system is a powerful tool that can be used to create responsive layouts for web applications. It is based on flexbox, which makes it easy to create layouts that are flexible and adapt to different screen sizes.
The Bootstrap grid system is made up of a series of containers, rows, and columns. Containers are used to define the width of the layout, rows are used to create horizontal rows of columns, and columns are used to create vertical columns of content.
The Bootstrap grid system uses a series of breakpoints to define how the layout should be displayed on different screen sizes. The breakpoints are:
- xs: Extra small screens (<576px)
- sm: Small screens (≥576px)
- md: Medium screens (≥768px)
- lg: Large screens (≥992px)
- xl: Extra large screens (≥1200px)
The number of columns in a row can be changed depending on the breakpoint. For example, a row with 12 columns on a large screen can be displayed with 6 columns on a small screen.
Here is an example of how to use the Bootstrap grid system to create a simple layout:
This code will create a layout with two columns on a medium screen (≥768px). The left column will be 60% of the width of the container, and the right column will be 40% of the width of the container.