Bootsrap Notes

How To use bootsrap :-

1. Open Bootsrap in Chrome
3.Click on docs

3.Scroll Down and copy the starter template

4.Now you can use Bootsrap

Every Class
Should be in
lower-case

Classes Name Their Uses

1.jumbotron makes a broad
And we can write
In it.

2.display-1 it makes size very

large and change
Font
3.display-2 it is same as
display-1 but it
is smaller.

4.display-3 it is same as
display-2 but it
is smaller.

5.display-4 it is same as
display-3 but it
is smaller.

6.container

Container

The first border is webpage

and second border is the
container.it makes large
margin from webpage
6.container-fluid

Container - Fluid

The first border is webpage

and second border is the
container.it makes small
margin from webpage

7.p means padding it can

be write as ‘p-3’ its
limit is 5
pr means padding right it
can be write as ‘pr-3’
its limit is 5

pl means padding left it

can be write as ‘pl-3’
 its limit is 5

pt means padding top it

can be write as ‘pt-3’
its limit is 5

pb means padding bottom it

can be write as ‘pb-3’
its limit is 5

8.m means margin it can

be write as ‘m-3’ its
limit is 5
mr means margin right it
can be write as ‘mr-3’
its limit is 5
ml means margin left it
can be write as ‘ml-3’
its limit is 5

mt means margin top it

can be write as ‘mt-3’
its limit is 5

mb means margin bottom it

can be write as ‘mb-3’
its limit is 5

9.text-nowrap it display text in one line

10.text-center it display text in center
11.text-right it display text in right
12.text-left it display text in left
13.text-justify it display text in justify
14.text-uppercase it display text in uppercase
15.text-lowercase it display text in lowercase

It is the automatic colors of bootsrap.it can be use as

text-primary

It is also the automatic background of bootsrap.it can be

use as ‘bg-primary’
Tags
1.<abbr tittle=”Aptech Education ”>ACE</abbr>

It adds a comment
To text when
pointer goes on it
Output is like this.

2.<pre> In normal,we give line

tabs in editor does not
$ $ $
shows in result ,but in
$ & h <pre>the tabs spaces will
Left as space
</pre>
$ $ $
$& h
Output is like this.
3.<blockquote class="blockquote">
<p>
Video provides a powerful way to help you prove your point.
</p>
<footer class="blockquote-footer">Mahatma Gandhi Ji</footer>

Output is like this.

4.<code>Hi Everyone</code>

The text font is like a code

5.<kbd>ctrl+p</kbd>

Output is like this.

6.<mark>Hi Everyone </mark>

It mark the text.

<dt>Delhi
<dd style="text-indent:30px">Video
provides a powerful way to help you prove your
point.</dd>
</dt>
<dt>Mumbai
<dd style="text-indent:30px">Video
provides a powerful way to help you p
rove your point.</dd>
</dt>
<dt>Chennai
<dd>Video provides aprovides header,
footer, cover page,</dd>
</dt></dl>
Result
it makes like a table.

<pre class="pre-scrolable"
style="height:100px;width: 500px;">
Video provides a powerful way to help you
prove your point.
When you click footer, cover page, and text box
designs that complement each other.
</pre>
It makes scrollable bars not around to the
webpage border.it is use to write code.

Classes of images
<img src="apple watch.jpg" width="500px"
height="500px" class="img-thumbnail">
It make border around the image.

<img src="youtube.png" width="500px"

height="500px" class="rounded">
It makes image edges light round.

<img src="google1.png" width="500px"

height="500px" class="rounded-circle">
It makes the image shape into circle

<ul class="list-unstyled">
<li>Delhi</li>
<li>Mumbai</li>
<li>Chennai</li>
<li>Hisar</li>
<li>Chandigarh</li>
</ul>
It removes the dot around the list

Grid :-
<div class="row">
<div class="col-lg-6 bg-warning">
<p>Video provides a powerful way to help you
prove your point.</p>
Total there are 12 columns in a row so,6

</div> means 6 half of this row and lg means large

it is a term to describe the size of screen
<div class="col-lg-6 bg-secondary">
<p>To make your document look professionally
produced, Word provides header</p>
</div>
</div>

Output is like this

Ques-1 Make a grid like this :-

More About Video

<div class="container">
<h1 align="center" class="jumbotron" >Hello World!</h1>
<div class="row">
<div class="col-lg-4 bg-warning">
<p>
To make your document look professionally produce
</p>
</div>
<div class="col-lg-4 bg-secondary ">
<p>
To make your document look professionally produced, Word provides header
</p>
</div>
<div class="col-lg-4 bg-success ">
<p>
To make your document look professionally produced
</p>
</div>
 <div class="col-lg-8 col-sm-9 bg-dark text-light ">
<p>
To make your document look professionally produced, Word provides Themes and
styles
</p>
</div>
<div class="col-lg-4 col-sm-3 bg-danger ">
<p>
For example, you can add a matching cover page, header, and sidebar.
</p>
</div>

Ques-2 Make a grid like this :-

Result :-
<div class="row">
Between the paragraph
<div class="col-lg-4 bg-warning"> we have to type to
<p>
increase its length
</p>
</div>
without typing in it.Its
<div class="col-lg-4"> length will be small.
<div class="row bg-success">
<p></p>
there is no space so I
</div> not write text in it
<div class="row bg-primary">
<p></p>
</div>
</div>
<div class="col-lg-4">
<div class="row bg-sencondary">
<p></p>
</div>
<div class="row bg-dark text-light">
<p></p>
</div>
<div class="row bg-warning">
<p></p>
</div>
<div class="row bg-danger">
<p></p>
</div></div></div>

Table Classes :-
1.table it will automatically
Arrange the table

When we take
2.table-hover
mouse on table it will
Highlight the
hovered line
On small device it
3.table-responsive
make a scrollable bar
to scroll the
table.without table-
responsive it make
table size small
 4.table-stripped
It make line of
table stripped

A normal Table with all the upperlined tags

<table text-align="center" class="table table-hover table-responsive table-striped">

<caption>Student Details</caption>

<thead>

<tr>

<th> SR No. </th>

<th> Name </th>

<th> Class </th>

</tr>

</thead>

<tbody>

<tr>

<td>4</td>

<td>Vinay</td>

<td>9th</td>

</tr>

<tr>
<td>4</td>

<td>Vinay</td>

<td>9th</td>

</tr>

<tr>

<td>4</td>

<td>Vinay</td>

<td>9th</td>

</tr>

<tr>

<td>4</td>

<td>Vinay</td>

<td>9th</td>

</tr>

<tr>

<td>4</td>

<td>Vinay</td>

<td>9th</td>

</tr>

</tbody>

</table>

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

<h2>Button Outline</h2>
<button type="button" class="btn
<button type="button" class="btn
<button type="button" class="btn
<button type="button" class="btn
<button type="button" class="btn
<button type="button" class="btn
<button type="button" class="btn
<button type="button" class="btn
btn-outline-primary">Primary</button>
btn-outline-secondary">Secondary</button>
btn-outline-success">Success</button>
btn-outline-info">Info</button>
btn-outline-warning">Warning</button>
btn-outline-danger">Danger</button>
btn-outline-dark">Dark</button>
btn-outline-light text-dark">Light</button>

<h2>Button Sizes</h2>
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
 <h2>Block Level Buttons</h2>
<button type="button" class="btn btn-primary btn-block">Button 1</button>
<button type="button" class="btn btn-default btn-block">Button 2</button>

<h2>Large Block Level Buttons</h2>

<button type="button" class="btn btn-primary btn-lg btn-block">Button
1</button>
<button type="button" class="btn btn-default btn-lg btn-block">Button
2</button>

<h2>Small Block Level Buttons</h2>

<button type="button" class="btn btn-primary btn-sm btn-block">Button
1</button>
<button type="button" class="btn btn-default btn-sm btn-block">Button
2</button>

<h2>Button States</h2>
<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled
Primary</button>
<a href="#" class="btn btn-primary disabled">Disabled Link</a>
<h2>Button Elements using a, button, input</h2>
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">CLIENT Button</button>
<button class="btn btn-info">SERVER Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">

Alerts :-

<div class="alert alert-primary">

<strong>Primary!</strong> Indicates an important action.

</div>
<div class="alert alert-secondary">
<strong>Secondary!</strong> Indicates a slightly less important action.
</div>
<div class="alert alert-dark">
<strong>Dark!</strong> Dark grey alert.
</div>
 <div class="alert alert-success">
<a href="#" class="close" data-dismiss="alert" >&times;</a>
<strong>Success!</strong> This alert box could indicate a successful or
positive action.
</div>
<div class="alert alert-info" id="aalert">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
<strong>Info!</strong> This alert box could indicate a neutral informative
change or action.
</div>
<div class="alert alert-warning">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
<strong>Warning!</strong> This alert box could indicate a warning that might
need attention.
</div>

"& times;" (×) is an HTML entity that is the

preferred icon for close buttons, rather than
the letter "x".