Bootstrap

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>
ApplicationDescription
Grid BS4Rows and columns layout management
border BS4side borders and managing colours
Alert BS4Different Classes with examples
Breadcrumb bs4Different Classes with examples
Font ColourTypes of font colour class & custome class
Background ColourBackground Colour classes
FormBootstrap Form types
LISTBootstrap List with link and badges
TableBootstrap Table width different style
Badges & LabelsBadges & Labels with code Generate using different style
PaginationBootstrap Pagination classes with database records display
TextboxGenerate Code for Textbox by changing size , width
WellContent 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

Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com









    Most Popular JQuery Scripts

    1

    Two dependant list boxes

    2

    Calendar with Date Selection

    3

    Data change by Slider

    4

    Show & Hide element


    JQuery Video Tutorials




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer