Bootstrap

What is Bootstrap?

Bootstrap is a CSS framework that contains predefined CSS components. This uses an external framework in the case that we want to use certain components such as some predefined buttons.

Frontend Library -> Front end is what a user sees. Backend is the programming and functionality of the website such as databases and servers. Front end and backend must communicate. Front end uses CSS HTML and javascript. The backend is SQL, .NET, Ruby and PHP

A feature is that it has a 12 column layout that makes it easy to make responsive websites for desktop and mobile.

To use the framework, all we need to know is which classes we need to add to our HTML.

We use external frameworks because they are prebuilt, easy, and fast to use. The website is also consistent. Additionally, the frameworks are also compatable with many differeny browsers.

Class bloat and customization are difficult with these external frameworks.

Use Bootstrap when... creating a Mobile first responsive website. Do not use bootstrap when you want to use custom csses.

Other popular CSS frameworks are...

Foundation
Tailwind
MUI

Bootstrap Documentation

Importing Bootstrap

Get Bootstrap Website

You can link bootstrap into the head section of a html page using the < link> element. Through the CDN (Content Delivery Network) To use the css framework, include the following li inside the head of the html document: < link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous"> Make sure to recall to use javascript at well. Use the most current Bootstrap - Bootstrap 4 Found Here

Using the documentation

The bootstrap documentation has a lot of prebuilt code that we can copy and paste into our projects. From here, we can modify that prewritten code to fit our project.

We can always overwrite the bootstrap css, but we must do this by making the overwritting the css by placing the code lower than the previous code (the sstyle tag goes underneath the bootstrap link)

12 Column Layout System

Requires: a container div with class container, a div with a class called row, and inside of row there are items with class col..

Bootstrap will try to autofit new column items inside of their rows, including even spacing and sizes. The container is responsive and has different breakpoints. responds to the width of the viewport. (based on common screensizes)

There are also sized columns. col-#(1-12) can mean that we can specify the amount of columns for the col div to take up. as long as it adds up to 12.

we will use mediaqueries less.

when the overall width is less than 500, each column will take up a line automatically. we can use multiple classes to change the format of the screen at different screensizes.

Column Sizes

Bootstrap Breakpoints | Bootstrap Documentation Breakpoints diagram

it is also possible to view breakpoints in developer tools.

Components

We use bootstrap because of their prebuilt components.

Button -> btn . Used to make a button. Bootstrap has several colors preconfigured for primary, warnings, and so on. Bootstrap does request that you do not denote information through the color exclusively.
Card ->
navbar-> navbar . There are many different styles of Navbars that we can use.

By the way, Bootstrap also has their own SVG icon library that we may use for our websites.

Search Now

Bootstrap additionally has... snippits, too. We can browse these code snippits and find new items that we would like for our own websites.

Copy and paste features that you like onto your own website.

Search Now

The part that helps make bootstrap so usable is that you can copy and paste these components. This is quite modular.

Spacing

We can use bootstrap notation to add more spacing and such. mb is margin bottom

To add a darkmode, we can use data-bs-theme ="dark"

Use snipping, layout, and such. Bootstrap has free and paid themes. W3 Schools has common layouts. We can also google free bootstrap templates.

The section tag is used to section out a website to keep it organized. < section> < /section>

you can have multiple containers per page.