Page 184 - CITS - Computer Software Application -TT

COMPUTER SOFTWARE APPLICATION - CITS

Bootstrap styling essentials and its use. Explain

typography, floats, flex, Alignment, borders, position
of elements shadow and visibility in bootstrap

Example:
Creating a table with toasts and tooltips:
These examples showcase professional and interactive UI components that enhance user experience. As you
incorporate these elements into your PHP projects, remember to tailor them to suit your specific requirements.
Bootstrap
Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter, and released as an open source product
in August 2011 on GitHub. Bootstrap is a free front-end framework for faster and easier web development. It
includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals,
image carousels and many other, as well as optional JavaScript plugins. It also gives you the ability to easily create
responsive designs. Responsive web design is about creating web sites which automatically adjust themselves to
look good on all devices, from small phones to large desktops.
Uses of Bootstrap
• Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap
• Responsive features: Bootstrap’s responsive CSS adjusts to phones, tablets, and desktops
• Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework

• Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer,
Edge, Safari, and Opera
Bootstrap 3, which was released in 2013. However, we also cover newer versions; Bootstrap 4 (released 2018)
and Bootstrap 5 (released 2021). Bootstrap 5 is the newest version of Bootstrap; with new components, faster
stylesheets, more responsiveness etc. It supports the latest, stable releases of all major browsers and platforms,
Bootstrap 3 and Bootstrap 4 is still supported by the team for critical bug fixes and documentation changes, and
it is perfectly safe to continue to use them. However, new features will NOT be added to them.
1 Typography: Typography refers to the style, appearance, and arrangement of text on a page. Bootstrap
provides a comprehensive set of typographic styles through its utility classes. These classes allow you to
easily style text elements such as headings, paragraphs, lists, and more. For example, you can use classes
like .h1, .lead, .text-muted, .font-weight-bold, etc., to apply various typographic styles to your content.
2 Float: Bootstrap’s float classes (float-left and float-right) are used to float elements to the left or right within
their parent containers. This is commonly used for creating multi-column layouts where elements are aligned
side by side.

3 Flex: Bootstrap 4 introduced Flexbox-based layout utilities that allow for more flexible and responsive layouts.
With Flexbox utilities, you can easily create complex layouts and control the alignment, direction, order, and
sizing of elements within a container. Classes like .d-flex, .justify-content-*, .align-items-*, .flex-grow-*, etc.,
enable you to manipulate the layout of elements using Flexbox.
4 Alignment: Bootstrap provides alignment utilities to control the alignment of content within its containers.
Classes like .text-left, .text-center, .text-right, .align-items-*, .justify-content-*, etc., allow you to align text, inline
elements, and flex items both horizontally and vertically.
5 Borders: Bootstrap offers border utilities to add or remove borders from elements. You can use classes like.
border, .border-top, .border-bottom, .border-left, .border-right, .rounded, .rounded-*, etc., to customize the
borders of elements. Additionally, Bootstrap provides responsive border color and border radius utilities.
6 Position of Element: Bootstrap provides positioning utilities to control the position of elements within their
containers or on the page. Classes like. position-static, .position-relative, .position-absolute, .position-fixed,
.position-sticky, etc., enable you to specify the positioning behavior of elements. These utilities are particularly
useful for creating sticky headers, footers, or sidebars.
7 Shadow: Bootstrap includes shadow utilities to add shadows to elements. You can use classes like. shadow,
.shadow-sm, .shadow-lg, etc., to apply different levels of shadow to elements. These utilities are handy for
adding depth and dimension to elements, such as cards, modals, or buttons.

171

CITS : IT&ITES - Computer Software Application - Lesson 47 - 62