1 Star2 Stars3 Stars4 Stars5 Stars (7 votes, average: 5.00 out of 5)

Beginners Guide To Using Bootstrap Web Development

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.

Tip: Click on images to make them larger. If you find anything wrong on this page or need further assistance please comment below or contact me. 🙂

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.

Subscribe To My YouTube Channel:

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.

Beginners Guide To Using Bootstrap Web Development was last modified: November 30th, 2016 by Maximus Mccullough

Please like, share and subscribe.

Advanced Programming Made Easy

I hope you enjoyed the article. If I was able to help you please consider a tip for the content.

One Time Tip

more tips

Reoccuring Tips

Tips

Cool People Share:
Beginners-Guide-To-Using-Bootstrap-Web-Development

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.