Bootstrap Introduction

Easiest way to teamplate your web

Let’s Go
What is Bootstrap ?

B
Bootstrap is a free and open-source front-end library for designing
websites and web applications. It contains HTML- and CSS-based design
templates for typography, forms, buttons, navigation and other
interface components.
Wikipedia

2 © 2018 Ubiqum Code Academy. 2

What is Bootstrap ?

The main idea behind is that adding some classes we can have a
predefined design, with lots of fancy stuff like customised buttons,
forms and tables. Also bootstrap use a twelve-column responsive grid
layout system, really useful for positioning things in a large scale.

3 © 2018 Ubiqum Code Academy. 3

First Step

Bootstrap's grid system is built with flexbox and allows up to 12 columns across the page.
The grid system is responsive, and the columns will re-arrange automatically depending on the screen
size. Make sure that the sum adds up to 12 or fewer (it is not required that you use all 12 available
columns).

4 © 2018 Ubiqum Code Academy. 4

Bootstrap Basics
.col
extra small devices - screen width less than 576px
.col-sm
small devices - screen width equal to or greater than 576px

.col-md
medium devices - screen width equal to or greater than 768px

.col-lg
large devices - screen width equal to or greater than 992px

.col-xl
xlarge devices - screen width equal to or greater than 1200px

5 © 2018 Ubiqum Code Academy. 5

First Step

6 © 2018 Ubiqum Code Academy. 6

Thanks for Watching
This is a sample text.Insert your desired text
here. This is a sample text.Insert your desired
text here.