Here is a beginners guide to using Bootstrap Web Development. Bootstrap is a library of code that you can use to create web pages. In this tutorial we will start with the basics of Bootstrap and advance from there.
Benefits of Using Bootstrap *
The benefits of using bootstrap is taking advantage of pre coded commands. Bootstrap uses HTML tag to target interaction.
The HTML Layout For Bootstrap *
If you have not already done so get familiar with HTML and how it works. This will give you the basic knowledge to using Bootstrap.
Viewport Tag for Bootstrap *
Notice that after we declare the HTML format that we use a viewport tag. A viewport tag is for mobile devices so that your web page will be mobile friendly.
<meta name="viewport" content="width=device-width, initial-scale=1">
Head tag for Bootstrap Libraries *
The first thing that you have to do in your bare bones HTML is call in the Bootstrap library. Here is an example of that.
<!DOCTYPE html> <html lang="en"> <head> <title>A Bootstrap Example Page</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.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>Bootstrap Heading</h1> <p>This is some text.</p> </div> </body> </html>
Try It Yourself *
Div Classes in Bootstrap *
It matters what you name your div tags in the HTML for Bootstrap to work. In the example above we gave our opening div tag a class called “container”.
Using Bootstrap is easy once you get the hang of naming divs according to the Bootstrap library.