Top bootstrap basics

Use the CDN link to bootstrap:

1
2
3
4
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Put all your content inside this div:

2
<div class="container-fluid">content</div> or <div class="container"></container>

To make an image being responsive, add:

3
<div class="img-responsive">img</div>

“text-center” class will center a div.

A button in bootstrap can look like this:

4
<button class="btn">Like</button>
5
<button class="btn btn-block">Like</button>

will take 100% width because of the btn-block class. (A block level element will take all the screen width).

6
<button class="btn btn-block btn-primary">Like</button>

will make the button blue, similar to the Facebook main color.

If you want to align buttons in a column, use

7
<div class="row">

at the start of all the buttons. Also, use

8
<div class="col-xs-4">button</div>

for every button. xs means extra-small and 4 is the number of columns.
Only 12 colums allowed in total.

Div will get on a new line while using span, you will remain on the same line.

Instead of using the old “float”, you can put elements, text, areas within these kinds of divs:

9
<div class="col-xs-4">text</div>

Here is a good example.

10
11
12
13
14
15
16
<div class="col-xs-8">
  <h2 class="text-primary text-center">CatPhotoApp</h2>
    </div>
 
    <div class="col-xs-4">
  <a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "></a>
    </div>

To add icons, add this to your html header.

11
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

And an example:

12
<i class="fa fa-thumbs-up">Like</i>

will add a thumbs up icon.

13
<div class="row">stuff</row>

should wrap up elements that should be on the same line. You can use class col-xs-4 or other number.

ADD A COMMENT: