Header Ads

ad728

Learn bootstrap 4 basic


Introduction


Bootstrap 4 is the world’s most popular framework for building responsive website Layout, mobile view and tablet view. Bootstrap 4 is an open source toolkit developing with HTML, Js, and CSS


Download Bootstrap 4


If you want download bootstrap 4 latest version visit link below and start your own project.

CSS

Copy  the stylesheet <link> into your <head?
Copy and paste below link in your HTML files.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

JS files

Use  jQuery’s slim build  All version is also supported.

Copy and paste below links in your HTML files.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


Which components are requiring for JavaScript

Start your template

Copy below code and paste HTML file

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS files-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, John Smith!</title>
  </head>
  <body>
    <h1>Hello, John Smith!</h1>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Responsive meta tag
Bootstrap 4 is best for mobile this is best proper rendering and touch zooming for all mobile devices, 

Bootstrap 4 Layout


<div class="jumbotron">
  <h1>My First Heading H1 </h1>
  <p>Resize this responsive page to see the effect!</p> 
</div>
<div class="container">
  
<div class="row">
    
<div class="col-sm-4">
      
<h3>First Box</h3>
      <p>Lorem ipsum dolor…</p>
      <p>Paragraph…</p>
    </div>
    
<div class="col-sm-4">
      
<h3>Second  Box</h3>
      <p>Lorem ipsum dolor…</p>
<p>Paragraph…</p>
    </div>
    
<div class="col-sm-4">
      
<h3>Third Box</h3>
      <p>Lorem ipsum dolor…</p>
      <p>Paragraph…</p>
    </div>
  
</div>
</div>

HTML5 doctype
Bootstrap 4 requires the use of the HTML5 doctype. If you not use it your design is very funky incomplete styling, if you include it  then you design is ok
Copy and paste in your HTML files
<!doctype html>
<html lang="en">
  ...
</html>


Bootstrap 4 Buttons


<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>


Bootstrap 4 Dropdown Buttons


 <div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Dropdown button
  
</button>
  
<div class="dropdown-menu">
    
<a class="dropdown-item" href="#">Link 1</a>
    
<a class="dropdown-item" href="#">Link 2</a>
    
<a class="dropdown-item" href="#">Link 3</a>
  
</div>
</div>





Download All Bootstrap theme visit Link below.


https://startbootstrap.com/template-categories/all/

No comments

Post Bottom Ad

ad728