<tutorialjinni.com/>

Bootstrap 4 Hello World Example

Posted Under: Bootstrap, Bootstrap 4 Tutorial For Beginners , Tutorials on Mar 3, 2020
To create your first web page using Bootstrap 4 follow the instructions. Bootstrap requires an HTML5 file type, so you need to add an HTML5 doctype declaration.The HTML5 doctype is declared in the header of the document, and the corresponding encoding is set: 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"> 
  </head>
</html>
In order to make a website developed by Bootstrap mobile-friendly and ensure proper drawing and touch-screen scaling, a viewport meta tag needs to be added to the head of the web page, as shown below: 
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Here
  • width=device-width Indicates that the width is the width of the device screen.
  • initial-scale=1 Represents the initial zoom ratio.
  • shrink-to-fit = no automatically adapt to the width of the phone screen.

Bootstrap Container class

Bootstrap 4 requires a container element to wrap the content of the website. We can use the following two container classes:
  • The .container class is used for containers of fixed width and supporting responsive layout.
  • The .container-fluid class is used for containers that are 100% wide and occupy the entire viewport.
Bootstrap Container fluid class 
<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Container Examples</title>
  <meta charset="utf-8">
  <meta name="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://cdn.tutorialjinni.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://cdn.tutorialjinni.com/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdn.tutorialjinni.com/twitter-bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
  <h1>My first Bootstrap page</h1>
  <p>Some text goes here, Like Lorem Ipsum ...</p> 
</div>
</body>
</html>
The following example shows a container that occupies the entire viewport. 
<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Fluid Container Examples</title>
  <meta charset="utf-8">
  <meta name="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://cdn.tutorialjinni.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://cdn.tutorialjinni.com/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdn.tutorialjinni.com/twitter-bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
  <h1>My first Bootstrap full width page</h1>
  <p>A container that uses .container-fluid, 100% wide, and occupies the entire viewport.</p> 
</div>
</body>
</html>


imgae