Bootstrap

Twitter's CSS Framework

Robin Victorino

01/07/2015

CSS Framework?

Pre-built usual features

About styling

 

Responsive

 

Mobile-first

What it can do

  • Positioning
  • Responsiveness
  • Usual UI / UX actions

What it can't

  • Customize your website
  • Do your web designer's job
  • Make coffee

Module / plug-in

How to install Bootstrap

Step 1

<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/
    bootstrap/3.3.5/css/bootstrap.min.css"
/>
<html>
    <head>
    
    
    
    </head>
    <body>
        <p>Welcome on my web page!</p>
        [...]
    </body>
</html>

Bootstrap CSS file

How to install Bootstrap

Step 2

Just use it.

CSS Grid

12 columns

4 screen sizes

Example

Let's try it!

HTML Elements

Common components:

  • Navbar
  • Button / forms
  • Jumbotron

Example

Let's try it!

Customization?

Bootstrap tool

Thank you!

We did not talk about: JavaScript, dropdowns, progress bars, glyphicons...

Bootstrap presentation

By rvictorino

Made with Slides.com

Bootstrap presentation

Introduction to twitter's bootstrap css framework

  • 371

More from rvictorino