Install these now
Install these now
In any folder on your computer, right-click > New > Text Document, and name it index.html. Open the document in notepad or some other text editor, and paste the following code into it:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.css">
</head>
<body>
<div class="jumbotron">
<div class="container">
<h1>Welcome to Bootstrap!</h1>
<p>This is where it all begins!</p>
<p><a class="btn btn-primary btn-lg" target="_blank" href="https://getbootstrap.com" role="button">Learn more »</a></p>
</div>
</div>
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
</body>
</html>Open the file in the browser of your choice, and behold, you have bootstrap working! All you need to have in order to run bootstrap are references to bootstrap.css, the jquery library, and bootstrap.js. In the above demonstration, rather than saving the files locally with the HTML file, they are simply being referenced from a Content Delivery Network (CDN).
Now this is great for showing the barebones requirements for getting bootstrap up and running, but before we move any further, we should setup an actual development environment that makes things a bit easier. It will take a bit of work to get it going, but when it's finished, it will be a much more enjoyable development experience.
Disclaimer
Note that this section will consist of some heavy configuration. The idea is to provide a modern work environment that allows you to easily see the changes that you make as you make them. Don't be discouraged by the initial setup work that is done. Once it's done, you won't have to mess with any of it anymore, and you'll be able to focus on learning bootstrap! During the setup of some of the features that are used, I'll explain why they are used, but not into much of the how because it would be far beyond the scope of this tutorial. If there's any interest expressed in further learning a feature beyond what's covered, I'll make sure to create a separate tutorial that specifically covers that technology. I've also added a For Later section that provides further documentation on these technologies.
Create a folder anywhere and name it bootstrap-tutorial. From the file explorer, hold Shift and right-click in the newly created folder and click Open command window here.
Execute the command npm init.
Press enter to confirm the defaults until you get to the entry point setting, and change to app.js. Hit enter to set the defaults through the remaining settings. See below:
What this does is initialize a file called package.json. This file is used to define the features of your web app. Going further into this is beyond the scope of this tutorial, but note that all node web apps are defined by a package.json file.
Execute the command npm install bootstrap --save.
This command adds installs bootstrap to the directory location of the command prompt. Specifying --save adds bootstrap as a dependency to the package.json file. The rest of the following install commands complete the same function for the libraries that they install. The only difference is that, for commands that use the --save-dev flag, the associated libraries will be saved as devDependencies rather than just dependencies. What this implies is that these tools are only needed for use in the development environment, not the actual web app itself.
Remaining Dependencies
npm install jquery --save
npm install browser-sync --save-dev
npm install browserify --save-dev
npm install express --save-dev
npm install gulp --save-dev
npm install gulp-util --save-dev
npm install minimist --save-dev
npm install run-sequence --save-dev
npm install vinyl-source-stream --save-devExecute code . to open the project directory in Visual Studio Code.
It is highly recommended that you take the time to watch the intro videos on the visual studio code site. It will take roughly 35 minutes, and will be invaluable to helping you feel comfortable working in this IDE.
Installing the following extensions, though not mandatory, will be really helpful in enhancing the experience of working through this tutorial.
- beautify
- Debugger for Chrome
- HTML CSS Class Completion
- CSS Peek
- HTML Snippets
- JavaScript (ES6) code snippets
- npm
The overall file structure of the project will look like this (ignore the .vscode folder that may be present Code. This is specific to the application, not your project):
dist - scripts - styles node_modules src - html - index.html - scripts - app.js - styles - style.css .jshintrc <--- this is a file gulpfile.js package.json
Create all of the above folders and files that are missing from your project.
package.json
{
"name": "bootstrap-tutorial",
"version": "1.0.0",
"scripts": {
"start": "gulp"
},
"dependencies": {
"bootstrap": "^3.3.7",
"jquery": "^3.1.1"
},
"devDependencies": {
"browser-sync": "^2.18.8",
"browserify": "^14.1.0",
"express": "^4.14.1",
"gulp": "^3.9.1",
"gulp-util": "^3.0.8",
"minimist": "^1.2.0",
"run-sequence": "^1.2.2",
"vinyl-source-stream": "^1.1.0"
}
}Notice how all of the dependencies that were installed via the npm command are listed in the package.json folder now? All of the code for these libraries is stored in the node_modules folder. If that folder is ever deleted, all you need to do to get the files back is execute npm restore from a command prompt pointed at the directory of the project.
gulpfile.js
var
gulp = require('gulp'),
browserify = require('browserify'),
source = require('vinyl-source-stream'),
express = require('express'),
browserSync = require('browser-sync'),
gutil = require('gulp-util'),
minimist = require('minimist'),
runSequence = require('run-sequence');
var server;
var
gulp = require('gulp'),
browserify = require('browserify'),
source = require('vinyl-source-stream'),
express = require('express'),
browserSync = require('browser-sync'),
gutil = require('gulp-util'),
minimist = require('minimist'),
runSequence = require('run-sequence');
var server;
var options = minimist(process.argv);
var environment = options.environment || 'development';
gulp.task('html', function () {
return gulp.src('src/html/**/*.html')
.pipe(gulp.dest('dist'))
.pipe(reload());
});
gulp.task('styles', function () {
return gulp.src(['node_modules/bootstrap/dist/css/bootstrap.css',
'node_modules/bootstrap/dist/css/bootstrap.theme.css',
'src/styles/**/*css'])
.pipe(gulp.dest('dist/styles'))
.pipe(reload());
});
gulp.task('fonts', function () {
return gulp.src('node_modules/bootstrap/dist/fonts/*')
.pipe(gulp.dest('dist/fonts'))
.pipe(reload());
})
gulp.task('scripts', function () {
return browserify('./src/scripts/app.js', {
debug: environment === 'development'
})
.bundle().on('error', handleError)
.pipe(source('bundle.js'))
.pipe(gulp.dest('dist/scripts'))
.pipe(reload());
});
gulp.task('server', function () {
server = express();
server.use(express.static('dist'));
server.listen(8000);
browserSync({ proxy: 'localhost:8000' });
});
gulp.task('watch', function () {
gulp.watch('src/html/**/*.html', ['html']);
gulp.watch('src/styles/**/*.css', ['styles']);
gulp.watch('src/scripts/**/*.js', ['scripts']);
});
gulp.task('build', function () {
runSequence('styles', 'scripts', 'html', 'fonts');
});
gulp.task('default', ['build', 'watch', 'server']);
function handleError(err) {
console.log(err.toString());
this.emit('end');
}
function reload() {
if (server) {
return browserSync.reload({ stream: true });
}
return gutil.noop();
}I'm not going to go into too much detail about what's going on here. Per the gulp home page:
gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.
Here, I've setup tasks that move all of the code developed in the src folder to the dist folder and bundles the javascript into a single file. I've also setup a task that watches these files for changes, and reloads the browser whenever the files change. There's also a task that initializes the web server, starts it, and connects it to the browser-sync feature that reloads the page when changes are made to files.
Also of note are the require statements. This is specific to node, and loads modules into the variables that are being assigned. As long as a module has been declared as a depndency using npm install and exists in the node_modules folder, it can be loaded in the manner. We'll see this again when we setup the app.js file.
.jshintrc
{
"node": true,
"browser": true,
"globals": {
"$": true
}
}This is a JSHint file that provides some metadata to the development environment. It enables static analysis of JavaScript code to assist with error detection.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/styles/bootstrap.css" rel="stylesheet">
<link href="/styles/style.css" rel="stylesheet">
</head>
<body>
<div class="jumbotron">
<div class="container">
<h1>Welcome to Bootstrap!</h1>
<p>This is where it all begins!</p>
<p><a class="btn btn-primary btn-lg" target="_blank" href="https://getbootstrap.com" role="button">Learn more »</a></p>
</div>
</div>
<script src="/scripts/bundle.js" type="text/javascript"></script>
</body>
</html>Visual Studio Code supports a really cool feature called emmet shorthand. Essentially, instead of typing all of those annoying angle brackets, you can do cool things like type html:5 then hit Tab and it will automtatically insert the relevant HTML code into the document for you.
Since writing this, the emmet abbreviation changed from
html5tohtml:5
Click the image below to see this wizardry!
If you're interested, here's a cheat sheet for how the syntax works: emmet cheat sheet
app.js
'use strict';
global.jQuery = require('jquery');
var $ = require('jquery');
require('bootstrap');
$(document).ready(function () {
});All this script is really doing is pre-loading the dependent javascript libraries to be bundled when gulp executes the script task, and provides an entry point for providing custom javascript code. Notice how jquery is required twice? The global.jQuery definition is needed because it needs to be made available to bootstrap (which depends on jQuery). This is also why jQuery is defined before bootstrap.
style.css
/* Additional CSS goes here */There isn't any CSS here yet, but have added this for completion.
In Visual Studio Code, press Ctrl + ` (that's the backtick, not an apostrophe) to open the integrated terminal, type gulp, then press Enter.
To stop the web server from running, press Ctrl + C in the terminal window, then type Y and press Enter.
The journey begins!
In this section, you'll get a feel for how bootstrap is built, and explore how to use some of the core components that makes up the bootstrap framework. By the end, you should feel comfortable referencing the documentation to determine how the rest of it works.
Even without adding classes to the basic HTML elements, you'll notice a substantial overhaul in the styling provided by the framework.
Create two new html files in the src\html directory, one named compare-bootstrap.html and the other compare-plain.html. Paste the below markup into each document.
compare-plain.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Comparison - Plain</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<h1>Lorem Ipsum</h1>
<p>Friends are not food step on your keyboard while you're gaming and then turn in a circle nap all day</p>
<a href="http://localhost:3000/compare-bootstrap.html">Compare to Bootstrap</a>
<hr />
<h2>Heading 2</h2>
<p>
Kitty power! gnaw the corn cob so refuse to leave cardboard box or hide at bottom of staircase to trip human yet climb a
tree, wait for a fireman jump to fireman then scratch his face, scream at teh bath. Damn that dog meowzer! for licks
your face attack feet. Spend all night ensuring people don't sleep sleep all day lick the plastic bag for pee in
the shoe yet pooping rainbow while flying in a toasted bread costume in space has closed eyes but still sees you
and stare at wall turn and meow stare at wall some more meow again continue staring . Climb a tree, wait for a fireman
jump to fireman then scratch his face stare out the window howl on top of tall thing pee in the shoe. Bathe private
parts with tongue then lick owner's face chase imaginary bugs, but sleep on keyboard, for curl up and sleep on the
freshly laundered towels but give attitude, but eat all the power cords all of a sudden cat goes crazy. Behind the
couch white cat sleeps on a black shirt thinking longingly about tuna brine and refuse to leave cardboard box rub
face on everything. Sleep on keyboard this human feeds me, i should be a god i am the best attack dog, run away and
pretend to be victim but curl up and sleep on the freshly laundered towels swat at dog. Who's the baby eat the fat
cats food or leave dead animals as gifts rub face on owner need to chase tail spread kitty litter all over house.
Chirp at birds. The dog smells bad ears back wide eyed and nap all day climb leg, for find empty spot in cupboard
and sleep all day. Stares at human while pushing stuff off a table rub face on everything peer out window, chatter
at birds, lure them to mouth paw at beetle and eat it before it gets away. Kitty loves pigs chase ball of string
or spill litter box, scratch at owner, destroy all furniture, especially couch eat the fat cats food russian blue
purrr purr littel cat, little cat purr purr.
</p>
<hr />
<h3>Table</h3>
<table>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>Some A Data</td>
<td>Some B Data</td>
<td>Some C Data</td>
</tr>
<tr>
<td>Some A Data</td>
<td>Some B Data</td>
<td>Some C Data</td>
</tr>
<tr>
<td>Some A Data</td>
<td>Some B Data</td>
<td>Some C Data</td>
</tr>
</table>
<hr />
<h3>Unordered List with Links</h3>
<ul>
<li><a href="#">This goes nowhere!</a></li>
<li><a href="#">This goes nowhere!</a></li>
<li><a href="#">This goes nowhere!</a></li>
<li><a href="#">This goes nowhere!</a></li>
</ul>
</body>
</html>compare-bootstrap.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Comparison - Bootstrap</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/styles/bootstrap.css" rel="stylesheet">
<link href="/styles/style.css" rel="stylesheet">
</head>
<body>
<h1>Lorem Ipsum</h1>
<p>Friends are not food step on your keyboard while you're gaming and then turn in a circle nap all day</p>
<a href="http://localhost:3000/compare-plain.html">Compare to Default</a>
<hr />
<h2>Heading 2</h2>
<p>
Kitty power! gnaw the corn cob so refuse to leave cardboard box or hide at bottom of staircase to trip human yet climb a
tree, wait for a fireman jump to fireman then scratch his face, scream at teh bath. Damn that dog meowzer! for licks
your face attack feet. Spend all night ensuring people don't sleep sleep all day lick the plastic bag for pee in
the shoe yet pooping rainbow while flying in a toasted bread costume in space has closed eyes but still sees you
and stare at wall turn and meow stare at wall some more meow again continue staring . Climb a tree, wait for a fireman
jump to fireman then scratch his face stare out the window howl on top of tall thing pee in the shoe. Bathe private
parts with tongue then lick owner's face chase imaginary bugs, but sleep on keyboard, for curl up and sleep on the
freshly laundered towels but give attitude, but eat all the power cords all of a sudden cat goes crazy. Behind the
couch white cat sleeps on a black shirt thinking longingly about tuna brine and refuse to leave cardboard box rub
face on everything. Sleep on keyboard this human feeds me, i should be a god i am the best attack dog, run away and
pretend to be victim but curl up and sleep on the freshly laundered towels swat at dog. Who's the baby eat the fat
cats food or leave dead animals as gifts rub face on owner need to chase tail spread kitty litter all over house.
Chirp at birds. The dog smells bad ears back wide eyed and nap all day climb leg, for find empty spot in cupboard
and sleep all day. Stares at human while pushing stuff off a table rub face on everything peer out window, chatter
at birds, lure them to mouth paw at beetle and eat it before it gets away. Kitty loves pigs chase ball of string
or spill litter box, scratch at owner, destroy all furniture, especially couch eat the fat cats food russian blue
purrr purr littel cat, little cat purr purr.
</p>
<hr />
<h3>Table</h3>
<table>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>Some A Data</td>
<td>Some B Data</td>
<td>Some C Data</td>
</tr>
<tr>
<td>Some A Data</td>
<td>Some B Data</td>
<td>Some C Data</td>
</tr>
<tr>
<td>Some A Data</td>
<td>Some B Data</td>
<td>Some C Data</td>
</tr>
</table>
<hr />
<h3>Unordered List with Links</h3>
<ul>
<li><a href="#">This goes nowhere!</a></li>
<li><a href="#">This goes nowhere!</a></li>
<li><a href="#">This goes nowhere!</a></li>
<li><a href="#">This goes nowhere!</a></li>
</ul>
<script src="/scripts/bundle.js" type="text/javascript"></script>
</body>
</html>Run the application by entering gulp in the terminal window, then navigate to one of the pages. The, click the comparison link at the top of the page. See the difference? It may not seem like a lot, but the aesthetics are a lot cleaner and you didn't even have to write a single line of CSS.
Bootstrap on the left, Default CSS on the right
Components are modularly designed and can be combined with other components to create more complex interface modules. However, to use basic components, all you have to do is add a class to the proper element. For instance, to create a button, all you have to do is this:
<input type="button" class="btn btn-default" value="Click Me" />
<button class="btn btn-default">Click Me</button>
<a href="#" class="btn btn-default">Click Me</a>All three of the above elements would produce a button that looks the same. There are also classes for changing the color and size of the button:
<button class="btn btn-primary btn-lg">Large Primary</button>
<button class="btn btn-success btn-sm">Small Success</button>
<button class="btn btn-danger btn-xs">Extra Small Danger</button>Buttons can even be disabled using markup:
<button class="btn btn-info disabled">You Can't Click Me!</button>You can also make buttons span the width of the parent container where the button is placed:
<button class="btn btn-warning btn-block">Fill Available Width</button>Button groups allow you to link .
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>In the above example, the buttons are actually stuck together. For a series of unrelated buttons in a button toolbar, you can use separate button groups within a button toolbar.
<div class="btn-toolbar" role="toolbar">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Task A</button>
<button type="button" class="btn btn-default">Task B</button>
<button type="button" class="btn btn-default">Task C</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Primary Task</button>
<button type="button" class="btn btn-success">Successful Task</button>
<button type="button" class="btn btn-danger">Dangerous Task</button>
</div>
</div>Button groups and button toolbars demonstrate the power of compositional components. They are used on container elements and used to structure components rather than provide any explicit functionality.
Another powerful compositional component is the input group. This allows you to construct complex form elements out of various types of components.
<div class="input-group">
<div class="input-group-addon">Favorite Video Game</div>
<input type="text" class="form-control" placeholder="Skyrim, duh!" />
<div class="input-group-btn">
<button class="btn btn-info"><span class="glyphicon glyphicon-tower"></span></button>
</div>
</div>
<div class="input-group">
<div class="input-group-addon">Coolest Warrior Type</div>
<select class="form-control">
<option class="selected">Viking</option>
<option>Samurai</option>
<option>Knight</option>
</select>
<div class="input-group-btn">
<button class="btn btn-success"><span class="glyphicon glyphicon-sunglasses"></span></button>
</div>
</div>Now that there are several examples, lets throw them on a page and see how it looks.
First, open src/styles/style.css and add the following css classes. This will enable the use of spans for tabbing code blocks rather than using a bajillion
style.css
.one-tab {
margin-left: 2em;
}
.two-tab {
margin-left: 3em;
}
.three-tab {
margin-left: 4em;
}
.four-tab {
margin-left: 5em;
}
.five-tab {
margin-left: 6em;
}components.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/styles/bootstrap.css" rel="stylesheet">
<link href="/styles/style.css" rel="stylesheet">
</head>
<body class="container container-fluid">
<h2>Components Demo</h2>
<hr />
<h3>Buttons</h3>
<p><strong>Basic Button Usage</strong></p>
<div class="container">
<code>
<input type="button" class="btn btn-default" value="Click Me" /><br />
<button class="btn btn-default">Click Me</button><br />
<a href="#" class="btn btn-default">Click Me</a>
</code>
<hr />
<div>
<input type="button" class="btn btn-default" value="Click Me" />
<button class="btn btn-default">Click Me</button>
<a href="#" class="btn btn-default">Click Me</a>
</div>
</div>
<hr />
<p><strong>Button Color and Size</strong></p>
<div class="container">
<code>
<button class="btn btn-primary btn-lg">Large Primary</button><br />
<button class="btn btn-success btn-sm">Small Success</button><br />
<button class="btn btn-danger btn-xs">Extra Small Danger</button>
</code>
<hr />
<div>
<button class="btn btn-primary btn-lg">Large Primary</button>
<button class="btn btn-success btn-sm">Small Success</button>
<button class="btn btn-danger btn-xs">Extra Small Danger</button>
</div>
</div>
<hr />
<p><strong>Disabled Button</strong></p>
<div class="container">
<code>
<button class="btn btn-warning disabled">You Can't Click Me!</button>
</code>
<hr />
<div>
<button class="btn btn-warning disabled">You Can't Click Me!</button>
</div>
</div>
<hr />
<p><strong>Block Button</strong></p>
<div class="container">
<code>
<div class="col-md-3"><br />
<span class="one-tab"><button class="btn btn-warning btn-block">Fill Available Width</button></span><br />
</div>
</code>
<hr />
<div class="col-md-3">
<button class="btn btn-warning btn-block">Fill Available Width</button>
</div>
</div>
<hr />
<p><strong>Button Group</strong></p>
<div class="container">
<code>
<div class="btn-group" role="group"><br />
<span class="one-tab"><button type="button" class="btn btn-default">Left</button></span><br />
<span class="one-tab"><button type="button" class="btn btn-default">Middle</button></span><br />
<span class="one-tab"><button type="button" class="btn btn-default">Right</button></span><br />
</div>
</code>
<hr />
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
<hr />
<p><strong>Button Toolbar</strong></p>
<div class="container">
<code>
<div class="btn-toolbar" role="toolbar"><br />
<span class="one-tab"><div class="btn-group" role="group"></span><br />
<span class="two-tab"><button type="button" class="btn btn-default">Task A</button></span><br />
<span class="two-tab"><button type="button" class="btn btn-default">Task B</button></span><br />
<span class="two-tab"><button type="button" class="btn btn-default">Task C</button></span><br />
<span class="one-tab"></div></span><br />
<span class="one-tab"><div class="btn-group" role="group"></span><br />
<span class="two-tab"><button type="button" class="btn btn-primary">Primary Task</button></span><br />
<span class="two-tab"><button type="button" class="btn btn-success">Successful Task</button></span><br />
<span class="two-tab"><button type="button" class="btn btn-danger">Dangerous Task</button></span><br />
<span class="one-tab"></div></span><br />
</div>
</code>
<hr />
<div class="btn-toolbar" role="toolbar">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Task A</button>
<button type="button" class="btn btn-default">Task B</button>
<button type="button" class="btn btn-default">Task C</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Primary Task</button>
<button type="button" class="btn btn-success">Successful Task</button>
<button type="button" class="btn btn-danger">Dangerous Task</button>
</div>
</div>
</div>
<hr />
<p><strong>Button Toolbar</strong></p>
<div class="container">
<code>
<div class="row"><br />
<span class="one-tab"><div class="col-sm-6"></span><br />
<span class="two-tab"><div class="input-group"></span><br />
<span class="three-tab"><div class="input-group-addon">Favorite Video Game</div></span><br />
<span class="three-tab"><input type="text" class="form-control" placeholder="Skyrim, duh!"></span><br />
<span class="four-tab"><div class="input-group-btn"></span><br />
<span class="five-tab"><button class="btn btn-info"><span class="glyphicon glyphicon-tower"></span></button></span><br />
<span class="four-tab"></div></span><br />
<span class="three-tab"></div></span><br />
<span class="two-tab"></div></span><br />
<span class="one-tab"></div></span><br />
<span class="one-tab"><div class="col-sm-6"></span><br />
<span class="two-tab"><div class="input-group"></span><br />
<span class="three-tab"><div class="input-group-addon">Coolest Warrior Type</div></span><br />
<span class="three-tab"><select class="form-control"></span><br />
<span class="four-tab"><option class="selected">Viking</option></span><br />
<span class="four-tab"><option>Samurai</option></span><br />
<span class="four-tab"><option>Knight</option></span><br />
<span class="three-tab"></select></span><br />
<span class="three-tab"><div class="input-group-btn"></span><br />
<span class="four-tab"><button class="btn btn-danger"><span class="glyphicon glyphicon-sunglasses"></span></button></span><br />
<span class="three-tab"></div></span><br />
<span class="two-tab"></div></span><br />
<span class="one-tab"></div></span><br />
</div>
</code>
<hr />
<div class="row">
<div class="col-sm-6">
<div class="input-group">
<div class="input-group-addon">Favorite Video Game</div>
<input type="text" class="form-control" placeholder="Skyrim, duh!">
<div class="input-group-btn">
<button class="btn btn-info"><span class="glyphicon glyphicon-tower"></span></button>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="input-group">
<div class="input-group-addon">Coolest Warrior Type</div>
<select class="form-control">
<option class="selected">Viking</option>
<option>Samurai</option>
<option>Knight</option>
</select>
<div class="input-group-btn">
<button class="btn btn-danger"><span class="glyphicon glyphicon-sunglasses"></span></button>
</div>
</div>
</div>
</div>
</div>
<hr />
<script src="/scripts/bundle.js" type="text/javascript"></script>
</body>
</html>Now, run the app with the gulp command, and navigate to http://localhost:3000/component.html to see the magic of bootstrap components
