Bootstrap - how to get started

A beginner's guide to help you get started with Bootstrap.

Responsive web design made easy.

If you want a responsive website that can be viewed on any screen size you should consider building your site using the Bootstrap framework.

If you have never used Bootstrap before you are probably wondering where to begin...

First thing you need to do...is visit the Bootstrap website and click on Download Bootstrap

You will then be asked to select from some options; you should click on the first of the three download options.

bootstrap

When the download completes you will have a zip file that contains all the files you will need to get started building your Bootstrap Website. Save these files somewhere on your computer and you can use them each time you want to create a new Bootstrap website.

bootstrap

How to use the Bootstrap files

Now that you have your files, what do you do with them?

I am using Dreamweaver I am going to asume that you are using Dreamweaver to build your site. If you use some other method then hopefully you can still follow along. I am also going to asume that you have at least some understanding of how to build a basic website.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]-->
</head>

<body>
<h1>Hello, world!</h1>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script>

</body>
</html>

Using the Bootstrap Examples

You now have a simple web page, but what do you do next?

The simplest thing to do is to copy and paste the code from the Bootstrap examples page. I will show you how to copy the code from one of the examples and place it into the new web page you just created.

Look at the image below, I have highlighted the "Starter Template"; this is the example I will use to show you how to copy elements from the Bootstrap examples. First thing to do is go to Bootstrap examples page and click on the "Starter Template".

bootstrap get started

When you click on "Starter Template" you will see a new page that looks like the image below. But what do you do now?

bootstrap starter template

Copy the HTML from the source code

Right-click anywhere on the "Starter Template" and select "View page source".

You will now be able to see the HTML code that makes up this page. You can copy and paste all the code from this page if you like, or you can select the pieces of the code that you need. In this example I will show you how to copy the Navigation Bar and the Title Text and place that into your website.

Scroll down the source code until you find the opening <body> tag.

Then copy and paste the following into your own web page...

<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>

<div class="container"> <div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div> </div><!-- /.container -->

Final steps - Copying the CSS

You have copied the HTML but the page looks wrong - why is that?

The Bootstrap Examples sometimes have an extra stylesheet attached. Scroll to the top of the source code on the Bootstrap "Starter Template". You will see a line that reads "Custom styles for this template"...

bootstrap css

Clicking on the link highlighted in blue on the page source code will open up a new window. You will now be able to copy the extra CSS styles and copy them into your own stylesheet. I would recommend that you create a new style sheet called "default.css" and put it in your CSS folder next to your Bootstrap CSS files that should already be there (this is just an example, you can call it anything you want). You can then use this new stylesheet to create any new styles you might need when you are building your Bootstrap website.

Create a new file called "default.css" and add a new line of code in your HTML that points to it.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
<title>Bootstrap 101 Template</title> 

<!-- Bootstrap --> 
<link href="css/bootstrap.min.css" rel="stylesheet"> 
<link href="css/default.css" rel="stylesheet">

Now paste the extra styles copied from the Bootstrap "Starter Template" into your default.css stylesheet. Save all your work and reload your new webpage.

For more detailed instructions on how to work with Bootstrap I would recommend you visit here www.w3schools.com/bootstrap