Bootstrap
CITS3403 Agile Web Development
2023 Semester 1
Unit Coordinator: Tim French
Challenges with CSS
• CSS is a powerful language for creating and
implementing a presentation style for a
website/application.
• However, there are a number of limitations:
– Some simple operations, like centering
pictures or text can be unintuitive.
– It is difficult to create responsive styles that
change depending on the device on which
they are being viewed.
– Many websites don’t require the full power
of CSS, and can be styled using a simpler
subset of operations.
Bootstrap
• Bootstrap is an open source HTML, CSS and javascript library for developing
responsive applications.
• Bootstrap uses CSS and javascript to build style components in a reasonably
aesthetic way with very little effort.
• A big advantage of Bootstrap is it is designed to be responsive, so the one
application will look good on mobile devices, tablets and PCs.
• A disadvantage is that all Bootstrap websites look fairly similar
Getting started
• Bootstrap is a library of CSS and HTML components. To include this components
and styles in your page, you can either download and host the code yourself, or
just reference a Content Delivery Network in the header of your web-page.
• Bootstrap consists of a CSS file, a javascript file, and typically uses the JQuery
library as well.
A first Bootstrap page
• Include the CDN libraries, and a meta-tag setting the viewport width to
device width (for zooming and scaling)
• The container class automatically sets margins that respond to the page
size.
The Grid System
• Bootstrap uses rows of 12 columns for layout. Every compnent (or div) can
be specified to span a number of these columns.
• The layout can be specified with respect to the device size (extra small,
small, medium and large).
• The number of spanned columns should always add up to 12.
The Responsive Grid System
• The div class col-sm-3
means take three columns on all
devices small, or larger. Extra
small devices will stack the
content vertically.
• The grid layout can be nested
so a span of eight columns
could be divided into 12.
• We can specify different layout
for different devices, so
something can be specified to
take 3 columns on a large
device, but 6 on a small.
Tables
• The class table adds basic styling to a table, with
horizontal lines and padding.
• There are additional classes table-striped, table-
bordered, table-hover and table-condensed, with
different styles and effects.
• There are also classes for table rows and cells for different
effects.
Glyphicons
• Bootstrap comes with 200 icons to use, called Glypohicons.
• These are rendered as text, so will resize with headers etc.
• The glyphicon syntax, just applies a class to an empty span.
Other tricks
• Bootstrap also supports other distinctive features such as jumbotrons
modals (requires JQuery), form layouts, carousels.
• It is worthwhile taking the time to get familiar with these, as they can make
a web-page look professional with relatively little effort.
• See the w3schools tutorial:https://www.w3schools.com/bootstrap/default.asp or the
Bootstrap site https://getbootstrap.com/docs/4.3/getting-started/
