Bootstrap style using JQuery

What is Bootstrap?

It is a CSS , JavaScript framework used for creating a website.

Where it is used ?

It is a free & used as a front end tool for mobile friendly design. You can download boostrap framework and use or use CDN ( Content Delivery Network ) to integrate bootstrap to your web pages. It ads style and functionality to your pages by providing ready to use classes and scripts.

How to use Bootstrap

Use this link to add the .css file to your page. Keep this link inside your <HEAD> tag.

<link rel="stylesheet" 
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
 crossorigin="anonymous">

This will fulfil your website basic requirements like layout, font style, background colour etc. Even you can display alert boxes. But to add a dismiss button to alert window we need some JavaScript functionality. This dependency on JavaScript we can add by including JQuery in our page.

Check this code , bootstrap css is linked inside <HEAD> tag. We are displaying one alert box with one dismiss button. This dismiss button functionality is not there and we can’t close the alert box as JQuery is not included.

<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>

Application	Description
Grid BS4	Rows and columns layout management
border BS4	side borders and managing colours
Alert BS4	Different Classes with examples
Breadcrumb bs4	Different Classes with examples
Font Colour	Types of font colour class & custome class
Background Colour	Background Colour classes
Form	Bootstrap Form types
LIST	Bootstrap List with link and badges
Table	Bootstrap Table width different style
Badges & Labels	Badges & Labels with code Generate using different style
Pagination	Bootstrap Pagination classes with database records display
Textbox	Generate Code for Textbox by changing size , width
Well	Content with inset effect

adding your own style to bootstrap

Link your custome.css page like this inside your head section.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="../dir_name/custome.css">

One sample custome.css page is here

.text-danger1{
color: #FF1414;
}

Alignment Text

<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>

I am Right aligned

I am at Left

I am at center

using float-right or float-left

<div class='float-left'>I ma at left</div>
<div class='float-right'>I am at right...</div>

Output is here


I ma at left
I am at right...

Alignment of Button

<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>

JQuery Font Colour

Most Popular JQuery Scripts
1	Two dependant list boxes
2	Calendar with Date Selection
3	Data change by Slider
4	Show & Hide element