Scribd
Upload
5 views3 pages

Bootstrap 1

The document provides an overview of component libraries for web design, focusing on Bootstrap as a free, open-source, and cross-platform library that includes HTML, CSS, and JavaScript components. It outlines the setup process for Bootstrap in a project, including necessary installations and linking stylesheets and scripts. Additionally, it covers Bootstrap layout components, the box model for margins and padding, and mentions the transition from Bootstrap-4 to Bootstrap-5.

Uploaded by

pravipundir003
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views3 pages

Bootstrap 1

The document provides an overview of component libraries for web design, focusing on Bootstrap as a free, open-source, and cross-platform library that includes HTML, CSS, and JavaScript components. It outlines the setup process for Bootstrap in a project, including necessary installations and linking stylesheets and scripts. Additionally, it covers Bootstrap layout components, the box model for margins and padding, and mentions the transition from Bootstrap-4 to Bootstrap-5.

Uploaded by

pravipundir003
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

Component Libraries for Web Design

=============================
- A component means a web template that contains
a) presentation
b) styles
b) logic
- Presentation is designed in HTML
- Styles are defined with CSS.
- Logic by using script [JavaScript, TypeScript]
- There are various component libraries for web development

a) Bootstrap
b) Twitter Bootstrap
c) React Material
d) Angular Material
e) Telerik
f) DevExpress
g) jQuery UI etc..

Bootstrap
=======
- It is a component library.
- It is free and open source.
- It is cross platform
- It also provide premium service.
"www.getbootstrap.com;
- It provides
a) HTML code snippets [presentation]
b) CSS classes [styles]
c) jQuery Attributes [functionality]

<div class="btn btn-primary" data-bs-toggle="">

</div>

Setup Environment for Bootstrap in Project


=================================
1. Install Bootstrap CSS
> npm install bootstrap --save

2. Install Bootstrap Icons


> npm install bootstrap-icons --save

3. Install jQuery
> npm install jquery --save

To use bootstrap and all its components in Web Page:


- Link the following style sheets in head section
- bootstrap.css
- bootstrap-icons.css

- Link the following scripts in body section


- jquery.js
- bootstrap.bundle.js
Ex:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Demo</title>
<link rel="stylesheet"
href="../node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet"
href="../node_modules/bootstrap-icons/font/bootstrap-icons.css">
</head>
<body>

<script src="../node_modules/jquery/dist/jquery.js"></script>
<script
src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Demo</title>
<link rel="stylesheet"
href="../node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet"
href="../node_modules/bootstrap-icons/font/bootstrap-icons.css">
</head>
<body>
<h2 class="bg-danger border border-4 border-white text-center text-white p-3
rounded rounded-4">Bootstrap</h2>
<p>UI Design Components</p>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script
src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
</html>

Note: CSS files have no order dependency.


JavaScript files have order dependency.
Bootstrap uses a font called "Roboto"

Bootstrap Layout
==============
1. Containers
.container
.container-sm
.container-lg
.container-xl
.container-md
.container-fluid

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Demo</title>
<link rel="stylesheet"
href="../node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet"
href="../node_modules/bootstrap-icons/font/bootstrap-icons.css">
<style>
.container-fluid{
border:2px solid red;
}
</style>
</head>
<body class="container-fluid">
<h2>Bootstrap</h2>
<p>UI Design Components</p>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script
src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
</html>

2. Box Model

Margins
=======
.m margin
{s} left
{e} right
{t} top
{b} bottom

.ms
.me
.mt
.mb

-{1 to 4}

.ms-4
.mt-4
.mb-3

<h2 class="mt-2 mb-4 ms-4">Bootstrap</h2>


<p class="ms-4">UI Design Components</p>

Padding
======
.p
.p{s,e,t,b}
.p{s,e,t,b}-{1 to 4}

.pt-2
<h2 class="mt-2 mb-4 ms-4">Bootstrap</h2>
<p class="ms-4 ps-4 pt-4 pb-3 border border-primary ">UI Design
Components</p>

We are learning Bootstrap-5


Previous Version is Bootstrap-4

You might also like