Bootstrap Tutorials
Bootstrap provides responsive layout, utility classes and ready-made interface components. The plus2net jQuery section contains both Bootstrap 4 tutorials and several older Bootstrap 3 URLs kept for learners maintaining legacy code.
well, label, glyphicon or btn-default into a Bootstrap 4 page.
Bootstrap 4 Setup Top ↑
The shared plus2net template already loads the Bootstrap/jQuery stack. A standalone Bootstrap 4 page normally needs the Bootstrap CSS plus its JavaScript dependencies once only.
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="alert alert-primary" role="alert">
Bootstrap 4 alert
</div>
Bootstrap Tutorials in This Section Top ↑
| Tutorial | What it covers |
|---|---|
| Bootstrap 4 Alerts | Current Bootstrap 4 alert classes and dismissible alerts. |
| Bootstrap 4 Buttons | Button styles, outlines, sizes and block buttons. |
| Bootstrap 4 Borders | Border sides, colors, radius and utilities. |
| Bootstrap 4 Grid | Containers, rows, columns and responsive breakpoints. |
| Bootstrap 4 Breadcrumb | Breadcrumb structure and styling. |
| Bootstrap Typography | Text alignment, weight, display headings and responsive text utilities. |
| Bootstrap Text Colors | Contextual text-color utilities. |
| Bootstrap Background Colors | Contextual background utilities. |
| Bootstrap Forms | Form layout and jQuery submission patterns. |
| Bootstrap Form Inputs | Textboxes, textarea, select, radio, checkbox and file controls. |
| Bootstrap Tables | Striped, bordered, hover and responsive tables. |
| Bootstrap List Groups | List-group examples and active/disabled items. |
| Bootstrap Badges | Badge styles and count indicators. |
| Bootstrap 3 Alerts (Legacy) | Historical alert classes and old dismissible markup. |
| Bootstrap 3 Wells (Legacy) | Historical well component; use cards/utilities in newer Bootstrap. |
Interactive Code Generators Top ↑
- Bootstrap 4 Button Generator
- Badge Generator
- Legacy Label Generator
- Textbox Generator
- Breadcrumb styling example
Bootstrap and jQuery Top ↑
Use Bootstrap classes for styling/layout and jQuery for application behavior such as form submission, dynamic class changes or loading data. Avoid loading jQuery or Bootstrap a second time inside individual tutorial pages.
Original Source Examples Retained for Migration Reference Top ↑
Original example 1
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous">Original example 2
<html>
<head>
<title>(Type a title for your page here)</title>
<META NAME="DESCRIPTION" CONTENT=" ">
<META NAME="KEYWORDS" CONTENT=" ">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous">
</head>
<body >
<div class="alert alert-primary alert-dismissible fade show" role="alert">
<strong>Welcome to plus2net!</strong> Read here about web programming .
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</body>
</html>Original example 3
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="../dir_name/custome.css">Original example 4
.text-danger1{
color: #FF1414;
}Original example 5
<p class='text-right'>Right aligned </p>
<p class='text-left'>Left aligned </p>
<p class='text-center'>Center aligned</p>
<p class='text-justify'>Justified</p>
<p class='text-nowrap'>No wrap text.</p>Original example 6
<div class='float-left'>I ma at left</div>
<div class='float-right'>I am at right...</div>Original example 7
I ma at left
I am at right...Original example 8
<div class=text-left><button type='button' class='btn btn-primary'>Left</button></div>
<div class=text-right><button type='button' class='btn'>Right</button></div>
<div class=text-center><button type='button' class='btn btn-info'>Center</button></div>Additional Original Learning Routes Top ↑
Complete Bootstrap URL Index Top ↑
Continue Learning jQuery
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
