BOOTSTRAP

FRAMEWORK
ENTERPRISE ARCHITECTURE
BOOTSTRAP
INPUT
GROUPS
EXTENDING FORM CONTROLS WITH BOOTSTRAP

Bootstrap input group component is a very

flexible and powerful component for
creating interactive and elegant form
controls, however, it is limited to text input,
select, and text area only.
CREATING PREPENDED AND APPENDED INPUTS
Input groups are created using the class .input-group. It
act as a container for inputs and addons.

Further, wrap the text or icon in a <span> element as well

as apply the class .input-group-text on it and place it
before or after the input.
— The output of the above example will look something like this:
Since Bootstrap 5 you can also
prepend or append select box
dropdown and text area form
controls.
— The output of the above example will look something like this:
Similarly, you can prepend or append addons to Bootstrap's custom file input, like this:

— The output of the above example will look something like this:
BUTTONS ADDONS FOR FORM CONTROLS

You can also prepend or append buttons to

the form controls like text. Simply, place as
many buttons as you like within the .input-
group, as shown in the following example:
— The output of the above example will look something like this:
ADDING BUTTON DROPDOWNS
You can even add buttons with dropdowns
to a form control if you want to perform
more than one action from a button. Also, in
case of input group you don't need the
.dropdown wrapper element, which is
otherwise normally required. Let's check out
an example:
— The output of the above example will look something like this:
ADDING SEGMENTED DROPDOWN
BUTTON GROUPS
Similarly, you can define the segmented
dropdown button group where dropdown
button is placed besides the other buttons,
as shown in the following example:
— The output of the above example will look something like this:
HEIGHT SIZING OF INPUT GROUPS
You can also add the relative form sizing
classes such as .input-group-lg or .input-
group-sm to the .input-group element itself
to make it larger or smaller in height.

The contents within the .input-group will

automatically resize — there is no need for
repeating the form control size classes on
each element.
— The output of the above example will look something like this:
BOOTSTRAP
BUTTONS
CREATING BUTTONS WITH BOOTSTRAP
Buttons are the integral part of a website and application. They are used for various purposes
like, submit or reset an HTML form, performing interactive actions such as showing or hiding
something on a web page on click of the button, redirecting user to another page, and so on.
Bootstrap provides a quick and easy way to create and customize the buttons.
BOOTSTRAP BUTTON STYLES
Different classes are available in Bootstrap for styling the buttons as well as to indicate the
different states or semantic. Button styles can be applied to any element. However, it is applied
normally to the <a>, <input>, and <button> elements for the best rendering.
— The output of the above example will look something like this:
BOOTSTRAP OUTLINE BUTTONS
You can also create outline buttons by replacing the button modifier classes, like this:
— The output of the above example will look something like this:
CHANGING THE SIZES OF BUTTONS
Bootstrap gives you option further to scaling a button up or down.

To make buttons larger add an extra class .btn-lg to the buttons, like this:
— The output of the above example will look something like this:
CHANGING THE SIZES OF BUTTONS
Similarly, to make buttons smaller add an extra class .btn-sm to the buttons, like this:

— The output of the above example will look something like this:
You can also create full-width or block buttons (buttons that covers the full width of the parent
elements) through using the Bootstrap's display and gap utility classes. These utilities offers much
greater control over spacing, alignment, and responsive behaviors.

— The output of the above example will look something like this:
You can also create responsive variation of these buttons using the .d-{breakpoint}-block classes.

In the following example buttons will be vertically stacked on small and extra small devices (i.e.
viewport width <768px). From medium (md) breakpoint up .d-md-block replaces the .d-grid class,
thus nullifying the .gap-2 class.
You can also create responsive variation of these buttons using the .d-{breakpoint}-block classes.

In the following example buttons will be vertically stacked on small and extra small devices (i.e.
viewport width <768px). From medium (md) breakpoint up .d-md-block replaces the .d-grid class,
thus nullifying the .gap-2 class.
BOOTSTRAP DISABLED BUTTONS
Sometimes we need to disable a button for certain reasons, for example, a user in case is not
eligible to perform this particular action, or we want to ensure that user should performed all
other required actions before proceed to this particular action.
CREATING DISABLED BUTTONS USING BUTTON
AND INPUT ELEMENT
Buttons created through <button> or <input> tag can be disabled by adding the disabled
attribute to the respective element, as shown in the following example:
— The output of the above example will look something like this:
CREATING DISABLED BUTTONS USING ANCHOR
ELEMENTS
Buttons created through <a> tag can be disabled by adding the class .disabled, like this:
— The output of the above example will look something like this:
BOOTSTRAP ACTIVE BUTTONS
Moreover, you can also apply the class .active to force the buttons look like active (i.e. pressed).
Usually you don't need to add this class to the buttons, as their active state is automatically
styled by the Bootstrap using CSS :active pseudo-class.

— The output of the above example will look something like this:
CREATING SPINNER BUTTONS
With Bootstrap you can easily include spinner icon in a button to indicate the loading state in
your application.
— The output of the above example will look something like this:
BOOTSTRAP
BUTTON
GROUPS
CREATING BUTTON GROUPS WITH BOOTSTRAP
In the previous chapter you've learnt how to create different types of individual buttons and
modify them with predefined classes. Bootstrap however, also allows you to group a series of
buttons together in a single line through the button group component.

To create a button group just wrap a series of buttons with .btn class in a <div> element and
apply the class .btn-group on it. You can additionally apply the class .active on an individual
button to indicate the active state.
— The output of the above example will look something like this:
Similarly, you can also create button groups using outline buttons, like this:

— The output of the above example will look something like this:
MIXED STYLES BUTTON GROUPS
You can also mix and match different button styles to create button groups like this:

— The output of the above example will look something like this:
BOOTSTRAP
CARDS
USING THE BOOTSTRAP CARDS
Bootstrap card is a flexible and extensible content container. It includes options for headers and
footers, a wide variety of content, contextual background colors, and powerful display options.
Card replaces panel, well, and thumbnail components in old Bootstrap 3 version.

In the following sections, you will see what you can do with the card component.
CREATING A BASIC CARD
The card markup is pretty straight forward. The outer wrapper require the base class .card,
whereas content can be placed inside the .card-body element. The following example will show
you how to create a card with a picture, mixed with some text content and a button.
— The output of the above example will look something like this:
CONTENT TYPES FOR CARD COMPONENT
The card component support a wide variety of content, including images, text, list groups, links,
navs, and more. Here are the examples of what's supported by the card.

1. Body Only Card

You can simply use .card with .card-body within, whenever you need to create a padded box.

— The output of the above example will look something like this:
CONTENT TYPES FOR CARD COMPONENT
2. Card with Titles, Text, and Links
Further, you can also place title and links inside the card along with text, like this:

— The output of the above example will

look something like this:
CONTENT TYPES FOR CARD COMPONENT
3. Card with Header and Footer
You can also add header and footer within your cards using the .card-header and .card-footer
class, respectively.

— The output of the above example will

look something like this:
CONTENT TYPES FOR CARD COMPONENT
4. Placing List Groups within Card
You can also place list groups inside the card along with other content types, as shown here.

— The output of the above example will

look something like this:
CONTENT TYPES FOR CARD COMPONENT
5. Mix and Match Multiple Content Types within Card
Feel free to mix and match multiple content types to create the card you need. The following
example will create a fixed-width card with an image, text, list group, and hyperlinks.

— The output of the above example will

look something like this:
CONTENT TYPES FOR CARD COMPONENT
6. Adding Navigation to Cards
You can also add Bootstrap's nav components such as tabs and pills to the card header.
To add tabs navigation to a card simply place the tabs markup inside the card header, and the tabs
content inside the card body. You are also required to use an additional class .card-header-tabs on
the .nav element along with the class .nav-tabs for proper alignment.

Similarly, you can add pills nav to the card

by using an additional class .card-header-
pills along with the class .nav-pills on the
.nav element
CUSTOMIZING THE CARD STYLES

You can simply use the background and

color utility classes to change the
appearance of a card. Let's try out the
following example to understand how it
basically works:
THANK YOU