Coding Bootcamp: Grids and columns with Bootstrap

Grids and columns with Bootstrap

Antonis Kalipetis

@akalipetis - https://www.akalipetis.com

Agenda

• What is Bootstrap?
  
• Understanding the grid
  
• Creating a simple Bootstrap-enabled page

What is Bootstrap

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web

Notes:

• Developed initially by Twiter
  
• Uses a flex grid to position the elements in a page
  
• Has nice and easy defaults for things like buttons, annotations, forms, etc

Using Bootstrap

• Bootstrap can be easily loaded from a CDN
  
• Meaning there's no need to add any files in your code, just the declarations in the HTML
  
• Styling elements is done using Bootstrap's special classes
  
• Everything is positioned using the grid

The Bootstrap grid

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

The grid classes

• container or container-fluid - the container of a grid, use fuild for full-width
  
• row - each row of the grid
  
• col-xs-* - defines 1-12 columns in an extra small device (phone)
  
• col-ms-* - defines 1-12 columns in a medium device (tablet)
  
• col-ls-* - defines 1-12 columns in a large device (desktop)

Creating a grid

Start with a container or container-fluid

<div class="container">
    ...
</div>

Creating a grid

Add one or more rows

<div class="container">
    <row>
        ...
    </row>
</div>

Creating a grid

Add col-*s

<div class="container">
    <row>
        <div class="col-xs-4">I take 1/3 of the grid</div>
        <div class="col-xs-6">I take half the grid</div>
        <div class="col-xs-2">I take 1/6 of the grid</div>
    </row>
</div>

Creating a grid

You can even mix col-*s to create custom behaviours

<div class="container">
    <row>
        <div class="col-xs-12 col-md6">I take all the mobile screen and half the tablet/desktop</div>
        <div class="col-xs-6 col-md3">I take half mobile</div>
        <div class="col-xs-6 col-md3">1/4 table/desktop</div>
    </row>
</div>

Page header

<div class="page-header">
    <h1>Example page header <small>Subtext for header</small></h1>
</div>

Jumbotron

<div class="jumbotron">
    <h1>Hello, world!</h1>
    <p>...</p>
    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

Navbar

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="/">
                <img alt="Brand" src="...">
            </a>
        </div>
    </div>
</nav>

Breadcrumbs

<ol class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">Library</a></li>
    <li class="active">Data</li>
</ol>

Let's create a page together

References

• http://getbootstrap.com/
  
• http://www.w3schools.com/bootstrap/default.asp

Time to train

Exercise

Move your project's page to Bootstrap

Thanks!

@akalipetis - https://www.akalipetis.com