BOOTSTRAP

FRAMEWORK
ENTERPRISE ARCHITECTURE
BOOTSTRAP
IMAGES
STYLING IMAGES WITH BOOTSTRAP
Images are very common in modern web design. So styling images and placing it properly on the web
pages is very important for improving the user experience.

Using the Bootstrap built-in classes you can easily style images such as making the round cornered
or circular images, or give them effect like thumbnails.
— The output of the above example will look something like this:
CREATING RESPONSIVE IMAGES AND VIDEOS
With Bootstrap you can make the images responsive too. Just add the class .img-fluid to the <img>
tag. This class mainly applies the styles max-width: 100%; and height: auto; to the image so that it
scales nicely to fit the containing element — in case if the width of the image is larger than the
containing element itself.
HORIZONTAL ALIGNMENT OF IMAGES
You can use the text alignment classes such as
.text-center, and .text-end on the parent container to
align the inline images horizontally center and right.
You can also align images to the left and right within a
larger box using the classes .float-start and .float-
end.

However, to center align the block-level images you

need to use the .mx-auto margin utility class.
BOOTSTRAP
MEDIA
OBJECTS
USING THE MEDIA OBJECT IN BOOTSTRAP
Bootstrap media object has been discontinued from version 5. However, you can still create a layout
that contains left- or right-aligned media object like images or video alongside the textual content
such as blog comments, Tweets, etc. using the flex and spacing utility classes.
— The output of the above example will look something like this:
You can also create other variations of media object. Apply the image modifier classes like .rounded
or .rounded-circle to the image to create rounded corner or circular image.

— The output of the above example will look something like this:
CREATING NESTED MEDIA OBJECTS

Media objects can also be nested inside

other media object. It can be very useful
for creating comment threads in a blog
post.
— The output of the above example will look something like this:
ALIGNMENT OF MEDIA OBJECTS
You can also change the horizontal alignment of content and media by simply tweaking the HTML
code itself, as demonstrated in the following example:

— The output of the above example will look something like this:
Besides that you can also align the images or other media at the middle or bottom of the content
block using the flexbox utilities classes, for example, you can use the class .align-self-center for
vertical center alignment, and the class .align-self-end for bottom alignment.

By default, the media inside a media object is top aligned. Here's an example:
BOOTSTRAP
NAV: TABS
AND PILLS
BOOTSTRAP NAV COMPONENTS

Bootstrap provides an easy and quick way to create basic navigation as well as
components like tabs and pills which are very flexible and elegant. All the
Bootstrap's nav components, including tabs and pills, share the same base
markup and styles through the base .nav class.
CREATING BASIC NAV WITH BOOTSTRAP
You can use the Bootstrap .nav class to create a basic navigation menu, like this:

— The output of the above example will look something like this:
ALIGNMENT OF NAV ITEMS
By default, navs are left-aligned, but you can easily align them to center or right using flexbox utilities.
The following example uses the class .justify-content-center to align nav items to center.

— The output of the above example will look something like this:
Similarly, you can align nav items to right using the class .justify-content-end, like this:

— The output of the above example will look something like this:
Moreover, you can even vertically stack your nav items by changing the flex item direction with the
class .flex-column. Also, if you want to stack your nav vertically on smaller viewports but not on
others, use it with responsive breakpoint (e.g., .flex-sm-column).

— The output of the above example will look something like this:
CREATING THE BASIC TABS
Simply, add the class .nav-tabs to the basic nav to generate a tabbed navigation, like this:

— The output of the above example will look something like this:
You can also add icons to your tab items to make it more attractive, as shown here:

— The output of the above example will look something like this:
CREATING THE PILLS NAV
Similarly, you can create pill based navigation by adding the class .nav-pills on the basic nav instead of
class .nav-tabs, as shown in the following example:

— The output of the above example will look something like this:
Similarly, like nav tabs you can also add icons to your pills nav to make it more attractive:

— The output of the above example will look something like this:
Additionally, you can apply the class .flex-column on the .nav element to make the pills nav appear
vertically stacked. You can alternatively use responsive versions (e.g., .flex-sm-column) if you need
to stack them on specific viewports but not on others.

— The output of the above example will look something like this:
 BOOTSTRAP NAV WITH DROPDOWN MENUS

You can add dropdown menus to a link inside tabs and pills nav with a little extra markup.

The four CSS classes .dropdown, .dropdown-toggle, .dropdown-menu and .dropdown-item are
required in addition to the .nav, .nav-tabs or .nav-pills classes to create a simple dropdown menu
inside tabs and pills nav without using any JavaScript code.
CREATING TABS WITH DROPDOWNS
The following example will show you how to add simple dropdown menu to a tab.

— The output of the above example will look something like this:
CREATING PILLS WITH DROPDOWNS
The following example will show you how to add simple dropdown menu to a pill nav.

— The output of the above example will look something like this:
FILL AND JUSTIFY NAV COMPONENT
You can force your .nav-items to extend and proportionately fill all available width using the class
.nav-fill on the .nav element. In the following example all horizontal space is occupied by the nav
items, but every nav item doesn't have the same width.

— The output of the above example will look something like this:
BOOTSTRAP
NAVBAR
CREATING NAVBAR WITH BOOTSTRAP
You can use the Bootstrap navbar component to create responsive
navigation header for your website or application. These responsive
navbar will be collapsed on devices having small viewports like
mobile phones but expand when user click the toggle button.
However, it will be horizontal as normal on the medium and large
devices such as laptop or desktop.

You can also create different variations of the navbar such as

navbars with dropdown menus and search boxes as well as fixed
positioned navbar with much less effort. The following example will
show you how to create a simple static navbar with navigation links.
ADDING LOGO IMAGES TO NAVBARS

You can also place your logo image inside the navbar,
instead of plain text. However, you need to set the logo
height manually to fit it properly inside the navbar, as
shown here:
ADDING DROPDOWNS TO NAVBAR

You can also include dropdowns and search box within the
navbars, as shown here:
PLACING SEARCH FORM INSIDE NAVBAR

Search form is a very common component of the navbars

and you have seen it on various website quite often. You
can place various form controls within a navbar using the
class .d-flex on the <form> element, as demonstrated in
the following example:
CHANGING THE COLOR SCHEME OF NAVBARS
You can also change the color scheme of the navbar by using the .navbar-light for the light
background colors, or .navbar-dark for the dark background colors. Then, customize it with the
background color utility classes, such as .bg-dark, .bg-primary, and so on.

Alternatively, you can also apply the CSS background-color property on the .navbar element yourself
to customize the navbar theme, as shown in the following example:
THANK YOU