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.