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
See the bootstrap code and edit it here.
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.
A1WEBSITEPRO Social Media Pages
Here are my social media pages, lets hook up!