I always enjoyed drawing. I'm pretty decent at it. But when it comes to styling a webpage, it's as if I can't stay coloring inside the lines, so to speak. Learning CSS is pretty difficult for me. And using bootstrap is like grabbing a drawing, placing a piece of paper over it, then drawing the outline. Bootstrap does all the heavy lifting for styling.
Structure
Bootstrap has a grid system structure with containers that are wrappers for rows, which then are wrappers for columns. To use a container, simply assign the element's class to the type of container as so <div class='container'><div>. Bootstrap has three different types of containers: .container, .container-fluid, and .container-{breakpoint}. Breakpoints are the size of the container. There are six breakpoints: xs, sm, md, lg, xl, and xxl. The same goes for using rows and columns.
Sass
Bootstrap uses sass variables and mixins to query breakpoints. Variables are prefixed with $ and can be found in _variable.scss. Media queries are prefixed with @ and are used through sass mixins.
Components
Bootstrap has many components.
- Alerts
- Badge
- Breadcrumb
- Buttons
- Button group
- Card
- Carousel
- Collapse
- Dropdowns
- Forms
- Input group
- Jumbotron
- List group
- Modal
- Navs
- Navbar
- Pagination
- Popovers
- Progress
- Scrollspy
- Tooltips
Thanks to bootstrap, styling is a lot easier. Still gotta do the research on how to use bootstrap, but after a couple of hours on the docs, and some practice, it finally clicks on how to use it. And it is definitely worth the time to do it. Cause afterwards, you may just feel like Michelangelo styling the sistine chapel on your webpage. But if not, then at worst, you'll be able to stay coloring inside the lines in your webpage, so to speak.
Sources
Top comments (0)