What are Bootstrap Colors [Bootstrap Tutorial: Part IV]

Whether defining styling for elements and layouts or implementing responsive design, Bootstrap essentials significantly guide the development process.

For instance, lacking a solid understanding of Bootstrap color principles may result in choices that impact a website’s readability and accessibility, or ineffective use of margins and padding within Bootstrap may lead to chaotic layouts, making navigation difficult. Moreover, a poorly implemented border can create a complex hierarchy, challenging the understanding of content.

In our preceding Bootstrap tutorial series, we looked at Bootstrap Buttons and Badges, dived into Bootstrap Display and Visibility utilities, and Bootstrap Dropdowns and Collapse. We will use the acumen and expertise from those previous tutorials to navigate more of Bootstrap’s styling essentials and unravel their importance.

In this Bootstrap tutorial, Part IV, we’ll explore Bootstrap colors, backgrounds, margins, paddings, and borders and learn how to use their capabilities to create visual consistencies, responsive spacing, and appealing layouts.

Introduction to Bootstrap Styling

As a framework, Bootstrap has its own styling nature. We will look at these fundamentals on which the framework is built and the characteristics that may not be unique to Bootstrap but make it stand out.

• Modularity: Modularity is the ability of a structure or software to be easily broken down into smaller, more manageable parts.

Bootstrap CSS is built modularly, having separate CSS and JS files for different components. This makes it easy to include only files or features you need in your project.

The image below from Bootstrap shows a preview of the file structure when you install Bootstrap using a package manager like npm.



The image shows the file structure of Bootstrap v5.3 installed with npm on my machine. You can notice Bootstrap’s two modules, bootstrap, and popperjs, in the node_modules folder.



• Accessibility: Bootstrap CSS has built-in features that cater to accessibility; hence, websites built with it are more accessible to people with impairments.

Bootstrap uses WAI-ARIA roles and attributes to provide additional information on its components that assistive technologies such as screen readers can read.

Furthermore, Bootstrap also has a visually-hidden class that makes visually hidden content accessible to screen readers, thus improving the accessibility of the website’s content to its non-visual users.

The example below shows how COSMEAU uses the visually-hidden class to inform differently-abled people of the text previously used for navigation instead of the visible arrow. Thus, a wide variety of people can access the content without hindrance.



• Design flexibility: The Bootstrap CSS framework provides several pre-designed components, such as dropdowns, popovers, and spinners,which can be customized to one’s preference.

In addition, it offers more design flexibility by enabling the modification of default styles through editing the Sass files.

• Responsiveness: With a mobile-first approach, Bootstrap CSS is well-made for creating responsive designs. Bootstrap provides flexible classes such as d-flex, flex-shrink, mx-auto, and col-md, a grid system, and breakpoints like sm, md, lg, and xl that can be used to make webpage elements responsive at defined breakpoints.

The below example shows how Visme uses the d-lg-flex and flex-column to render the items in the image in a column on the lg breakpoint. The second image shows how the website looks on a MacBook Air.



Source



• Thriving community: Bootstrap CSS is well-documented and has a large community of developers contributing to its ongoing development. The good documentation and large community, combined with 35K questions on Bootstrap v4 and v5 on StackOverflow and more than 167k GitHub Stars, make it easy to find support for any issues and stay updated with the latest changes to the framework.

Importance of Styling in Modern Web Design

In this section on Bootstrap colors, we will look at the importance of styling
in modern web design in relation to Bootstrap colors and backgrounds, margins and padding, and borders.

Now, exhaustively covering all the many styling uses regarding the three would be impossible. We will dedicate two to three uses of each, from Bootstrap colors and backgrounds to borders.

• Enhancing accessibility: Proper styling that creates a high color contrast between the text and the background enhances readability for users with visual impairments and color blindness.

Also, the dark mode feature, which enables users to switch between light and dark modes, is one of the top CSS trends in today’s websites. Dark mode, where lighter text is put on darker backgrounds, reduces eye strain by lessening the amount of bright light entering the eyes. The feature lets users switch between light and dark modes depending on their needs and conditions.

• Improving user engagement: The psychology of color is the study of colors as a determinant of human behavior. Colors can induce emotions and influence human behavior. Warm colors such as red, orange, and yellow give off a sense of power, attraction, urgency, and danger. In contrast, Bootstrap colors like green, blue, and purple are seen as calming, soothing, and comforting, though this varies from culture to culture.

The above emotions influence the use of Bootstrap colors as part of styling in web development features like Call-To-Actions (CTAs), backgrounds, and cards. According to a case study on Moz, an organization increased conversions by changing its CTA button background from green to yellow.

It is also one of the reasons why websites like Twitter, Zoom, Netlify, Grammarly, and WhatsApp opt for Bootstrap colors like blue, green, and orange, and their shades for the website color schemes.

The Bootstrap colors give off a sense of trust and reliability, making users feel safe whenever they are on them. This may cause a user to spend longer durations interacting with the website.



On similar lines, the image below shows major positive and negative traits people associate with the blue and red colors. These associations can influence people’s behavior, including consuming products and purchasing services.



Source

Image 1 shows how Amazon uses borders to create a simple but neat and elegant frame for the items, and image 2 shows how baffling the entire structure of the items would be were the borders absent.

Image 1:



Image 2:

Source
• Feedback and validation: When a user fills a form input field with the wrong information or leaves a required field empty, it usually gets a red border or outline accompanied by red text informing the user that the information given is not the one expected or that the input left empty is a required one. It may get a green border when the information is accepted.

When form validation is successful, a form of notification is shown to the
user to signify it is successful. However, when it is unsuccessful, the user
gets information on what went wrong and what is needed to accomplish the
submission.



Source

The above example shows the error message Instagram displays when the form submission is unsuccessful in regards to the password and what you need to do next.

• Creating responsive layouts: You can control elements in and around them by adjusting their paddings and margins to maintain a visually pleasing and organized layout.

Moreover, as the amount of content visible in the viewport varies, ranging from one screen size to another, adjusting paddings and margins can help improve the readability of the text by preventing elements from cramping up or getting overly spread.

The example below shows a given section’s spacing can vary or change depending on the device or screen size it is on, in this case, a section on VS Code.

Mobile Preview:



Tablet Preview:



Desktop Preview:



Here, I have used LT Browser to render the VS Code’s website on different device viewports.

LT Browser is a dev-friendly mobile next-generation browser built by LambdaTest to test your responsive web layouts across 53+ pre-installed viewports for mobile, tablet, desktop, and laptops. This lets you ensure that CSS does not break even if the webpage is rendered on various screen resolutions.

Also, subscribe to the LambdaTest YouTube Channel and get detailed tutorials around automation testing, Selenium, Appium automation, and more.

• Eliciting Call-To-Actions (CTAs): To underestimate the value of margins and paddings on CTAs would be a blunder for businesses. As a product designer, Yu She cites in her blog article about designing high convert buttons, “When it comes to spacing, apply the 2x:1x ratio -horizontal vertical spacing.“



Spacing in and around a CTA can mean the difference between the button getting clicked or not, thus converting a sale or not. This is because, depending on the device or screen size, the button spacing directly affects the surface area of the button on which the user can click.

• Grouping and organization of UI elements: Grouping different UI elements enables users to grasp the relationships and connections between the various parts of the interface, such as the distinct inputs, labels, and buttons taken to be part of a single form. This enhances the overall comprehension of the content.

The importance of grouping and organizing UI elements is further supported by the UX law of common region, which states that “elements tend to be perceived in groups if they are sharing an area with a clearly defined boundary.”



LambdaTest Certifications and LambdaTest Blog

In the above images, the Start Now button, highlighted with the blue rectangle in image 1, is linked with the Selenium Advanced card rather than any other cards, primarily because of the grouping of the items. The same applies to why you view the blog article section as two blocks, each containing its content in image 2. Borders provide a neat and effortless path to categorize items.

Similarly, grouping and organizing content using borders reduces cognitive load by presenting information in manageable pieces. Instead of processing individual elements separately, users can focus on understanding groups and their collective meaning.

• Subtle CTAs: You can use borders to create outline buttons that indicate secondary and less vital Call-To-Action actions. These provide a less assertive way to encourage user interaction.

In the example below, Udemy uses a solid background for the sign-up to drive website visitors to the primary action it wants them to perform. The Log in button, which is meant to be a secondary action, is outlined.



Source

As outline buttons make distinguishing between primary and secondary actions easy, they lessen the cognitive load on the users.

• Section dividers: The ease of implementing them and the clean, uncluttered appearance on the user interface make borders a desirable option as section dividers.

Pixels in the example below use a 1px solid gray border to provide a clean and clear separation between the sections, which all share a white background. This offers a professional look and enables users to scan and comprehend the sections effortlessly.



Source

Overview of Bootstrap Built-in Styling Features

Before going further with Bootstrap colors, let’s first have a brief overall insight into the built-in styling features of these tools. In this, we will learn what they are and what we can do with them.

• Bootstrap colors and backgrounds:Text and background classes like text-primary,text-success, bg-warning, and bg-danger enable you to create text and background with contextual meanings.

The classes also ensure a consistent and visually meaningful representation throughout your website or app as they cut across many other Bootstrap components like buttons and badges. For example, the same text color, like text-primary, can be used as btn-primary with buttons.

Example:







• Bootstrap margin and padding: Bootstrap spacing utility classes for margin and padding have a size range of 0 to 5. These classes follow a consistent naming convention, allowing developers to apply specific padding values to different sides of an element.

Additionally, it offers classes that you can take for responsive spacing. These can be used for specified breakpoints or screen sizes. For example, classes like p-3 or m-4 apply padding and margin to all sides, while px-md-2 applies padding to the left and right sides on the md breakpoint.

• Bootstrap borders: Bootstraps offers various classes you can use to style the border and border radius of elements. Similar to the spacing classes, they follow a consistent naming convention, and the border size ranges from 0 to 5.

Bootstrap Colors and Backgrounds

When it comes to Bootstrap colors and backgrounds, Bootstrap provides predefined classes like text-danger and bg-dark to colorize text and backgrounds. You can use Bootstrap colors to convey contextual meaning, such as completing a task and indicating errors or warnings with the
bg-success, bg-danger, and bg-warning classes.

The Bootstrap color and background classes have the same naming convention and are thus easy to grasp. Both also have opacity classes that enable adjustment of the alpha transparency of text or background between 25% and 75%.

Let’s look at Bootstrap color and background individually and explore them further.

Colors

Bootstrap offers four class utilities to apply color to text. The text-* and text-* emphasis for text and link-* and link-*-emphasis for links.

The text-* and link-* class utilities offer contextual Bootstrap colors, whereas text-*-emphasis and link-*-emphasis offer Bootstrap color classes that emphasize the text you apply to them and are of a darker shade of their primary counterparts.

Let’s look at these class utilities further for a clearer understanding of Bootstrap colors.

text-* and text-*-emphasis class utilities

These class utilities enable you to style text with the color defined in your Bootstrap theme. For example, if you give the text the contextual class text-info, it will get a color of #0dcaf0. The exact color can also depend on any customizations you make.

The asterisk (*) in the class utilities stands for the Bootstrap color name. Below is a table showing some of the contextual Bootstrap color classes.

Bootstrap Color Class	Color
text-primary	#0d6efd
text-warning	#ffc107
text-success	#198754
text-danger	#dc3545
text-info	#0dcaf0

text-*-emphasis:

Bootstrap Color Class	Color
text-primary-emphasis	#052c65
text-secondary-emphasis	#2b2f32
text-info-emphasis	#055160
text-danger-emphasis	#58151c
text-warning-emphasis	#664d03

link-* and link-*-emphasis class utilities

These link utilities provide classes enabling you to style your links with various Bootstrap colors, contextual and non-contextual, like link-info and link-dark. The list below shows some of them.

• link-primary
• link-danger
• link-success
• link-info

In the below Bootstrap colors examples, Gofile uses different Bootstrap color classes like text-warning to both match the color of the text with the icons and also make the text deemed vital to stand out, whereas Avada uses the same to make the text of the type of businesses they offer services to noticeable.

Source

Source

For the code demo of Bootstrap examples, we will create a section of cards that uses text color to improve the text readability and hierarchy so that it is clear to the user from the card title to its link.

Browser Output:

Code:

Browser Output:

From cards 1 to 5, each has an opacity of 25% and 50%, and the remaining three have an opacity of 75%. This can help you adjust the opacity of text overlaying images or backgrounds without blocking the underlying visuals like in hero sections, thus improving readability and user experience.

Also, I have used the LambdaTest Real Time Browser Testing feature in the above output to know how compatible the text opacity effects are on Firefox v121 on macOS Monterey.

LambdaTest is an AI-powered test orchestration and execution platform that allows developers and testers to perform live-interactive testing across desktop and mobile environments that help simulate real-time environments to validate the functionality and performances of your web or mobile application using Bootstrap colors and other associated properties in those environments. LambdaTest gives a complete Bootstrap testing environment to test at scale.

In addition, you can also perform accessibility testing of your websites and mobile applications across Windows and macOS environments.

See the Pen
Bootstrap text opacity by Mbaziira Ronald (@mbaziiraronald)
on CodePen.

Background Colors

As seen in the text colors above, Bootstrap background colors also use the same class utility pattern and Bootstrap color values. The two utility classes are bg-* and bg-*-subtle.

bg-* class

This class utility lets you style text with the color defined in your Bootstrap theme. The utility works in a similar fashion as the text colors text-* class utility. Below are some of its classes and their Bootstrap colors.

Bootstrap Color Class	Color
bg-light	#0d6efd
bg-danger	#dc3545
bg-success	#198754
bg-secondary	#6c757d
bg-dark	#212529

bg-*-subtle

This class utility provides background colors that are lighter shades of those offered by the bg-* utility.

Bootstrap Color Class	Color
bg-primary-subtle	#cfe2ff
bg-dark-subtle	#ced4da
bg-success-subtle	#d1e7dd
bg-secondary-subtle	#e2e3e5

The example below shows how the Markdown Guide uses the bg-info and the text to inform users that there is more information to access should they decide to proceed further.

Source

Let’s create a demo for Bootstrap colors that helps users distinguish the different sections on the page by relating the content to its background color.

Code:

Browser Output:

In the demo above, we have used Bootstrap colors for backgrounds to create clear divisions between the page sections. This enables users to distinguish which content is related to each section.

See the Pen
Bootstrap background colors by Mbaziira Ronald (@mbaziiraronald)
on CodePen.

Combining text and background color classes

Bootstrap also provides a couple of classes that combine the text and background classes, which lessens the markup to write and reduces the file size. These include combinations like text-bg-dark, and text-bg-light.

The example below shows how COSMEAU uses this combination on the New badges on the cards in the image below. This is time-saving, especially for such simple tasks.

Source

Let’s create a Bootstrap color example for such a use case of the combination of the text and background color classes.

Code:

Browser Output:

We have used the text-bg-light class to give the page a bg-light background and dark text. This is time-saving when you don’t want to write many style classes.

See the Pen
Combination of bg and text color classes by Mbaziira Ronald (@mbaziiraronald)
on CodePen.

Bootstrap Margin and Padding

Bootstrap margin and padding sizes range from 0 to 5 and are in rem units. You can also define the vertical and horizontal margin using my and mx classes.

The naming convention for the margin and padding follows the format of {property}-{side}-{size}. The below table gives you a clearer understanding of how it works.

Class	Description
mt-1	Sets a top margin of 0.25rem
pb-4	Sets a bottom margin of 1.5rem
mx-auto	Aligns items horizontally in the center
pe-2	Sets a right border of 0.5rem
ms-5	Sets a left border of 3rem

In addition to normal CSS spacing, Bootstrap enables responsive spacing where you can define different margin and padding values for various CSS breakpoints such as sm, md, and lg.

The naming convention for responsive spacing follows the format {property}-{side}-{breakpoint}-{size}. The table below shows some possible examples of how you implement the format.

Class	Description
mt-md-4	Sets a top margin of 1.5rem on the md breakpoint.
me-sm-3	Sets a right margin of 1rem on the sm breakpoint.
mb-lg-auto	Sets a bottom margin to auto on the lg breakpoint.
pe-xl-2	Sets a right padding of 0.5rem on the xl breakpoint.
ps-md-5	Sets a left padding of 3rem on the md breakpoint.

In the below example, Onyx Care uses responsive spacing by giving the highlighted section all but the lg breakpoint a padding of 1px and the lg breakpoint itself a padding of 5px.

Source

We have gone through Bootstrap’s responsive spacing works, but as visuals speak louder and clearer than words, let’s create a visual demo to remove any missing blanks in what we have covered.

Code:

Mobile Preview:

Tablet Preview:

Desktop Preview:

In the above previews, you can observe how the spacing between and around cards varies between screen sizes. This improves the overall user experience as people can access easy-to-read, uncluttered content regardless of their device screen size.

See the Pen
Bootstrap responsive padding and margin by Mbaziira Ronald (@mbaziiraronald)
on CodePen.

Bootstrap Borders

From structuring layouts to helping in responsive web design, borders play major roles in helping us improve the visual outlook of websites. Not only do they guide users by giving them visual cues on the current task taking place.

The example below doesn’t use Bootstrap but exhibits the many roles borders can play. It shows how Microsoft uses a solid outer border and a dotted one to inform the user on which tab they are currently on and a solid gray border to show which tabs are inactive.

Source

In this section, we’ll look at what Bootstrap borders offer and what we can do with them. Let’s dive in.

Border Colors

Bootstrap border colors are similar to the text colors we looked at in Bootstrap colors and backgrounds in the previous section above. What changes is the naming convention, instead of writing text-{color}, we now write border-{color}. The list below shows some of these border classes.

• border-info
• border-black
• border-danger
• border-secondary

Border Sizes

Bootstrap border sizes or widths range from 0 to 5. You can easily set borders to any web page using the border class. The class defines a solid border of 1px in width by default to all sides of the element.

The tables below show how to add a border to an element in Bootstrap. Border width or size as specified using the range Bootstrap provides.

Class	Description
border-0	Remove the border from all the sides of an element.
border-1	Sets a 1px border on all the sides of an element.
border-3	Sets a 3px border on all the sides of an element.
border-5	Sets a 5px border on all the sides of an element.

Below is the table for the border width depending on the side of the element.

Class	Description
border-start	Sets 1px left border
border-end	Sets 1px right border
border-top	Sets 1px top border
border-bottom	Sets 1px bottom border

LavitaOutdoor uses a bottom border to set a division between the header section and nav items so that users can easily distinguish between the two and know which content is for which section, as they both have the same white background. The same pattern is repeated with the last section and the footer.

Source

Let’s create a demo example in which a particular piece of content will capture the users attention more than the rest. The goal is to make the user focus on the information we want them to consume first.

Code:

Browser Output:

In the browser output above, we have used the border colors and border width classes to create a content revealer in which the current tab open is highlighted with the border-primary color and the others with border-info. The user focuses on the tab, which stands out from the rest as its border color is distinct. Thus, its information is taken first.

See the Pen
Bootstrap background colors by Mbaziira Ronald (@mbaziiraronald)
on CodePen.

Border Radius

Bootstrap provides several ways to add a border radius to an element. Before going further, below are some instances where you can use border radius in web development.

• Cards like blog cards
• Buttons and links like pill-shaped buttons
• Labels and tags
• Inputs

There are various reasons why rounded or curved corners are used in web development, but we’ll look at three major ones.

• Natural human behavior: A Neuropsychological study shows that humans naturally tend to like rounded or curved elements due to the association of danger or threat to sharp elements. Hence, users pivot more towards rounded elements as compared to sharp ones.
• Aesthetic-usability effect: This effect states that “users often perceive aesthetically pleasing design as design that’s more usable.” Thus, users are more tolerant of minor usability issues as they find elements with round corners more pleasing.
• Better focus: Content containers with rounded corners are more effective as compared to sharp ones. Because they point inwards toward the center of the container, they direct a user’s eyes to focus on the content inside.

Real Python uses rounded containers on the cards that exhibit the various information on the website. These are relaxing and pleasing to look at and make it easier to focus on the information on each card.

Source

Let’s now explore how Bootstrap’s border radius works. Below are some formats and a table on how to use them.

• rounded-{border radius size}
• rounded-{border side}
• rounded-{border side}-{border radius size}

And the two classes of the border-pill and border-circle fall out of any of the above formats.

Class	Description
rounded	Sets a border radius of 0.375 on all sides of the element.
rounded-4	Sets a border radius of 1rem on all sides of the element.
rounded-pill	Gives the element a border radius of 50rem. This makes the element resemble a pill.
rounded-end	Sets a right border radius of 0.375rem.
rounded-bottom	Sets a bottom border radius of 0.375rem.
rounded-3	Sets a left border radius of 0.5rem on all sides.

We have seen why border radius is used and when it can be used. Let’s take this to the next level by creating our use case for border radius using Bootstrap classes.

Code:

Browser Output:

In our demo above, we combined the rounded class and other classes to create an appealing and delightful TABLE OF CONTENTS. This shows you can make many web elements visually pleasing by playing with their border radius.

See the Pen
Bootstrap border radius by Mbaziira Ronald (@mbaziiraronald)
on CodePen.

Tips to Apply Bootstrap Styling to Different Web Designs

Let’s look at some tips that you can use to apply Bootstrap styling concepts like Bootstrap colors, backgrounds, etc; in various situations. These will give you a crucial understanding of adapting Bootstrap styling features to meet and address diverse design challenges.

Responsive Design and Spacing

In cases where you need to adjust the spacing on an element based on the breakpoint or screen size, you can use Bootstrap responsive margins and paddings. You can refer to the previous section on Bootstrap margin and padding. It contains relevant information that complements the current context. Referencing it will help you familiarize yourself with the concept of responsive spacing.

The examples below show Pegaso and Emugames use Bootstrap responsive spacing to adjust the room of the sections to fit clearly in the space the screen size allows to avoid any overhanging or lacking space, which can affect user experience.

Source

Source

Pagination

With pagination, you can use Bootstrap borders on pagination numbers as pointers to the currently active tab. Similarly, you can define a frame for the page numbers so that the whole pagination area stands out from the surrounding content.

Source

Let’s say you have a couple of anchor links for pagination that link to the pages, and you want to create some form of indicator to show the user the currently active page, as shown in the images below, as Amazon and Walmart did.

Source

Here is how you could achieve the same results as seen in the images using Bootstrap.

Code:

Browser Output:

Tab Navigation

As mentioned earlier, you can use the borders to indicate the currently active tab to the user following the same method as in the previous example with pagination or create the tabs structure.

The example below shows eBay uses borders to mark the tabs and define their inner structure.

Source

Conclusion

In brief, Bootstrap colors, margins, and borders unlock multiple paths for creating appealing web interfaces. Colors convey meaning, while margins, paddings, and borders structure layouts seamlessly.

Some essential tools to create a modern, appealing website are colors, margins, paddings, and borders, and we’ve only covered the tip of the iceberg. You can do more with these tools, experiment with different color schemes, master the art of spacing with margins and paddings, and refine your layouts with borders.

In this tutorial on Bootstrap colors, we have looked at and dived into the workings of the colors, margins, paddings, and borders and how we can apply their styling concepts to different design scenarios.