bootstrap-templates

A collection of html / css / bootstrap templates

What is Bootstrap?

Bootstrap is a popular front-end framework for developing responsive, mobile-first websites. It was developed by Twitter in 2010 and is now maintained by the Bootstrap team at GitHub.

Why Bootstrap?

The purpose of Bootstrap is to provide a standardized set of tools and design elements that can be easily implemented in web development projects. It includes a variety of pre-built CSS and JavaScript components, such as grids, forms, buttons, and navigation menus, that can be customized to fit the needs of a particular project.

How it works

Twelve column system

The general structure of Bootstrap is based on a responsive grid system. The grid is divided into 12 columns, and web developers can use these columns to create flexible layouts that adjust to different screen sizes. The grid system also includes rows and containers that help to organize content and maintain consistent spacing between elements.

Utility classes

Bootstrap also includes a variety of utility classes that can be used to modify the appearance and behavior of elements in a website. For example, classes like "bg-primary" and "text-white" can be used to change the background color and text color of an element, respectively.

Summary

Overall, the general structure of Bootstrap is designed to make it easy for web developers to create responsive, mobile-friendly websites that look great on a wide range of devices. By using pre-built components and a standardized grid system, Bootstrap simplifies the web development process and allows developers to focus on creating engaging and user-friendly websites.

Example designs

1. Bootstrap 5 official examples list: https://getbootstrap.com/docs/5.0/examples/
2. Bootstrap 5 documentation - components: https://getbootstrap.com/docs/5.0/components/accordion/
3. Arvid's example templates: https://arvidjohansen.github.io/html-templates/

Exercises

Our job is to make a website for a company "The Office".

1. Choose one of the examples in the previous list to use as a base for the website
2. Copy the source code locally to your computer and start modifying the template to fit our company profile for "The Office"
3. Try to make simple modifications using the built-in classes available for bootstrap
4. Find some components that we can use to get our message across to our customers

Info

1. Do not start referencing colors directly, use the built-in color codes here: https://getbootstrap.com/docs/5.0/customize/color/