Hey everybody I want to let you know that I have undertaken the grueling task of getting the heck away from WordPress. I was so sick of the problems and updates I had to do all the time. I am now using my ezbloo system and I am integrating all my old posts into the new system. It sucks, but in the end, I will save bundles of time. I needed to keep things simple and that is why I created ezbloo. I'll have more on this later for you guys after I am done with the total integration of my old posts here. So if you are looking for a post and need it faster, shoot me an email and I will make it a priority. [email protected]

Beginners Guide To Using Bootstrap Web Development Edit
Last Update:2024-10-17 15:01:31
The Change:2024-10-16 10:33:26

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.