How to Use Bootstrap Framework in Web page for responsive
In Bootstrap Example you will see how to add HTML 5 doctype Element and CSS properties.
HTML Web pages add the HTML 5 doctype at the starting of the web page with correct character set and the lang attribute
Bootstrap Framework is mobile friendly for all media screen devices: Here in web pages Bootstrap 3 is designed to be responsive web pages and mobile devices.
How to use Bootstrap with responsive fixed width container
Method: I (use Directly MAXCDN Bootstrap URL)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <title>How to use Bootstrap?</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Add style page here --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> </head> <body> <div class="container"> <h1> Heading Content</h1> <p>Write your Paragraph text here..</p> </div> <!-- Add Javascript page here --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </body> </html> |
<meta> tag inside the <head> the element for proper rendering and touch zooming.|
1 |
<meta name="viewport" content="width=device-width, initial-scale=1"> |
"width=device-width" is used to the width of the pages to follow the media screen device width, it varies according to the media screen devices.consequently, The
initial-scale=1 in meta tag part is used to set the initial zoom level when the web page is first loaded by the browser (firefox, chrome, safari, etc.)Containers: In Bootstrap container class is used to wrap the site contents. There is the following two type of container classes.
The .container class is used to provides a responsive fixed width container.
The .container-fluid is used to class provides a full-width container, spanning the entire width of the viewport.
Method: II (use Bootstrap File Sources)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html lang="en"> <head> <title>How to use Bootstrap?</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Add style page here --> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="col-md-6" style="background-color: #efefef; text-align:center;"> <h1> Heading Content</h1> <p>Write your Paragraph text here..</p> </div> <div class="col-md-6" style="background-color:lightyellow; text-align:center;"> <h1> Heading Content</h1> <p>Write your Paragraph text here..</p> </div> </div> <!-- Add Javascript page here --> <script type="text/javascript" src="js/bootstrap.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> </body> </html> |
as a result In the above example Method-II, first, you will download the Bootstrap file source code from the main
bootstrap primary domain. Bootstrap Download (click here) and follow as mention in the below image.
therefore, after downloading the file when you open bootstrap framework file you will find CSS folder, js folder, image folder, fonts folder.
therefore folder contains respective file such as in CSS folder contain a CSS file and js folder contain js file
Furthermore, next step you will add the CSS file after meta tag such as:-
|
1 2 |
<!-- Add style page here --> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> |
therefore, here rel indicate you added stylesheet and type indicate the text/css file and href indicate the CSS
as a result, the file path (here you will add the CSS file path) as above example.
as a result, you will see in the CSS path the bootstrap.css file exit in CSS folder so the path will be css/bootstrap.css
therefore, javascript file added before the close tag of the body as given below
|
1 2 |
<!-- Add Javascript page here --> <script type="text/javascript" src="js/bootstrap.js"></script> |
About Author
