Bootstrap Tutorial and RWD – responsive websites

content-like-water-rwd-128

Level: intermediate

Today a quick tutorial about Bootstrap and creating responsive websites. Actually a template of good start point for further projects. We will also talk about the techniques, which allow us to reach specific results. We also collected links to resources with valuable information.

Bootstrap Tutorial – responsive template by hand

As we know, Twitter Bootstrap (TB) is an open-source CSS framework. Incredibly simplifies and accelerates the creation of solid, nice looking web projects (UI). Mobile-first approach included.

So let’s get straight to the point and create a basic template. We want to get it ready to run in desktop, as well mobile browsers. The first detail will be to define the viewport (area visible for the user at one screen). More about HTML5 basics can be found here.

HTML5 document and including necessary files

Let’s create HTML5 document, and include jQuery, as well Bootstrap 3.3.7 (e.g. from https://www.bootstrapcdn.com).

Simply a skeleton of the page. Example A:

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <link href="http://fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    </head>
    <body>
        <div class="container">
            <h1>Bootstrap starter</h1>
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                    A
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                    B
                </div>
            </div>
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    </body>
</html>

A word about the container – rows must be placed inside the element with .container (fixed-width) or .container-fluid (full-width) class, for correct alignment of elements.

content-like-water-rwd

Some elements have CSS classes, such as:

class=”col-xs-12 col-sm-6 col-md-4 col-lg-3″

through which (in a short) we define CSS rules for any devices (desktop, tablet, mobile, …). Certainly if we handle only selected cases, e.g.:

class=”col-xs-12 col-sm-6″

then for the other cases there will be the defaults used.

OK, but .col-xs-3, -md, -wtf?

It is in fact very simple, but so useful. Let’s decode what those prefixes mean. In simple words, they are used to define on what sizes of device’s screen those classes should be applied. The Grid system in Bootstrap 3+ defines such four sizes:

xs = extra small screens (mobile phones, max 767px)

sm = small screens (tablets, >= 768px)

md = medium screens (some desktops, >= 992px)

lg = large screens (remaining desktops, >= 1200px)

Usually we should define the classes according to the cases of devices we want to handle.

For example the div element with classes like col-xs-6 and col-sm-4 covers half the screen on the phone (xs), and 1/3 of the screen on the tablet (sm).

Similarly:

<div class="col-xs-6 col-sm-8">Column 2</div>

will cover half the screen on the phone, and 2/3 on the tablet. And so on.

Bootstrap grid is a great “scaffolding” for responsive projects. Certainly worth taking a moment for studying it and checking in practice:

http://getbootstrap.com/css/#grid

Further articles about Bootstrap Grid:

http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php

http://www.wearesicc.com/quick-tips-5-column-layout-with-twitter-bootstrap

Bootstrap offers something extra – the way to define, whether an element has to be visible or hidden on a specific size of the screen. We can handle that simply, using following classes:

.visible-xs

.visible-sm

.visible-md

.visible-lg

and:

.hidden-xs

.hidden-sm

.hidden-md

.hidden-lg

This is the simplest way to control the visible / hidden behavior of elements on different devices.

Example:

<div class="visible-xs-block visible-sm-block"></div>

In this case, the div element will be displayed (block) only on smartphones and tablets, and hidden in case of desktop.

Documentation:

http://getbootstrap.com/css/#responsive-utilities

By the way, it’s good to check the documentation of the components:

http://getbootstrap.com/components


Be more responsive

Time for more complex example. This time something more like a real website, that adjusts the view according to size of the screen. For this we will also add the media queries.

Example B

HTML:

...
<body>
  <div id="container">
    <div id="header">
      <h1>Page template</h1>
    </div>

    <div id="content">
      <h2>Content</h2>
      <p>Lorem ipsum ...</p>
      <p>Foo bar ...</p>
      <p>Lorem ipsum ...</p>
      <p>Foo bar ...</p>
      <br>
      <p>Thank you!</p>
    </div>

    <div id="sidebar">
      <h2>Options</h2>
      <p>Option A</p>
      <p>Option B</p>
      <p>Option C</p>
      <p>Option D</p>
    </div>

    <div id="footer">
      <h3>Our awesome footer!</h3>
    </div>
  </div>
</body>

Sample CSS:

html, body {
    height: 100%;
    margin: 5px;
    padding: 5px;
    font: 100% Arial, sans-serif;
}

/** Defaults **/
#header {
    height: 150px;
}

#content {
    background: #ffdb19;
    float: left;
    padding: 5px 15px;
    width: 75%;
}

#sidebar {
    margin-top: 20px;
    float: right;
    width: 20%;
}

#footer {
    clear: both;
    text-align: center;
}

#header, #sidebar, #footer {
    border: solid 1px #ccc;
    padding: 5px 15px;
}

Let’s define also media queries, which will adjust the appearance of elements, depending on what screen (device) the page will be opened:

/** Media Queries to handle particular cases **/

/* 980px or less */
@media screen and (max-width: 980px) {
    #content {
        width: 60%;
    }
    #sidebar {
        width: 30%;
    }
}

/* 700px or less */
@media screen and (max-width: 700px) {
    #content {
        width: auto;
        float: none;
    }
    #sidebar {
        width: auto;
        float: none;
    }
}

/* 480px or less */
@media screen and (max-width: 480px) {
    #header {
        height: auto;
    }
    h1, h2 {
        font-size: 22px;
    }
    #sidebar {
        display: none;
    }
}

According to this what we defined, the view will be adjusted automatically on various devices. Samples:

https://www.screencast.com/t/Cw7bS4TTbnl

https://www.screencast.com/t/O9UZCGVrM

https://www.screencast.com/t/j8IqJM88M

https://www.screencast.com/t/fxR4xajsvAxx

Source code (full HTML and CSS of our examples):

http://javascript-html5-tutorial.net/demos/tutorial-bootstrap-start.zip

Resources

– Bootstrap from scratch + examples:

Basic Bootstrap tutorial

Using Mustache JS by jQuery and Express application example. Part 1/2.

Mustache JS tutorial by jQuery and Express application example. Part 2/2.

– Tutorials:

http://inspirationalpixels.com/tutorials/creating-a-responsive-menu-with-html-css-jquery

https://scotch.io/tag/bootstrap

– Media queries:

http://www.w3schools.com/css/css_rwd_mediaqueries.asp

http://www.moreofless.co.uk/bootstrap-3-media-queries-default-sizes

http://www.vandelaydesign.com/turn-any-site-into-a-responsive-site

https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries

– Templates – ready examples of responsive websites, create with Bootstrap:

http://www.w3schools.com/bootstrap/bootstrap_templates.asp

For example:

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_temp_blog&stacked=h

– More examples – a good start point for our projects:

http://getbootstrap.com/getting-started/#examples

For example:

http://getbootstrap.com/examples/carousel

http://getbootstrap.com/examples/dashboard

– Various solutions:

http://www.initializr.com

http://javascript-html5-tutorial.net/category/bootstrap

See also

Modernizr – supports detection of browser features, as well the work with media queries.

Summary

Mobile first, creating responsive websites, that are looking awesome on various devices… It can be a nice fun! Bootstrap supports this kind of work really well.

We plan next articles about Bootstrap and the mobile-first approach, and for now, we wish you a lot of fun with responsive projects development.

Enjoy!

Web and Mobile Software Developer, with years of experience. My biggest passions are programming, new technologies, e-commerce, as well sports, cars, and of course my family.

Facebook Twitter LinkedIn Google+ Skype Xing 

Share: Share on Facebook4Tweet about this on TwitterShare on Google+1Share on LinkedIn1Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Responses are currently closed, but you can trackback from your own site.

Comments are closed.