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 container, spanning 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>
