webdev-basics/4-bootstrap.md

# Bootstrap

_Bootstrap_  is a modern CSS framework for building web sites with a responsive grid layout and a consistent, modern style

Originally developed by Twitter for encouraging consistency in web UI design

Nowadays handled by a separate team

Very common in modern websites

[https://getbootstrap.com/docs/](https://getbootstrap.com/docs/)

# Basic idea of Bootstrap

When developing a web page with Bootstrap you rarely need to write your own CSS. With Bootstrap we can use pre-made classes that will style the components for us. For example:

Non-styled button

Button with Bootstrap styling

<button>Button</button>

<button class="btn btn-primary">Button</button>

![](imgs/3-bootstrap_0.png)

![](imgs/3-bootstrap_1.png)

# Bootstrap Grid

The web page consist of rows

Each row is divided into a specific number of columns (max 12)

Each element can take an arbitrary number of columns

The sizes of elements and the number of columns in a row can be easily specified with CSS classes that Bootstrap has pre-defined

[https://getbootstrap.com/docs/5.3/layout/grid/](https://getbootstrap.com/docs/5.3/layout/grid/)

# <div class="container">

In most cases all content in Bootstrap should be wrapped inside a <div class="container">. This adds automatic responsiveness and sets maximum width for the page. Especially on large screens this prevents the contents from taking all the width of the screen.

![](imgs/3-bootstrap_2.png)

# Bootstrap grid: basic example

_Centered row with 3 columns_

<div class="container">

<div class="row">

<div class="col">

Column

</div>

<div class="col">

Column

</div>

<div class="col">

Column

</div>

</div>

</div>

![](imgs/3-bootstrap_3.png)

# Bootstrap: column count in row

* You can specify a row element to have a specific number of columns with the row-cols-<number> class
* For example, row-cols-2 for 2 columns in a row
* Here's a row-cols-3 example: a row with 3 columns
  * It has 4 inner elements each spanning a column,
  * 4 > 3, so the last element wraps to create a new row

<div class="container">

<div class="row row-cols-3">

<div class="col">Column</div>

<div class="col">Column</div>

<div class="col">Column</div>

<div class="col">Column</div>

</div>

</div>

![](imgs/3-bootstrap_4.png)

# Bootstrap: element width

You can make an element span many columns with the col-<number> class

E.g., an element with the col-6 class takes up 6 columns

<div class="row">

<div class="col">

1 of 3

</div>

<div class="col-6">

2 of 3 (wider)

</div>

<div class="col">

3 of 3

</div>

</div>

![](imgs/3-bootstrap_5.png)

# Exercise 1: Layout with Bootstrap

Create a new HTML document and add Bootstrap CSS to it.

Using Bootstrap, re-create the layout below. You don't need to add the purple border lines between the elements, they can be regular <div> elements with text content.

Extra: make the columns stack on small browser windows

![](imgs/3-bootstrap_6.png)

# Bootstrap: spacing

One particularly useful feature of Bootstrap is readily provided CSS classes for spacing!

For example, to add padding around an element, we can just give it a p-x class, where x is a number from 1 to 5 depending on how much padding we want.

[https://getbootstrap.com/docs/5.3/utilities/spacing/](https://getbootstrap.com/docs/5.3/utilities/spacing/)

# Bootstrap input form

Bootstrap includes styled input forms and buttons that look much better than the default ones.

![](imgs/3-bootstrap_7.png)

Code for the form in the previous slide

<form>

<div class="mb-3">

<label for="email" class="form-label">Email address</label>

<input type="email" class="form-control" id="email">

</div>

<div class="mb-3">

<label for="password" class="form-label">Password</label>

<input type="password" class="form-control" id="password">

</div>

<button type="submit" class="btn btn-primary">Submit</button>

<button type="reset" class="btn btn-outline-primary">Reset form</button>

</form>

<div class="mb-3">

<label for="email" class="form-label">Email address</label>

<input type="email" class="form-control" id="email">

</div>

![](imgs/3-bootstrap_8.png)

<div class="mb-3">

<label for="password" class="form-label">Password</label>

<input type="password" class="form-control" id="password">

</div>

![](imgs/3-bootstrap_9.png)

<button type="submit" class="btn btn-primary">Submit</button>

<button type="reset" class="btn btn-outline-primary">Reset form</button>

![](imgs/3-bootstrap_10.png)

# Styling forms

Input field size, button size, button color etc. can be changed just by adding classes to the element. For example:

<button class="btn btn-primary">Primary button</button>

<button class="btn btn-danger">Danger button</button>

<button class="btn btn-warning btn-sm">Small warning button</button>

<button class="btn btn-success btn-lg">Large success button</button>

![](imgs/3-bootstrap_11.png)

# Exercise 2: Input form

![](imgs/3-bootstrap_12.png)

Create the form from earlier

Add a checkbox

Add radio buttons

Make the input fields LARGE

Change the colors of the buttons and make them full width and stacked on top of each other

Use spacing classes like mb-2, pb-2 etc. to space the elements to your liking

# Bootstrap: advanced

Bootstrap also offers many additional useful features

Standardized color classes

__R__  __esponsive __ CSS classes to make the web site usable on both smaller and larger screens

Classes for setting element alignment (vertical-align)

Styles for various different elements, like buttons, forms and lists

![](imgs/3-bootstrap_13.png)

# Bootstrap: conclusion

Bootstrap provides a CSS layout system and a lot of ready-made CSS classes

Helps you to create appealing web pages quickly, without needing to write a lot of boilerplate CSS code

Look up Bootstrap's documentation if you're wondering whether it could save time in, e.g., styling your button or table

[https://getbootstrap.com/docs/5.3/getting-started/introduction/](https://getbootstrap.com/docs/5.3/getting-started/introduction/)

# Assignments

[Assignments about this topic can be found here](https://gitea.buutti.com/education/academy-assignments/src/branch/master/Front-end%20Basics/3.%20Bootstrap)