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>
<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>
<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/
About kahelath
No comments