Bootstrap Tutorial Lesson 14 - Responsive Tabs with Scrollspy

In this Step by step Bootstrap Tutorial Lesson 14 - Responsive Tabs with Scrollspy  

 post,  we design in 15 minutes a responsive Bootstrap Tab with  Scrollspy , in a from-scratch Application for Mobile devices & desktop computers . All the code is open source at GitHub:
https://github.com/CarmelSoftware/Bootstrap_TabsAndScrollspy

This is how the Responsive Tabs with Scrollspy are displayed:

And this is the App in Nexus Galaxy devices :    

Bootstrap Tutorial Lesson 14 - Responsive Tabs with Scrollspy  

If you are in a hurry and need the Tabs with Scrollspy right now, download it from the following GitHub repository. Afterwards,  adapt it to your needs:
https://github.com/CarmelSoftware/Bootstrap_TabsAndScrollspy


You can begin building this app from a free Bootstrap template downloaded from  www.initializr.com/  (we explained this in a short tutorial: Bootstrap Templates). Elsewhere add to your HTML5 page the following CDN  jQuery and Bootstrap references   :

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

...and the following scripts before closing the </body> element  :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

The latest versions of the Bootstrap files are in this CDN server: http://www.bootstrapcdn.com/

If you need a Mobile device Emulator, read this short tutorial on installing the FREE Ripple Emulator.

1) Designing a Responsive Tab:

Following, we give you all the code to create the Tabs: all this code you just copy-paste inside your page.

Let's start.

We begin by creating the Navbar which allows the user to open the corresponding tabs content . We do so by using the Bootstrap classes "nav nav-tabs"   , in order to set the menu :

<ul id="myTabs" class="nav nav-tabs">
                    <li class="active"><a href="#home" id="home-tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a></li>
                    <li><a href="#profile" id="profile-tab" data-toggle="tab" aria-controls="profile">Life</a></li>
                    <li class="dropdown">
                        <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop1-contents">More <span class="caret"></span></a>
                        <ul class="dropdown-menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">
                            <li><a href="#dropdown1" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">A friend</a></li>
                            <li><a href="#dropdown2" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">Happiness</a></li>
                        </ul>
                    </li>
                </ul>
                <br />

The buttons will open the corresponding "tab-pane fade" , such as the following :

<div class="tab-pane fade" id="dropdown2" aria-labelledby="dropdown2-tab">
                        <h3>Happiness</h3>
                        <img class="img-responsive img-rounded" src="..." alt="Alternate Text" />
                        <br />
                        <p>Men of the most vulgar type, seem to identify the Happiness with pleasure. (Etics, I ch V)</p>
                        <p>It is the mark of an educated mind to be able to entertain a thought without accepting it.</p>
                    </div>

All the Bootstrap Tabs documentation can be found in the GetBootstrap Web Site.

2) Designing a Scrollspy inside a Tab:

Next, we create another Tab content, containing a Scrollspy:



<div class="tab-pane fade" id="profile" aria-labelledby="profile-tab">

                        <div class="bs-example" data-example-id="embedded-scrollspy">
                            <nav id="navbar-example2" class="navbar navbar-default navbar-static">
                                <div class="container-fluid">
                                    <div class="navbar-header">
                                        <button class="navbar-toggle collapsed" type="button" 
                                            data-toggle="collapse" 
                                            data-target=".bs-example-js-navbar-scrollspy">
                                            <span class="sr-only">Toggle navigation</span>
                                            <span class="icon-bar"></span>
                                            <span class="icon-bar"></span>
                                            <span class="icon-bar"></span>
                                        </button>
                                        <a class="navbar-brand" href="#">Points Of View</a>
                                    </div>
                                    <div class="collapse navbar-collapse bs-example-js-navbar-scrollspy">
                                        <ul class="nav navbar-nav">
                                            <li><a href="#happy">A happy life</a></li>
                                            <li><a href="#Truth">Truth</a></li>
                                            <li class="dropdown">
                                                <a href="#" id="navbarDrop1" 
                                                    class="dropdown-toggle" data-toggle="dropdown" role="button" 
                                                    aria-haspopup="true" aria-expanded="false">More About Life <span class="caret"></span></a>
                                                <ul class="dropdown-menu" aria-labelledby="navbarDrop1">
                                                    <li><a href="#love">Love</a></li>
                                                    <li><a href="#privilege">Privilege</a></li>
                                                    <li role="separator" class="divider"></li>
                                                    <li><a href="#perspective">Perspective</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </nav>        

Every <a> button in the Nav will open the corresponding contents, and also, while you navigate from content to content, the corresponding menu will be outlined  .



Now for the Scrollspy:

 <div data-spy="scroll" data-target="#navbar-example2" data-offset="0" class="scrollspy-example">
                                <h4 id="happy">A happy life</h4>
                                <img class="img-responsive img-rounded" src="..." alt="Alternate Text" />
                                <br />
                                <p>Very little is needed to make a happy life</p>
                                ...
                                <h4 id="Truth">Truth</h4>
                                <img class="img-responsive img-rounded" src="..." alt="Alternate Text" />
                                <br />
                                <p>If someone is able to show me</p>
                                ...
                                <h4 id="love">Love</h4>
                                <img class="img-responsive img-rounded" src="..." alt="Alternate Text" />
                                <br />
                                <p>It is not death that a man should fear</p>
                                ...
                                <h4 id="privilege">Privilege</h4>
                                <img class="img-responsive img-rounded" src="..." alt="Alternate Text" />
                                <br />
                                <p>You need to avoid certain things in your train of thought</p>
                                ...
                                <h4 id="perspective">Perspective</h4>

                                <img class="img-responsive img-rounded" src="..." alt="Alternate Text" />
                                <br />
                                <p>Everything we hear</p>
                                ...
                            </div>
                </ul>
            </nav>

        </div>
    </header>

That's all. The entire Tab with Scrollspy will be shown like this:

1- In Mobile devices : 

2- On Medium and Big desktops:

This is the style for the App:

body {

    padding-top: 60px;

    padding-bottom: 20px;

}

.jumbotron h1 {

    

    color: #a8a3a3;

}

h2 {

    font: 900 18px Verdana;

    color: #a8a3a3;

}

.well p{

    font: 700 12px Verdana !important;    

    color: #a8a3a3;

}

.well-footer, .well-footer a {

    font: 900 10px Comic Sans MS;

    color: #a8a3a3;

}

.alert {

    font: 600 9px Verdana;

}

.centered {

    text-align: center;

}

.scrollspy-example {

    position: relative;

height:400px;

overflow-y:scroll;

}

      by Carmel Schvartzman

כתב: כרמל שוורצמן

Bootstrap Tutorial Lesson 12 - Responsive Lists with linked items

In this Step by step Bootstrap Tutorial Lesson 12 - Responsive Lists with linked items 

   we experiment with several kinds of responsive Lists, Linked, Contextual, Custom , with Badges, and more, shown in different formats, in an from-scratch Application for Mobile & desktop computers . This App will display the Bootstrap Lists fitting all screen sizes .
You can download the complete app from the following GitHub repository:
https://github.com/CarmelSoftware/Bootstrap_Lists

This is how the Lists are displayed:

And this is the way how they appear in an Nexus Galaxy devices, for example:    

Bootstrap Tutorial Lesson 12 - Responsive Lists with linked items

You can build this app by using a Bootstrap template (free download) from  www.initializr.com/  (as explained in this short post : Bootstrap Templates), or elsewhere writing the following jQuery and Bootstrap references in the HTML5 file  :

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

And also  the following references before closing the </body>   :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

If you wish to setup a Mobile device Emulator, read this short tutorial on installing the FREE Ripple Emulator.

1) Displaying Bootstrap Custom Content Lists:

The Bootstrap supports elegant Lists display . Following are several templates for exemplifying the use of Lists in Bootstrap. They include all kind of Lists, Contextual, Linked, Disabled, Badges, and more, shown in different formats. List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.

We begin by creating Lists containing Custom Content . We do so by using the Bootstrap classes "list-group-item-heading" and "list-group-item-text" inside several "list-group-item" in a "list-group" , so you can display Custom Content Lists. You can add all type of HTML5 within, even for linked list groups:

The Custom Content List will be displayed this way:

All the Bootstrap Lists documentation can be found in the GetBootstrap Web Site.

2) Responsive Bootstrap Linked items with Contextual classes:

Next, we create another List containing links, but also with Contextual information.  The items are Links enhanced with contextual significance, from "Active" to "Disabled", and with Badges counters:

That will be shown this:

3) Minimalistic List Example:

Finally, this is a very simple responsive List, build over an unordered HTML list :

And will appear this way:

This is the style for the App:

body {

    padding-top: 60px;

    padding-bottom: 20px;

}

.jumbotron h1 {

    color: #a8a3a3;

}

h2 {

    font: 900 18px Verdana;

    color: #a8a3a3;

}

.well p, .panel p {

    font: 700 12px Verdana !important;

    color: #a8a3a3;

}

h4 + p {

    font: 700 10px Verdana !important;

    color: #a8a3a3;

}

.well-footer, .well-footer a {

    font: 900 10px Comic Sans MS;

    color: #a8a3a3;

}

.alert {

    font: 600 9px Verdana;

}

.centered {

    text-align: center;

}

a.active p {

    color: #fff;

}

That's all. Our Lists will be displayed this way:

1- In Mobile devices : 

The displays for Nexus devices screens is as follows:

2- On Medium and Big desktops:

      by Carmel Schvartzman

כתב: כרמל שוורצמן

Bootstrap Tutorial Lesson 11 - Responsive Tables

In this Step by step Bootstrap Tutorial Lesson 11 - Responsive Tables 

   we experiment with several kinds of responsive tables, Condensed, Bordered, Hover, Striped , and more, shown in different formats, by  building an Application for Mobile & desktop computers . This App will display the Bootstrap Tables in all screen sizes .
You can download the complete app from the following GitHub repository:
https://github.com/CarmelSoftware/jQueryPlugin_BootstrapTable

This is how this is displayed:

And this is the way how it looks in an Emulator , for Nexus Galaxy devices:    

Bootstrap Tutorial Lesson 11 - Responsive Tables

You can start this app by using a free Bootstrap template from www.initializr.com/ (explained in this short post : Bootstrap Templates), or you can write the following jQuery and Bootstrap links in the HTML5 file's Head:

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

Also put the following references before closing the </body> element:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

To setup a Mobile Emulator, read this short tutorial on installing the FREE Ripple Emulator.

1) Using Bootstrap Responsive Tables in a responsive Web Page:

The Bootstrap supports elegant tables that you can display in several ways. Because the problems planted by small screens, Bootstrap allows you to add scrolling to tables when displayed in them. Using the Bootstrap class "table-responsive", the columns will automatically scroll horizontally according to the screen size, meaning , under the 768px screens wide , tables will be responsive:

Also, we achieve a hover striped table by using these classes.

All the Bootstrap Tables  documentation can be found in the GetBootstrap Web Site.

2) Using Bordered Condensed Tables in a Responsive Bootstrap Web Page:

The difference between this kind of tables and the others reside in a "condensed" padding style, and the borders that these classes define:

The Bootstrap allows to enable the contextual helper classes such as warning, danger , etc, which is written this way :

This is the style added for the App:

body {

    padding-top: 60px;

    padding-bottom: 20px;

}

.jumbotron h1 {

    

    color: #a8a3a3;

}

h2 {

    font: 900 18px Verdana;

    color: #a8a3a3;

}

.well p{

    font: 700 12px Verdana !important;    

    color: #a8a3a3;

}

.well-footer, .well-footer a {

    font: 900 10px Comic Sans MS;

    color: #a8a3a3;

}

.alert {

    font: 600 9px Verdana;

}

.centered {

    text-align: center;

}

That's all. Our Tables will be displayed this way:

1- In Mobile devices : 

The displays for Nexus devices screens is as follows:

2- On Medium and Big desktops:

      by Carmel Schvartzman

כתב: כרמל שוורצמן