Scribd
Upload
49 views

Lesson - 04 Web Development

Bootstrap is a powerful front-end framework for building responsive mobile-first sites. It includes HTML and CSS templates for common components like buttons, navigation, forms, and grids. Bootstrap uses a 12-column responsive grid system and has utilities for typography, forms, buttons, images, and more. Originally created by developers at Twitter in 2010, Bootstrap is now one of the most popular HTML, CSS, and JS frameworks for developing responsive, mobile-first projects on the web.

Uploaded by

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

Lesson - 04 Web Development

Bootstrap is a powerful front-end framework for building responsive mobile-first sites. It includes HTML and CSS templates for common components like buttons, navigation, forms, and grids. Bootstrap uses a 12-column responsive grid system and has utilities for typography, forms, buttons, images, and more. Originally created by developers at Twitter in 2010, Bootstrap is now one of the most popular HTML, CSS, and JS frameworks for developing responsive, mobile-first projects on the web.

Uploaded by

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

Bootstrap (CSS Framework) Prepared by: DR. WELLANIE M.

MOLINO
Technological University of the Philippines
What is Bootstrap?
❑ Bootstrap is a powerful front-end framework for faster and easier web development. It includes
HTML and CSS based design templates for creating common user interface components like
forms, buttons, navigations, dropdowns, alerts, modals, tabs, accordions, carousels, tooltips,
and so on.

❑ Bootstrap gives you ability to create flexible and responsive web layouts with much less efforts.

❑ Bootstrap was originally created by a designer and a developer at Twitter in mid-2010. Before
being an open-sourced framework, Bootstrap was known as Twitter Blueprint.
Grid System

Bootstrap 4 Grid Classes

There are 5 classes in Bootstrap 4 grid system.

.col-xs extra small devices


.col-sm- small devices
.col-md- medium devices
.col-lg- large devices
.col-xl- xlarge devices
Container and container-fluid classes

The .container class is the fixed width container.


That does not mean it is not responsive. It is
responsive; however, it is fixed based on screen
size.

The container-fluid class will take the full width of


the viewport. simply applies the width: 100%
instead of different width for different viewport
sizes.
Typography

Default styles applied to the body of the document


Bootstrap 5 Text Sizes
• In Bootstrap 5, the size of the
typography font is based on a rem
unit of measurement which is
relative to the root HTML element.
• Rem stands for “root em” because it
calculates the size based on the size
of the root of the document or body
tag.

• So Bootstrap’s global default font-


size is 16px.

1rem = 16px

• Headings have margin-bottom:


.5rem added and paragraphs margin-
bottom: 1rem for easy spacing.
Bootstrap: Button

o .btn .btn-default – Standard button


o .btn .btn-primary – Identifies the primary action in a set of buttons
o .btn .btn-success – Indicates a successful or positive action
o .btn .btn-info – Contextual button for informational alert messages
o .btn .btn-warning – Indicates caution should be taken with this action
o .btn .btn-danger – Indicates a potentially negative action
o .btn .btn-link – De-emphasize a button by making it look like a link while maintaining button behavior
Bootstrap: Jumbotron
Bootstrap: Glyphicons

Example:
<span class="glyphicon glyphicon-certificate"></span>
Bootstrap: Tables
Tag Description
<table> Used to display the given data in the tabular
format by getting all the elements together.

<thead> thead is a container element that has header Example:


rows(<tr>). <table class="table table-striped">
<tr>
<tbody> tbody is a container element that has table
rows(<tr>) in the table body. <th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<tr> It depicts table cells like <th> or <td> </tr>
appearing in a single row. <tr>
<td>Mark</td>
<td> It is a default cell of table. <td>Otto</td>
<th> th is a column or row cell of the table that </td>@mdo</td>
should be placed in <thead> only. </tr>
…
</table>
<caption> This tag gives information about the table.
Bootstrap: Forms

All the individual form controls, by default, receives some global styling with Bootstrap. All textual
<input>, <textarea>, and <select> elements with .form-control are set to width 100% by default. Wrap labels
and controls in .form-group for optimum spacing.

Bootstrap provides three types of Layouts.

❑ Bootstrap Vertical Form ( it’s default form and no need to specify other type )
❑ Bootstrap Horizontal Form ( add .form-horizontal class to <form> tag )
❑ Bootstrap Inline form ( add .form-inline class to <form> tag )

Steps
❑ Always wrap the content in form tag.
❑ To improve form accessibility always set <form> tag attribute role="form" eg: <form role="form">
❑ Place all the form controls in .form-group for proper spacing between form elements. eg: <div class="form-group">
Border – borders, colors and radius
Flex Layout
• Flex utility can be used to manage the layout, alignment, grid columns, navigation and other components
of the page. It makes easy to design layout structure without using float or positioning.

• In order to use the flex utilies you need to have a flex container. This is an element with the class .d-flexor
.d-inline-flex.
Flex Layout

• Responsive variations also exist for .flex-direction.


• Responsive variations also exist for .justify-content.
• Responsive variations also exist for .align-items.
• Responsive variations also exist for .flex-wrap.
• Responsive variations also exist for order.

https://www.freetimelearning.com/bootstrap-4/bootstrap-4-flex.php
REFERENCES
https://www.javatpoint.com/bootstrap-form
https://bootstrapshuffle.com/classes
https://www.tutorialspoint.com/bootstrap
https://www.w3schools.com/bootstrap/

You might also like