Web Application

Development
Bootstrap Framework
What is Bootstrap?
● Most Popular Front-End Framework
● Used for building responsive, mobile first websites and web applications
● HTML/CSS/Javascript
Why use Bootstrap?
● Increase development speed
● Assure responsiveness
● Prevent repetition between projects
● Add consistency
● Ensure cross browser compatibility
● Larger community
● Customizable
Bootstrap Grid System
● In order to create a layout, we use:
○ Container
○ Row
○ Columns (Upto 12)
Grid Breakpoints
Class Demo on Grids
● The use of container vs container-fluid
● Using columns with and without breakpoints and sizes
Buttons
● Buttons with different classes for different colors using classes btn and btn-
primary example.
● Outline buttons
Cards and Panels
Introduction
● To use Bootstrap you can use the CDN
● Download source files at:
○ https://getbootstrap.com/docs/5.0/getting-started/download/
○ Use CDN and include the needed links
Working with Navigation Bar
● The classes are:
○ Navbar
○ Navbar-expand (Check for breakpoints in the Website for different collapse
sizes).
○ Navbar-brand: For the logo in the navigation bar
● For the Menu, use a block (div) tag with collapse and nav-collapse
classes, the ul should contain the navbar-nav class, the list items
should have have nav-item class and for the links, the class
should be nav-link.
● Ms-auto class, sets the navigation link to the (far) right.
● You can add padding using (py class for padding bottom and top)
Navigation Bar
● The nav tag is used to display the navigation
○ <nav class="navbar navbar-expand-lg bg-dark navbar-dark py-3">
● The a link in the navigation bar uses navbar-brand
○ <a href="#" class="navbar-brand">SUZA Youthmappers</a>
● The link is contained within navbar-collapse and collapse classes
○ <div class="collapse navbar-collapse" id="navmenu">
○ <ul class="navbar-nav ms-auto">
○ <li class="nav-item">
○ <a href="" class="nav-link">About Us</a>
○ </li>
○ </ul>
○ </div>
Nav Bar Code
<nav class="navbar navbar-expand-lg bg-dark navbar-dark py-3">
<div class="container">
<a href="#" class="navbar-brand">SUZA Youthmappers</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navmenu"
>
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navmenu">

<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a href="" class="nav-link">About Us</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">User Profiles</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">Contacts</a>
</li>
</ul>
</div>
</div>
</nav>
Displaying Flex Items
● You can have a block with class d-flex, to display the contained items in rows.
● You can use breakpoints by setting d-sm-flex
● For buttons, you can use classes btn, btn-primary, btn-lg for different colors
and sizes (Check the documentation).
● For margins you can use my (For vertical axis, i.e. bottom and top)
● For the image, you can use the class img-fluid to make it contained within the
container block. And you can remove the image in small screen size by using
the class d-none (display none property).
● Combinig d-none and d-sm-block, this means that in smaller screen the
image is not displayed.
For the Flex items
● Use the classes
○ align-items-center
○ justify-content-between
Creating Boxes with CSS Grids
● We use the class row to put the columns we want.
○ We can then use col class to add evenly spaced columns, BUT this will add columns even to
small screen size devices.
○ We can decide to use col-md class, which will add columns from medium sized devices and
above.
● Using cards:
○ <div class="card bg-dark text-light">
● You can use icons (Font Awesome or Bootstrap Icons at
https://icons.getbootstrap.com/#usage)
● You can use the CDN option, and include the following link in the head section of
your page:
○ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
○ <div class="card-body text-center">
○ <i class="bi bi-laptop"></i>
○ </div>
Wrapping the Contents and Section Division
● It's a good idea to divide the page into sections
● Use padding
● Wrapping the contents into class h1, it will have properties similar to that of h1
○ <div class="h1">
○ <i class="bi bi-laptop"></i>
○ </div>
Complete Card Sample Code
<div class="card bg-dark text-light">
<div class="card-body text-center">
<div class="h1">
<i class="bi bi-people"></i>
</div>
<h3 class="card-title mb-3">In Person</h3>
<p class="card-body mb-3">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Autem et mollitia asperiores magni, totam error?
</p>
<a href="#" class="btn btn-primary">Read more..</a>
</div>
</div>
</div>
</div>
Setting Gap over stacked rows
● For this you can use the g class (gap, for example, we can set it to g-4)
● This will create some space in between the cards.
More on Bootstrap 5 - Assignment 2

https://www.youtube.com/watch?v=rQryOSyfXmI