HTML Bootstrap Tutorial Hidden features in 5 minutes

Spread the love

Why Do We Need Another Html BootStrap Tutorial ?

Table of Contents

By now, everyone knows that HTML stands for HyperText Markup Language. In this html bootstrap tutorial, we won’t so much focus on the html as we will on the emmet and bootstrap 4. And if you didn’t remember, yes that HTML definition bit was your refresher – onwards we go. Bootstrap is a world famous css library from the wonderful programmer/designers over at Twitter and its arguably one of the most popular css frameworks in use at the moment. Emmet is the shortcut macro language that allows super fast magic like html/css code to appear, particularly if the programmer is particularly conversant with it. Go straight to the code.

There are some very distinct pros and cons to using Bootstrap that are argued endlessly in various forums. The pro to using bootstrap is that it gives you a very uniform set of css styling classes to use with wonderful effect. The con to using bootstrap is that it gives you

the same set of css styling classes used by millions of other websites

Yeah, there is some merit to this argument

… and therefore some say that there is no longer anything too different or unique about what your user is visually looking at.

To this very valid argument, I would say, develop in Bootstrap because there is nothing more of an eyesore to your users than seeing a color combination and font styling that is inconsistent and jarring to the eye.

So, develop in bootstrap and get the benefit of being able to use a quarter million or more specialists who understand this package. They or yourself can modify your bootstrap based css to give you the uniqueness that you may be artistically looking for within the uniformity of what your customer is expecting the site to half way look like. Best of both worlds. The strength of CSS ( Cascading Style Sheets ) is that a few simple changes to the styling lines of code can dramatically change the look and feel of the entire website with less than 5 minutes work. And that’s why we survive to live another day, right?

Html BootStrap Tutorial – Template designs

Html Bootstrap Tutorial - A bootstrap templated design called Space - Multipurpose Responsive Template
You didn’t think all the templated designs were going to be free, did you?

Or this one here – Also Bootstrap

Html Bootstrap Tutorial - Not all e-commerce templates are using Shopify as their base.
A Bootstrap template capable of being used for E-Commerce

HTML Bootstrap Tutorial – Scientific Grid Template

Or perhaps you prefer a more scientific control room type grid?

A Bootstrap design using a colorful dashboard template containing a worldmap and lots of control charts and knobs. ReactJS integration already done. ReactJS used to design Facebook.
This is more of an admin type looking design and Bootstrap can integrate with ReactJS used by Facebook and others

Bootstrap set up

There are about 4 related bootstrap files that you will need to add to your page to make everything work well for this html bootstrap tutorial, though you can get away with just one if you don’t imbibe in the javascript aspect of things.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
div.jumbotron.text-center>h1{My first bootStrap Page}+p{Resize this responsive page to see the effect!}^div.container>div.row>div.col-sm-4>h3{Column 1}+p>lorem10^p>lorem15^^div.col-sm-4>h3{Column 2}+p>lorem22^p>lorem16^^div.col-sm-4>h3{Column 3}+p>lorem30^p>lorem18^^


</body>
</html>

From lines 7 to 10 are the lines that you want to copy/paste into your header to enable the full complement of Bootstrap features.

If you are prohibited from using all 4, just copy the link stylesheet at line 7 above, or just copy the entire line below ( even the parts you can’t see ).

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

Just as a refresher for many who may have missed our other session on Emmmet. Emmet has shortcuts that can write an awful lot of code for you.

By typing the exclamation mark then {tab} you can get a whole framework like this.

!{tab} results in

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

The cursor will rest on line 8 for you to enter the Title. Doing so and tabbing away will take you to a point under the start of the body tag, where you can enter more speedy Emmet short cut commands.

For the purpose of this html bootstrap tutorial, however, please copy and paste into your favorite Web IDE the entire code below that contains the Bootstrap links.

Use this html Bootstrap ready to go code

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<!-- This is where you will position your cursor in your own editor

</body>
</html>

This design below uses the very popular template that is basically a very large Jumbotron sized box underneath a menu. This jumbotron with text-centered typically has 3 boxes underneath. Sometimes those boxes are all inside a larger card group, but to be responsive, they will typically be in a row and each will be in a column with the class of col-sm-4

html bootstrap tutorial shows colorful yet tasteful design templates over at themes.bootstrap.com

We are going to look at showing you how to create a basic form of the template above.

HTML Bootstrap Tutorial – Container Class

We will start with the container class which has some useful borders

Inside the container, the first div will have the class jumbotron with the text-centered class. What you are seeing immediately below is the Emmet short cut code.

div.jumbotron.text-center>h1{My first bootStrap Page}+p{Resize this responsive page to see the effect!}

Which will expand to give you this …

<div class="jumbotron text-center">
	<h1>My first bootStrap Page</h1>
	<p>Resize this responsive page to see the effect!</p>
</div>

Which produces nothing too spectacular looking yet but we really only put in a dozen keystrokes in Emmet, not including the actual text, so.

html bootstrap tutorial shows an image of the resulting top portion of the page created with the quick Emmet shortcuts.
div.jumbotron.text-center>h1{My first BootStrap Page}+p>{Resize this responsive page to see the effect!^{tab}

The next set of Emmet shortcuts will work to produce

  • a container
  • a row element
  • a bootstrap class that fits 3 columns of the 12 available on a web page
  • h3 header
  • some lorem ipsum text
  • rinse and repeat the column construction twice more
<!-- the unexpanded Emmet code to produce the container and 3 bootstrap columns is right here -->

div.container>div.row>div.col-sm-4>h3{Column 1}+p>lorem10^p>lorem15^^div.col-sm-4>h3{Column 2}+p>lorem22^p>lorem16^^div.col-sm-4>h3{Column 3}+p>lorem30^p>lorem18^^

And when you press your {tab} key with the cursor sitting immediately after the ^^, your code will expand to look like this.

<div class="container">
	<div class="row">
		<div class="col-sm-4">
			<h3>Column 1</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, nam!</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est rem fugiat quam. Magni, illum consectetur?</p>
		</div>
		<div class="col-sm-4">
			<h3>Column 2</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente reiciendis ratione, architecto tempora officiis consequatur enim quos, asperiores blanditiis itaque, nobis sint.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis nemo, enim? Temporibus sapiente consequuntur, rem eveniet!</p>
		</div>
		<div class="col-sm-4">
			<h3>Column 3</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui fugiat numquam omnis blanditiis reiciendis a maxime in dolorum alias, adipisci autem minima quae quam animi earum, fugit. Blanditiis, voluptas, corporis.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, qui saepe illum rem explicabo laborum doloremque eum a.</p>
		</div>
	</div>
</div>

Which will in turn produce this image below

Emmet short cut keys used to produce mobile friendly html shaped with bootstrap css. 3 columns plus emmet shortcuts shown.
Produced by: div.container>div.row>div.col-sm-4>h3{Column 1}+p>lorem10^p>lorem15^^div.col-sm-4>h3{Column 2}+p>lorem22^p>lorem16^^div.col-sm-4>h3{Column 3}+p>lorem30^p>lorem18^^

If you have a real desire to look like a zen wizard while coding html/css at high speed, think closely about becoming proficient with Emmet. It is found in most major IDE’s and if your current IDE doesn’t have it, switch and switch fast.

Emmet can be an enormous time saver.

BootStrap has an enormous following and whether you choose to continue coding using Bootstrap or not, it’s a wonderful place to not only start but to enable your works of art to look like they were designed by a super star.

You don’t have to code it all yourself. There are dozens and possibly thousands of inexpensive fully done Bootstrap templates that you can use to give your project a quick makeover.

Have a look over here

Sooner or later, we all get to the point where we need made for purpose landing pages to send paid traffic to. Be happy that someone else has thought this one through for you. Custom landing pages can cost upwards of $600 to create.

And this is the end of this html bootstrap tutorial, we love Emmet, so we will be doing many more of these.

Top