Scribd
Upload
6 views

Bootstrap ClassNames

Uploaded by

islaniaaayush05
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

Bootstrap ClassNames

Uploaded by

islaniaaayush05
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

WSA [www.webstackacademy.

com]

BOOTSTRAP CLASSNAMES

• "navbar": This class is likely a class defined in a CSS stylesheet or a CSS


framework (such as Bootstrap) that provides styling for a navigation bar.
• "row": This class is also likely from a CSS framework (like Bootstrap) and
represents a grid row, which is used to group columns together in a responsive
layout.
• col-12: This class means that the element will take up the full width of the
available space on small screens (xs) and extra small screens (xs).
• col-md-3: This class means that the element will take up 3 columns out of the
12 available columns on medium-sized screens (md) and larger.
• navbar-brand: It's used to style the element with specific branding-related
styles, often used for logos, names, or icons within a navigation bar (navbar).
• col-md-6: This class indicates that the element will take up 6 columns out of
the 12 available columns on medium-sized screens (md) and larger.
• mt-2: This class adds a top margin of 2 units (it might be in pixels or another
unit depending on the CSS framework).
• mt-md-0: This class specifies that on medium-sized screens and larger (md),
the top margin should be 0, effectively removing the top margin that was
added on smaller screens.
• input-group: it is a container to enhance an input by adding an icon, text or a
button in front or behind the input field as a "help text".
• form-control: is a Bootstrap class that provides styling to form elements like
input fields, making them consistent and visually appealing. It sets the input
field to have a consistent width, padding, and border, among other styling
adjustments that enhance the user interface.

1
WSA [www.webstackacademy.com]

• input-group-append: it’s a part of an input group, indicating that it's intended


to be positioned after an input field and may contain additional elements like
buttons or icons.
• mt-4 mt-md-0: These classes add top margin (spacing) to the element. mt-4
adds margin-top of 1rem, and mt-md-0 removes the margin-top on medium-
sized screens and larger.
• text-center: This class centers the text content horizontally within the
element.
• The ml-3 class is a Bootstrap class that adds left margin to the element,
pushing it away from its surrounding content by a certain amount (in this case,
3 units).
• ml-1: This class represents a left margin of 1 unit. It's likely a custom class
that adds a specific amount of left margin to the element. In this case, it's used
to create a space between the "Cart" text and the cart item count.
• "container": it is used to provide a centered and responsive layout for the
content within the section.
• "mt-5": This class represents a top margin of 5 units. It's likely a custom class
or from a CSS framework and adds spacing between this section and the
content above it.
• col-sm-12: This class means that the element will take up the full width of the
available space on small screens (sm) and larger, occupying 12 out of 12
columns.
• col-md-6: This class means that the element will take up 6 columns out of the
12 available columns on medium-sized screens (md) and larger.
• col-lg-3: This class means that the element will take up 3 columns out of the
12 available columns on large-sized screens (lg) and larger.

2
WSA [www.webstackacademy.com]

• my-3: This class adds a vertical margin (spacing) of 3 units, which might be
measured in pixels or another unit, both at the top and bottom of the element.
• card: it is a bordered box with some padding around its content. It includes
options for headers, footers, content, colors, etc.
• "p-3": This class represents padding applied to all sides of the element. The
p-3 class is likely a shorthand notation provided by a CSS framework to add
consistent padding.
• "rounded": This class rounds the corners of the element, giving it a visually
rounded appearance.
• card-img-top: it is used to style the element as the top image within a card
component.

• mx-auto: This class is used to center-align the element horizontally within its
container. "mx" stands for margin in the x-axis (left and right).
• card-body: class that provides styling for a card component's body.
• "d-flex": It is used to enable a flex display mode on the element, allowing its
children to be aligned and organized in a flex layout.
• "flex-column": This class sets the flex direction to column, arranging the
element's children vertically within the flex container.
• card-title: is used to add card titles to any heading element.
• "mt-auto": This class uses Bootstrap's utility class to apply an "auto" margin
on the top side of the element. This helps to push the element to the bottom of
its container, giving it maximum available vertical space.
• container-fluid: this class provides a full width container, spanning the entire
width of the viewport.

You might also like