BS Unit 5 My Notes

BOOTSTRAP
1) CSS Frameworks
2) Bootstrap Introduction
3) GridSystem
4) Layouts Fixed
5) Fluid
6)Tables in Bootstrap
7) Forms in Bootstrap
8) Bootstrap elements
9)Image Handling in bootstrap
CSS Frameworks
Pre-written libraries of CSS code containing styles for various components,
layouts, and utilities. They aim to standardise the process of web development by
providing a set of reusable and customizable styles that developers can easily
incorporate into their projects.
One of the important frameworks:

● Bootstrap: Developed by Twitter, Bootstrap is one of the most widely-used CSS
frameworks, known for its extensive collection of responsive components and
utilities.
BootStrap
● The primary purpose of Bootstrap is to provide a comprehensive framework for
building responsive and mobile-first websites and web applications quickly and
efficiently.
● Bootstrap offers a wide range of pre-designed UI components, including grids,
navigation bars, buttons, forms, cards, and modals.
● These components are styled and optimised for both desktop and mobile devices,
ensuring a consistent and visually appealing user experience across different
screen sizes.
● Bootstrap also includes JavaScript plugins for common functionalities such as
dropdowns, carousels, modals, tooltips, and scrollspy.
● Bootstrap is built on a responsive grid system that allows developers to create
flexible and adaptive layouts for their projects.
● The grid system consists of 12 columns, which can be easily customised and
rearranged to create complex layouts.
● Bootstrap provides predefined breakpoints and utility classes for hiding, showing,
and resizing elements based on different screen sizes, making it easy to create
responsive designs.
● Bootstrap offers extensive customization options, allowing developers to tailor the
framework to their project's specific requirements.
● Bootstrap has a large and active community of developers who contribute to its
development, maintenance, and support.
● The official Bootstrap documentation provides comprehensive guides, examples,
and code snippets to help developers learn and utilise the framework effectively.
● There are also numerous third-party resources, tutorials, and plugins available for
Bootstrap, further enhancing its usability and versatility.
Grid System of Bootstrap

● Bootstrap's grid system is a powerful layout mechanism for creating responsive
designs.
● It consists of a 12-column grid, which can be easily customised and rearranged to
create different layouts.
● Developers can use predefined classes like .col-, .col-sm-, .col-md-, .col-lg-, and
.col-xl- to specify the width of columns at various breakpoints.
● The grid system allows for easy alignment of content and ensures that layouts
adapt smoothly to different screen sizes and devices.
<div class="container">
<div class="row">
<div class="col-md-6">
Column 1
</div>
<div class="col-md-6">
Column 2
</div>
</div>
</div>
Layouts Fixed in Bootstrap

● Bootstrap offers fixed-width layouts where the container's width remains
constant regardless of the screen size.
● Fixed layouts are suitable for projects where precise control over the layout is
required, and the content is designed to fit within a specific width.
● Developers can use the .container class to create fixed-width containers or the
.container-fluid class for full-width fluid containers.
Fixed-width container
</div>
Fluid Tables in Bootstrap

● Bootstrap provides styles for creating fluid tables that adjust their width based
on the size of the viewport.
● Fluid tables are responsive by default and automatically resize to fit the available
space.
● Developers can use classes like .table and .table-responsive to create fluid and
responsive tables in Bootstrap.
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
</div>
</div>
Forms in Bootstrap
● Bootstrap offers styles and components for creating stylish and responsive forms
quickly.
● It includes predefined styles for form controls such as inputs, selects, checkboxes,
radio buttons, and buttons.
● Developers can use grid classes to organise form elements into columns and rows,
making it easy to create complex form layouts.
● Bootstrap also provides validation styles and feedback icons for form validation.
<form>
<div class="form-group">
<label for="exampleFormControlInput1">Email
address</label>
<input type="email" class="form-control"

id="exampleFormControlInput1"
placeholder="name@example.com">
</div>
<div class="form-group">
<label
for="exampleFormControlTextarea1">Example
textarea</label>
<textarea class="form-control"
id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<button type="submit" class="btn

btn-primary">Submit</button>
</form>
Bootstrap Various Elements

● Bootstrap provides a wide range of UI components and elements, including
buttons, alerts, badges, breadcrumbs, dropdowns, and navigation bars.

<button type="button" class="btn btn-primary">Primary
Button</button>


<div class="alert alert-success" role="alert">This is a
success alert.</div>

<span class="badge badge-primary">New</span>

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a
href="#">Home</a></li>
<li class="breadcrumb-item"><a
href="#">Library</a></li>
<li class="breadcrumb-item active"
aria-current="page">Data</li>
</ol>
</nav>

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle"
type="button" id="dropdownMenuButton"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu"
aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another
action</a>
<a class="dropdown-item" href="#">Something else
here</a>
</div>
</div>

<nav class="navbar navbar-expand-lg navbar-light
bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
● These elements are designed to be visually appealing and easy to use, with
consistent styles and behaviour across different browsers and devices.
● Developers can easily customise and extend Bootstrap elements using CSS and
JavaScript to suit their project requirements.
Image Handling in Bootstrap
● Bootstrap offers responsive image classes that automatically scale images to fit
the size of the viewport.
● Developers can use classes like .img-fluid to make images responsive, ensuring
they look good on all devices.
● Bootstrap also provides utility classes for controlling image alignment, shapes, and
thumbnails.
<img src="image.jpg" class="img-fluid"
alt="Responsive Image">
</div>

BS Unit 5 My Notes

Uploaded by

Copyright:

Available Formats

BS Unit 5 My Notes

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

BS Unit 5 My Notes

Uploaded by

Copyright:

Available Formats

BOOTSTRAP

One of the important frameworks:

Grid System of Bootstrap

Layouts Fixed in Bootstrap

Fluid Tables in Bootstrap

<input type="email" class="form-control"

<button type="submit" class="btn

Bootstrap Various Elements

<!-- Badges: small visual indicators used to display

<!-- Breadcrumbs: navigation elements that show the

<!-- Dropdowns: toggleable menus that allow users to

<!-- Navigation Bars: horizontal menus used for site

You might also like