The first step in starting with bootstrap, is to include the following header/template page. Note that the bootstrap.js entry must be after the jqeury.js entry.
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
</body>
</html>
Basic Grid Layout
Bootstrap recommends using the <div> tags with the .container — .row — .col-md-4 (adding to 12 columns). I had trouble seeing a whole lot of benefits of this as compared to using tables. Here is the div example (colors and borders just added to show layout). I always assumed you could also very well use the <table>, <tr>, <th> and <td> standard HTML to grid up your page. See an example here. (table-hover and border just added to show layout). But, if you notice – the 3 columns for the table option are not proportional to the colspan. This is the biggest reason for using the <div> variant.
I have the absolute basic <div> and <table> grid shown below.
<div class="container"> <!-- or container-fluid -->
<div class="row">
<div class="col-md-12">top row</div>
</div>
<div class="row">
<div class="col-md-3">left column</div>
<div class="col-md-6">center column</div>
<div class="col-md-3">right column</div>
</div>
<div class="row">
<div class="col-md-12">bottom row</div>
</div>
</div>
<div class="container"> <!-- or container-fluid -->
<table class="table">
<tr>
<td colspan=12>top row</td>
</tr>
<tr>
<td colspan=3>left column</td>
<td colspan=6>center column</td>
<td colspan=3>right column</td>
</tr>
<tr>
<td colspan=12>bottom row</td>
</tr>
</table>
</div>
Navigation bar
Bootstrap using the <nav> tag with the .navbar class to define a navigation bar. See this page for the various navigation bar patterns. The page is designed with each subsequent entry built on the previous one. See the source code of the page to see additions from one entry to another. Here is a bare minimum navigation bar (button style).
With buttons and dark background<br>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="btn btn-danger navbar-btn" href="#">Link</a>
</li>
<li class="nav-item">
<a class="btn btn-success navbar-btn" href="#">Link</a>
</li>
<li class="nav-item">
<a class="btn btn-warning navbar-btn" href="#">Link</a>
</li>
</ul>
</nav>