Creating First Web Page With Bootstrap

Lets look at the short video below to catch up from our last blog.. i hope this will help. dont get confused as yet the video is basically talking about most of the things we will cover on Bootstrap

Following this video can help achieve knowledge of the Basics of Bootstrap. i will take you through the work i have prepared which includes most of the of the work covered on the video above. after gooing through this work you can follow the video just to test your grasping ability.

Guide To Creating HTML Website

HTM DOCTYPE

Always Add HTML Doctype. Bootstrap Uses HTML Elements and CSS properties that require the HTML5 DOCTYPE. Always include the HTML DOCTYPE  at the beginning of the page, along with the lang attribute and the correct charset(chatracter set).  

What do we use charset for:

ASCII defined 128 different alphanumeric
characters that could be used on the internet: numbers (0-9), English letters
(A-Z), and some special characters like ! $ + – ( ) @ < > . (To display
an HTML page correctly)

<!DOCTYPE html>
<html lang=”en”>
  
<head>
    
<meta charset=”utf-8″>
  
</head>
</html>

Bootstrap is Mobile First

The new version of Bootstrap (Bootstrap 3) it is designed to be responsive to mobile devices. Mobile-first styles are part of the core framework. to ensure proper rendering and touch-zooming the following tag must be added inside the <head> element.

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device.)

The initial-scale=1 Part Sets the initial zoom level when the page is first loaded by the browser.

 

 

 

Bootstap Containers

Bootstrap also require a containing elements to wrap site contents. There are two container classes to choose from:

1. The container  class provides a responsive fixed width container

2. The .container-fluid  class provides a full width containerspanning the entire width of the viiewport

.container

.container-fluid

 

The following example shows the code for a basic Bootstrap page
(with a responsive fixed width container):

container Example

<!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/3.4.0/css/bootstrap.min.css”>
  
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
  
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js”></script>
</head>
<body>

<div class=”container”>
  
<h1>My First Bootstrap Page</h1>
  
<p>This is some text.</p>
</div>
</body>
</html>

Copy And Paste the example code to your Code Editor and, save the changes. go to the place where you save your project and open the file with browser of your choice. i have opened mine with google chrome and the results looks like the picture below.

The following shows code for a basic bootstrap page with full width container

span 1

span 1

span 1

span 1

span 1

span 1

span 1

span 1

span 1

span 1

span 1

span 1

 span 4

 span 4

 span 4

span 4

span 8

span 6

span 6

span 12

Bootstrap allows a grid system of up 12 coloumn you can div the grid into different block as long as it adds up to exatly 12 as shown in the picture above.

Container-fluid Example

<div class=”container-fluid”>
  
<h1>My First Bootstrap Page</h1>
  
<p>This is some text.</p>
</div>

The .container class is the fixed width container. That does not mean it is not responsive. It is responsive; however, it is fixed based on screen size. The screen sizes include:

  • xs for extra small devices (used for less than 768 e.g smart phones, mobile etc.)
  • sm for small screens (From 768 pixels and up e.g. tablets)
  • md for the medium screen (>= 992 pixels. Desktops/Laptops)
  • lg for large screens (>= 1200. Pixels e.g. large desktops)

Bootstrap Grid System

Bootstrap’s grid system allows up to 12 columns across the page.

If you do not want to use all 12 columns individually, you can
group the columns together to create wider columns:

Bootstrap’s grid system is responsive, and the columns will re-arrange
automatically depending on the screen size.

Grid Classes as mentioned above

The Bootstrap grid system has four classes:

  • xs (for phones – screens less than 768px wide)
  • sm (for tablets – screens equal to or greater than 768px
    wide)
  • md (for small laptops – screens equal to or greater than
    992px wide)
  • lg (for laptops and desktops – screens equal to or greater
    than 1200px wide)

The classes above can be combined to create more dynamic and
flexible layouts.

Basic Structure of a Bootstrap Grid

The following is a basic structure of a Bootstrap grid:

<div class=”row”>            à First  create a row
  
<div class=”col-*-*”></divà them add the number of desired
columns
  
<div class=”col-*-*”></div>
</div>
<div class=”row”>
  
<div class=”col-*-*”></div>
  
<div class=”col-*-*”></div>
  
<div class=”col-*-*”></div>
</div>
<div class=”row”>
  …
</div>

Note that numbers in .col-*-* should always
add up to 12 for each row.

Three Equal Columns Example

<body>

                <div
class=“container-fluid”>

             <h1>Hello World!</h1>

             <p>Resize the browser window to see the effect.</p>

             <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>

                  <div
class=“row”>

                    <div
class=“col-sm-4”
style=“background-color:lavender;”>.col-sm-4</div>

  <div
     class=“col-sm-4”
     style=“background-color:lavenderblush;”>.col-sm-4

  </div>

   <div
     class=“col-sm-4”
     style=“background-color:lavender;”>.col-sm-4

   </div>

                  

  </div>

    </div>

 </body>

Two Unequal Columns Example

<body>

                        <div
class=“container-fluid”>

                          <h1>Hello World!</h1>

                          <p>Resize the browser window to see the effect.</p>

                          <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>

                          <div
class=“row”>

     <div
class=“col-sm-4”
style=“background-color:lavender;”>.col-sm-4

</div>

    <div
class=“col-sm-8”
style=“background-color:lavenderblush;”>.col-sm-8

   </div>

 </div>

  </div>

</body>

Leave a Reply