Next-Gen App & Browser Testing Cloud
Trusted by 2 Mn+ QAs & Devs to accelerate their release cycles
What are Bootstrap Colors [Bootstrap Tutorial: Part IV]
Explore the Bootstrap colors with our tutorial series. Learn to enhance design consistency and create visually appealing web applications effortlessly.
Mbaziira Ronald
December 29, 2025
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.
- Accessibility: Bootstrap CSS has built-in features that cater to accessibility; hence, websites built with it are more accessible to people with impairments.
- 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.
- 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.
- 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.
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.
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.
In addition, it offers more design flexibility by enabling the modification of default styles through editing the Sass files.
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.
Note: Test your Bootstrap websites on real desktop and mobile environments. Start for free!
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.
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.
- 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.
- 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.
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:
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 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 thebg-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.
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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css" />
<title>Bootstrap text colors</title>
<style>
body::before {
display: block;
content: '';
height: 100px;
}
.img {
height: auto;
width: 20px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-white py-4 fixed-top">
<div class="container ms-auto">
<a class="navbar-brand" href="#">
<img src="https://www.lambdatest.com/resources/images/logos/logo.svg" alt="LambdaTest Logo" />
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-menu">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a href="#" class="nav-link">Platform</a></li>
<li class="nav-item"><a href="#" class="nav-link">Enterprise</a></li>
<li class="nav-item"><a href="#" class="nav-link">Resources</a></li>
<li class="nav-item"><a href="#" class="nav-link">Developers</a></li>
<li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
<li class="d-flex gap-3 ms-lg-4 ms-md-0 ms-sm-0">
<a href="" class="nav-link">Login</a>
<!-- Modal trigger -->
<button class="btn btn-outline-dark" data-bs-toggle="modal" data-bs-target="#bookdemo" type="button">
Book a Demo
</button>
<!-- Modal trigger end -->
<a class="btn btn-dark" href="#" role="button">Sign Up</a>
</li>
</ul>
</div>
</div>
</nav>
<section class="py-5 bg-primary-subtle">
<div class="container mb-5">
<h1 class="h2">Powerful Cloud Testing Platform to Accelerate Your Go-To-Market </h1>
<p class="lead text-dark-50">Secure, Reliable, and High Performance Test
Execution Cloud Build For Scale
</p>
</div>
<div class="container">
<div class="row row-cols-3 gap-3">
<div class="col bg-white p-5 rounded-3">
<h2 class="h5">Automated Testing</h2>
<p class="text-secondary">
Perform automated browser tests on a scalable, secure, and reliable automation cloud. Run JavaScript or Selenium tests at scale on 3000+ desktop and mobile browsers.
</p>
<a class="link-info link-underline link-underline-opacity-0 link-underline-opacity-75-hover" href="#">
More about Automation Testing
<img class="img" src="https://www.lambdatest.com/resources/images/slider/arrow.svg" alt="">
</a>
</div>
<div class="col bg-white p-5 rounded-3">
<h2 class="h5">HyperExecute</h2>
<p class="text-secondary">
Blazing fast test execution on cloud that will beat your local test execution speeds. A LambdaTest exclusive platform that is guaranteed faster than any other cloud grid offering.
</p>
<a class="link-info link-underline link-underline-opacity-0 link-underline-opacity-75-hover" href="#">
More about HyperExecute
<img class="img" src="https://www.lambdatest.com/resources/images/slider/arrow.svg" alt="">
</a>
</div>
<div class="col bg-white p-5 rounded-3">
<h2 class="h5">Live Testing</h2>
<p class="text-secondary">
Perform live interactive cross browser testing of your public or locally hosted websites and web apps on 3000+ real mobile and desktop browsers running on real operating system.
</p>
<a class="link-info link-underline link-underline-opacity-0 link-underline-opacity-75-hover" href="#">
More about Cross Browser Testing
<img class="img" src="https://www.lambdatest.com/resources/images/slider/arrow.svg" alt="">
</a>
</div>
<div class="col bg-white p-5 rounded-3">
<h2 class="h5">Mobile App Testing</h2>
<p class="text-secondary">
Perform live interactive testing of your mobile apps on a multitude of Android and iOS devices. Test and debug your mobile apps faster on both Emulators/Simulators or online real devices on cloud.
</p>
<a class="link-info link-underline link-underline-opacity-0 link-underline-opacity-75-hover" href="#">
More about Mobile App Testing
<img class="img" src="https://www.lambdatest.com/resources/images/slider/arrow.svg" alt="">
</a>
</div>
<div class="col bg-white p-5 rounded-3">
<h2 class="h5">Test at Scale</h2>
<p class="text-secondary" class="text-secondary">
Accelerate your whole pipeline from dev to release. Get faster feedback on code changes, manage flaky tests, and keep master green. Industry-leading test intelligence platform.
</p>
<a class="link-info link-underline link-underline-opacity-0 link-underline-opacity-75-hover" href="#">
More about Test at Scale
<img class="img" src="https://www.lambdatest.com/resources/images/slider/arrow.svg" alt="">
</a>
</div>
</div>
</div>
</div>
</section>
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Browser Output:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<title>Bootstrap text opacity</title>
<style>
.card {
height: 100%;
}
</style>
</head>
<body class="bg-light-subtle">
<section class="py-5">
<div class="container">
<div class="row row-cols-1 rows-cols-sm-1 row-cols-md-2 row-cols-xl-3 gx-4 gy-4 px-4">
<div class="col">
<div class="card">
<div class="card-header">
<h5 class="fs-6 text-success">Selenium</h5>
</div>
<div class="card-body">
<h5 class="card-title">Eliminate Visual bugs with Selenium</h5>
<p class="text-dark text-opacity-25">
Achieve pixel-perfect digital experiences with LambdaTest's Visual Regression Testing and Selenium Automation Framework. Automate detection of visual defects with support for all WebDriver and Selenium-based frameworks and programming languages, ensuring accuracy at every build and commit.
</p>
</div>
</div>
</div>
<!-- card 2 -->
<div class="col">
<div class="card">
<div class="card-header">
<h5 class="fs-6 text-info">Cypress</h5>
</div>
<div class="card-body">
<h5 class="card-title">Actionable Analytics for Test Automation</h5>
<p class="text-dark text-opacity-50">
The LambdaTest Test analytics is a powerful tool that can help you make the most of your test execution data.IInterpret your Selenium test results, identify failure patterns across different types of errors, understand how parallel tests can improve your build efficiency.
</p>
</div>
</div>
</div>
<!-- card 3 -->
<div class="col">
<div class="card">
<div class="card-header">
<h5 class="fs-6 text-warning">Playwright</h5>
</div>
<div class="card-body">
<h5 class="card-title">Real-Time Visibility of your Test execution Data</h5>
<p class="text-dark text-opacity-75">
At LambdaTest, we understand just how important your test execution data is. Our Test Analytics suite provides you with real-time visibility into your testing efforts so you can quickly identify any bottlenecks or high-impact issues.
</p>
</div>
</div>
</div>
<!-- card 4 -->
<div class="col">
<div class="card">
<div class="card-header">
<h5 class="fs-6 text-danger">HyperExecute</h5>
</div>
<div class="card-body">
<h5 class="card-title">Real Time Console and Execution Logs</h5>
<p class="text-dark text-opacity-75">
In legacy test clouds you get separate terminal and test execution logs, stitching them together is an ETL nightmare. With HyperExecute, you get a single automation dashboard view with both terminal logs of test commands and complete test execution logs. All test execution logs like terminal logs, test run video, network log, commands exceptions, and more, all available in a single intuitive dashboard.
</p>
</div>
</div>
</div>
<!-- card 5 -->
<div class="col">
<div class="card">
<div class="card-header">
<h5 class="fs-6 text-black">On-Premise Selenium Grid</h5>
</div>
<div class="card-body">
<h5 class="card-title">Out-Of-The-Box Custom Reports</h5>
<p class="text-dark text-opacity-75">
With LambdaTest Test Analytics, you can quickly and easily generate reports on the metrics that matter most to your business. Choose from a variety of out-of-the-box report templates for quality, coverage, and velocity analysis, or build custom reports and dashboards. LambdaTest Test Analytics quickly identifies issues so you can release better software faster.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous">
</script>
</body>
</html>
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 TestMu AI Real Time Browser Testing feature in the above output to know how compatible the text opacity effects are on Firefox v121 on macOS Monterey.
TestMu AI 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. TestMu AI 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.
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.
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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css" />
<title>Bootstrap background colors</title>
<style>
body::before {
display: block;
content: '';
height: 100px;
}
:is(.img, .section2-img, .arrow) {
height: auto;
}
.img {
width: 60px;
}
.section2-img {
width: 65px;
}
.arrow {
width: 15px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-white py-4 fixed-top">
<div class="container ms-auto">
<a class="navbar-brand" href="#">
<img src="https://www.lambdatest.com/resources/images/logos/logo.svg" alt="LambdaTest Logo" />
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-menu">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a href="#" class="nav-link">Platform</a></li>
<li class="nav-item"><a href="#" class="nav-link">Enterprise</a></li>
<li class="nav-item"><a href="#" class="nav-link">Resources</a></li>
<li class="nav-item"><a href="#" class="nav-link">Developers</a></li>
<li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
<li class="d-flex gap-3 ms-lg-4 ms-md-0 ms-sm-0">
<a href="" class="nav-link">Login</a>
<!-- Modal trigger -->
<button class="btn btn-outline-dark" data-bs-toggle="modal" data-bs-target="#bookdemo" type="button">
Book a Demo
</button>
<!-- Modal trigger end -->
<a class="btn btn-dark" href="#" role="button">Sign Up</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Why LambdaTest -->
<section class="py-5 bg-light">
<div class="container text-center pb-4">
<h1 class="display-6 fw-bold">Why LambdaTest?</h1>
<p class="lead">
Here's why LambdaTest is the choice of execution environment cloud for <br /> 2 Million+ developers & quality analysts.
</p>
</div>
<div class="container mb-4">
<div class="row row-cols-3 gx-3 gy-4 px-5">
<div class="col">
<div class="card p-3">
<div class="card-body d-flex gap-2 align-items-center">
<img class="img" src="https://www.lambdatest.com/resources/images/eee_velocity.svg" alt="">
<h2 class="card-title h5">Increased Release Velocity</h2>
</div>
</div>
</div>
<div class="col">
<div class="card p-3">
<div class="card-body d-flex gap-2 align-items-center">
<img class="img" src="https://www.lambdatest.com/resources/images/eee_feedback.svg" alt="">
<h2 class="card-title h5">Faster feedback to Developers</h2>
</div>
</div>
</div>
<div class="col">
<div class="card p-3">
<div class="card-body d-flex gap-2 align-items-center">
<img class="img" src="https://www.lambdatest.com/resources/images/eee_zerotest.svg" alt="">
<h2 class="card-title h5">Zero Test Flakiness Due To Infra</h2>
</div>
</div>
</div>
<div class="col">
<div class="card p-3">
<div class="card-body d-flex gap-2 align-items-center">
<img class="img" src="https://www.lambdatest.com/resources/images/eee_reduce.svg" alt="">
<h2 class="card-title h5">Reduced test execution time</h2>
</div>
</div>
</div>
<div class="col">
<div class="card p-3">
<div class="card-body d-flex gap-2 align-items-center">
<img class="img" src="https://www.lambdatest.com/resources/images/eee_insight.svg" alt="">
<h2 class="card-title h5">Deep Insights & Observability</h2>
</div>
</div>
</div>
<div class="col">
<div class="card p-3">
<div class="card-body d-flex gap-2 align-items-center">
<img class="img" src="https://www.lambdatest.com/resources/images/eee_zero.svg" alt="">
<h2 class="card-title h5">Zero Maintenance</h2>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- -->
<section class="py-5 bg-primary-subtle">
<div class="container mb-5">
<h1 class="h2">Powerful Cloud Testing Platform to Accelerate Your Go-To-Market</h1>
<p class="lead text-secondary">
Secure, Reliable, and High Performance Test Execution Cloud Build For Scale
</p>
</div>
<div class="container">
<div class="row row-cols-3 gap-3">
<div class="col bg-light p-5 d-flex flex-column gap-2">
<img class="section2-img" src="https://www.lambdatest.com/resources/images/community/community.svg" alt="">
<h2 class="h5">LambdaTest Community on Discourse</h2>
<p class="text-secondary fw-light">
Join the 100k+ LambdaTest community of testers and developers. Get exclusive access to resources, documents, certifications, courses, and more.
</p>
<a class="text-primary fw-light link-underline link-underline-opacity-0 link-underline-opacity-75-hover h5"
href="#">
Join our community
<img src="https://www.lambdatest.com/resources/images/community/arrow-right.svg" alt="">
</a>
</div>
<div class="col bg-light p-5 d-flex flex-column gap-2">
<img class="section2-img" src="https://www.lambdatest.com/resources/images/community/documentation.svg"
alt="">
<h2 class="h5">LambdaTest Documentation</h2>
<p class="text-secondary fw-light">
Learn more about LambdaTest products from the knowledge base.
</p>
<a class="text-primary fw-light link-underline link-underline-opacity-0 link-underline-opacity-75-hover h5"
href="#">
Read Documentation
<img src="https://www.lambdatest.com/resources/images/community/arrow-right.svg" alt="">
</a>
</div>
<div class="col bg-light p-5 d-flex flex-column gap-2">
<img class="section2-img" src="https://www.lambdatest.com/resources/images/community/codingjag.svg" alt="">
<h2 class="h5">Coding Jag Newsletter</h2>
<p class="text-secondary fw-light">
Supercharge your knowledge of testing, development, CI/CD, automation, and more as we bring the best content in the testing world to your inbox every week.
</p>
<a class="text-primary fw-light link-underline link-underline-opacity-0 link-underline-opacity-75-hover h5"
href="#">
Subscribe now for free
<img src="https://www.lambdatest.com/resources/images/community/arrow-right.svg" alt="">
</a>
</div>
<div class="col bg-light p-5 d-flex flex-column gap-2">
<img class="section2-img" src="https://www.lambdatest.com/resources/images/community/updates.svg" alt="">
<h2 class="h5">Product Updates</h2>
<p class="text-secondary fw-light">
Read updates on what is cooking at LambdaTest labs and send us your feedback on new features.
</p>
<a class="text-primary fw-light link-underline link-underline-opacity-0 link-underline-opacity-75-hover h5"
href="#">
Read updates
<img src="https://www.lambdatest.com/resources/images/community/arrow-right.svg" alt="">
</a>
</div>
<div class="col bg-light p-5 d-flex flex-column gap-2">
<img class="section2-img" src="https://www.lambdatest.com/resources/images/community/qna.svg" alt="">
<h2 class="h5">Q&A forums</h2>
<p class="text-secondary fw-light" class="text-secondary">
Explore the forum to ask a question or start a conversation with fellow QA, Developers, DevOps, and more.
</p>
<a class="text-primary fw-light link-underline link-underline-opacity-0 link-underline-opacity-75-hover h5"
href="#">
Explore Q&A forum
<img src="https://www.lambdatest.com/resources/images/community/arrow-right.svg" alt="">
</a>
</div>
<div class="col bg-light p-5 d-flex flex-column gap-2">
<img class="section2-img" src="https://www.lambdatest.com/resources/images/community/github.svg" alt="">
<h2 class="h5">GitHub</h2>
<p class="text-secondary fw-light" class="text-secondary">
Check LambdaTest's GitHub, contribute to Test-At-Scale (TAS) project, file bug reports, and requests.
</p>
<a class="text-primary fw-light link-underline link-underline-opacity-0 link-underline-opacity-75-hover h5"
href="#">
Lambdatest in GitHub
<img src="https://www.lambdatest.com/resources/images/community/arrow-right.svg" alt="">
</a>
</div>
</div>
</div>
</div>
</section>
<!-- More from LambdaTest community -->
<section class="bg-white py-5" style="padding: 0 12rem;">
<div class="container bg-light px-5 py-5">
<div class="text-center pb-5">
<h2 class="fw-bold display-5">More from LambdaTest community</h2>
<p class="lead">From the community's lenses and for the community</p>
</div>
<div class="px-5 row row-cols-1 gap-4">
<!-- Card 1 -->
<div class="border-start border-5 border-primary rounded d-flex gap-5 align-items-center bg-white px-5 py-4">
<div>
<p class="fw-bold">
<a class="link-dark link-underline link-underline-opacity-0 link-underline-opacity-75-hover"
href="#">LambdaTest Coding Challenge</a>
</p>
<p class="text-secondary fw-light">
Put on your 'Coding Hats' and participate in a series of Coding Challenges that will help you learn and grow as a QA professional.
</p>
</div>
<div class="bg-light rounded-circle p-2" role="button">
<img class="arrow" src="https://www.lambdatest.com/resources/images/community/arrow-right.svg" alt="">
</div>
</div>
<!-- Card 2 -->
<div class="border-start border-5 border-primary rounded d-flex gap-5 align-items-center bg-white px-5 py-4">
<div>
<p class="fw-bold">
<a class="link-dark link-underline link-underline-opacity-0 link-underline-opacity-75-hover"
href="#">LambdaTest Certifications</a>
</p>
<p class="text-secondary fw-light">
Enhance your resume and flaunt your Selenium automation skills with free certifications by LambdaTest.
</p>
</div>
<div class="bg-light rounded-circle p-2" role="button">
<img class="arrow" src="https://www.lambdatest.com/resources/images/community/arrow-right.svg" alt="">
</div>
</div>
<!-- Card 3 -->
<div class="border-start border-5 border-primary rounded d-flex gap-5 align-items-center bg-white px-5 py-4">
<div>
<p class="fw-bold">
<a class="link-dark link-underline link-underline-opacity-0 link-underline-opacity-75-hover"
href="#">LambdaTest Cypress Demo | How to run Cypress tests on LambdaTest</a>
</p>
<p class="text-secondary fw-light">
Watch a a Cypress demo on Automation Step by Step channel and learn from the tutorial on how to run Cypress tests on LambdaTest.
</p>
</div>
<div class="bg-light rounded-circle p-2" role="button">
<img class="arrow" src="https://www.lambdatest.com/resources/images/community/arrow-right.svg" alt="">
</div>
</div>
<!-- Card 4 -->
<div class="border-start border-5 border-primary rounded d-flex gap-5 align-items-center bg-white px-5 py-4">
<div>
<p class="fw-bold">
<a class="link-dark link-underline link-underline-opacity-0 link-underline-opacity-75-hover"
href="#">Cross browser Testing and Selenium test execution with LambdaTest</a>
</p>
<p class="text-secondary fw-light">
Catch creators of LambdaTest on EAWeekly as they discuss Selenium test execution, tunneling, roadmaps, and more.
</p>
</div>
<div class="bg-light rounded-circle p-2" role="button">
<img class="arrow" src="https://www.lambdatest.com/resources/images/community/arrow-right.svg" alt="">
</div>
</div>
</div>
</div>
</section>
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
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.
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.
Let’s create a Bootstrap color example for such a use case of the combination of the text and background color classes.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css" />
<title>Combination of bg and text color classes</title>
<style>
body::before {
display: block;
content: '';
height: 100px;
}
.img {
height: auto;
width: 30px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-white py-4 fixed-top">
<div class="container ms-auto">
<a class="navbar-brand" href="#">
<img src="https://www.lambdatest.com/resources/images/logos/logo.svg" alt="LambdaTest Logo" />
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-menu">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a href="#" class="nav-link">Platform</a></li>
<li class="nav-item"><a href="#" class="nav-link">Enterprise</a></li>
<li class="nav-item"><a href="#" class="nav-link">Resources</a></li>
<li class="nav-item"><a href="#" class="nav-link">Developers</a></li>
<li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
<li class="d-flex gap-3 ms-lg-4 ms-md-0 ms-sm-0">
<a href="" class="nav-link">Login</a>
<!-- Modal trigger -->
<button class="btn btn-outline-dark" data-bs-toggle="modal" data-bs-target="#bookdemo" type="button">
Book a Demo
</button>
<!-- Modal trigger end -->
<a class="btn btn-dark" href="#" role="button">Sign Up</a>
</li>
</ul>
</div>
</div>
</nav>
<section class="text-bg-light py-5" style="height: 100dvh;">
<div class="container">
<div class="d-flex flex-column gap-5 align-items-center">
<div class="text-center">
<h1>Get Started with LambdaTest Playwright Cloud</h1>
<p class="lead">Run Playwright tests on the LambdaTest cloud in just 3 steps.</p>
</div>
<!-- cards -->
<div class="d-flex gap-3 px-5">
<!-- card 1 -->
<div>
<img
class="mb-3"
src="https://www.lambdatest.com/resources/images/automation/1..svg" alt=""
style="height: auto; width: 26px;">
<p class="fs-3">Integrate</p>
<p class="text-secondary">
First, point your existing Playwright tests to LambdaTest with minor changes in your test script and declare test configurations.
</p>
</div>
<!-- card 2 -->
<div>
<img
class="img mb-3"
src="https://www.lambdatest.com/resources/images/automation/2..svg" alt="">
<p class="fs-3">Execute</p>
<p class="text-secondary">
Run your test builds on LambdaTest cloud from your local machine or CI/CD pipeline. Debug with ease using detailed analytics.
</p>
</div>
<!-- card 3 -->
<div>
<img
class="img mb-3"
src="https://www.lambdatest.com/resources/images/automation/3..svg" alt="">
<p class="fs-3">Scale</p>
<p class="text-secondary">
Effortlessly scale your test execution without worrying about setting up or maintaining an in-house testing infrastructure.
</p>
</div>
</div>
<div>
<button class="btn btn-dark btn-lg rounded-0" type="button">Contact Us</button>
</div>
</div>
</div>
</section>
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
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.
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.
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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<title>Bootstrap responsive padding and margin</title>
<style>
body::before {
display: block;
content: '';
height: 90px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-white py-4 fixed-top">
<div class="container ms-auto">
<a class="navbar-brand" href="#">
<img src="https://www.lambdatest.com/resources/images/logos/logo.svg" alt="LambdaTest Logo" />
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-menu">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a href="" class="nav-link">Platform</a></li>
<li class="nav-item"><a href="" class="nav-link">Enterprise</a></li>
<li class="nav-item"><a href="" class="nav-link">Resources</a></li>
<li class="nav-item"><a href="" class="nav-link">Developers</a></li>
<li class="nav-item"><a href="" class="nav-link">Pricing</a></li>
<li class="d-flex gap-3 ms-lg-4 ms-md-0 ms-sm-0">
<a href="" class="nav-link">Login</a>
<!-- Modal trigger -->
<button class="btn btn-outline-dark" data-bs-toggle="modal" data-bs-target="#bookdemo" type="button">
Book a Demo
</button>
<!-- Modal trigger end -->
<a class="btn btn-dark" href="#" role="button">Sign Up</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- -->
<section class="py-5 bg-light" style="min-height: 100vh;">
<div class="container">
<div class="d-flex flex-column align-items-center text-center">
<h1>
Real Device Cloud with <br /> Android & iOS Smartphones
</h1>
<p class="lead">
Test your applications using our real device cloud. <br /> Eliminate the need for an internal device library and reduce <br /> operational costs instantly.
</p>
</div>
<div class="container pt-5">
<section class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-1 g-sm-3 gy-sm-5 gx-md-4">
<div class="col mb-5 mb-md-0">
<h3 class="h4">
Test on Private Real Device Cloud
</h3>
<p>
Dedicated iOS and Android devices, exclusively for your team with 24x7 availability. Highly secure devices behind your own firewall that can be completely customized as per your own workflow.
</p>
<a class="d-inline-block pt-4 link-info link-underline-opacity-0"
style="font-size: 1.25rem; color: #0FBAC5;" href="#">
Signup For Free Now
<img src="https://www.lambdatest.com/resources/images/right_arrow.svg" alt="">
</a>
</div>
<div class="col mb-5">
<h3 class="h4">Visual Regression Testing With Real Devices</h3>
<p>
Run high volumes of tests with your favorite Automation Framework eg. Appium, XCUITest, Espresso and more. Integrate directly with popular CI/CD tools and
deploy faster then ever.
</p>
<a class="d-inline-block link-info link-underline-opacity-0 pt-4"
style="font-size: 1.25rem; color: #0FBAC5;" href="#">
Signup For Free Now
<img src="https://www.lambdatest.com/resources/images/right_arrow.svg" alt="">
</a>
</div>
<div class="col">
<h3 class="h4">Debug Real World Scenarios</h3>
<p>
Identify and debug web and native mobile apps in real-time using device logs, network logs, app logs, screenshots and videos. Identify UI anomaly and debug then and there with Appium Inspector and DevTools.
</p>
<a class="d-inline-block link-info link-underline-opacity-0 pt-4"
style="font-size: 1.25rem; color: #0FBAC5;" href="#">
Signup For Free Now
<img src="https://www.lambdatest.com/resources/images/right_arrow.svg" alt="">
</a>
</div>
</section>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
crossorigin="anonymous"></script>
</body>
</html>
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.
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.
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.
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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css" />
<title>Bootstrap border colors and width</title>
<style>
body::before {
display: block;
content: '';
height: 100px;
}
.img {
width: 700px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-white py-4 fixed-top">
<div class="container ms-auto">
<a class="navbar-brand" href="#">
<img src="https://www.lambdatest.com/resources/images/logos/logo.svg" alt="LambdaTest Logo" />
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-menu">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a href="#" class="nav-link">Platform</a></li>
<li class="nav-item"><a href="#" class="nav-link">Enterprise</a></li>
<li class="nav-item"><a href="#" class="nav-link">Resources</a></li>
<li class="nav-item"><a href="#" class="nav-link">Developers</a></li>
<li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
<li class="d-flex gap-3 ms-lg-4 ms-md-0 ms-sm-0">
<a href="" class="nav-link">Login</a>
<!-- Modal trigger -->
<button class="btn btn-outline-dark" data-bs-toggle="modal" data-bs-target="#bookdemo" type="button">
Book a Demo
</button>
<!-- Modal trigger end -->
<a class="btn btn-dark" href="#" role="button">Sign Up</a>
</li>
</ul>
</div>
</div>
</nav>
<section class="py-5" style="background: #000;">
<div class="container">
<div class="text-center pb-5">
<h1 class="text-white display-4 fw-bold">Test Analytics Overview</h1>
<p class="text-secondary lead">Access vital information on tests including test inconsistencies, number of
tests, <br />
and tests categorized by their status and environments.</p>
</div>
<div class="d-flex">
<div class="d-flex flex-column align-items-start">
<p class="fw-bold border-start border-3 border-info ps-2 py-2">
<a class="text-white-50 link-underline link-underline-opacity-0" href="#">Test Case Health Summary</a>
</p>
<p class="fw-bold border-start border-3 border-info ps-2 py-2">
<a class="text-white-50 link-underline link-underline-opacity-0" href="#">Test Summary</a>
</p>
<p class="fw-bold border-start border-3 border-info ps-2 py-2">
<a class="text-white-50 link-underline link-underline-opacity-0" href="#">Browser Categorization</a>
</p>
<p class="fw-bold border-start border-3 border-info ps-2 py-2">
<a class="text-white-50 link-underline link-underline-opacity-0" href="#">OS/Device Categorization</a>
</p>
<p class="fw-bold border-start border-3 border-primary ps-3 pe-4 py-3 w-75 rounded-end"
style="background: #181624;">
<a class="text-white link-underline link-underline-opacity-0 d-inline-block mb-3" href="#">Test trends</a>
<br />
<span class="text-secondary fs-6 fw-light mt-5">Analyze the trends of the tests executed on the platform
over a period of time</span>
</p>
<p class="fw-bold border-start border-3 border-info ps-2 py-2">
<a class="text-white-50 link-underline link-underline-opacity-0" href="#">Test Status Ratio</a>
</p>
</div>
<img class="img" src="https://www.lambdatest.com/resources/images/test_trends_ana.svg" alt="">
</div>
</div>
</section>
<!-- Extensive Error Insights -->
<section class="py-5" style="background: #000;">
<div class="container">
<div class="text-center pb-5">
<h2 class="text-white fw-bold display-5">Extensive Error Insights
</h2>
<p class="text-secondary lead">Access all HyperExecute insights in one place. Quick insights on the count of the
Jobs, Tasks, and <br /> Stages run on the platform and their insights.
</p>
</div>
<div class="d-flex align-items-center gap-5">
<img class="img" src="https://www.lambdatest.com/resources/images/lt_error.svg" alt="">
<div class="d-flex flex-column gap-3">
<h3 class="text-white">Grouped Error Stats</h3>
<p class="text-secondary">Know your bugs better with the LambdaTest Test Analytics. Examine the tests
categorized by their Status on LambdaTest Platform.</p>
<a class="link-light link-underline link-underline-opacity-0 link-underline-opacity-75-hover d-inline-flex gap-3"
href="#">
Know more
<img src="https://www.lambdatest.com/resources/images/analytics_icon.svg" alt="">
</a>
</div>
</div>
</div>
</section>
<!-- HyperExecute Test Analytics -->
<section class="py-5" style="background: #000;">
<div class="container">
<div class="text-center pb-5">
<h2 class="text-white fw-bold display-5">HyperExecute Test Analytics
</h2>
<p class="text-secondary lead">Easy access to information about the count, and type of errors in test analytics
<br /> through the highly customizable widgets.
</p>
</div>
<div class="d-flex align-items-center">
<div class="d-flex flex-column">
<p class="fw-bold border-start border-3 border-info ps-2 py-2">
<a class="text-white-50 link-underline link-underline-opacity-0" href="#">Job Insights</a>
</p>
<p class="fw-bold border-start border-3 border-primary ps-3 pe-4 py-3 w-75 rounded-end"
style="background: #181624;">
<a class="text-white link-underline link-underline-opacity-0 d-inline-block mb-3" href="#">Stage Trends</a>
<br />
<span class="text-secondary fs-6 fw-light mt-5">Analyze the trends of the Stage for each Job executed on the
platform</span>
</p>
<p class="fw-bold border-start border-3 border-info ps-2 py-2">
<a class="text-white-50 link-underline link-underline-opacity-0" href="#">Task Trends</a>
</p>
</div>
<img class="img" src="https://www.lambdatest.com/resources/images/stage_trends.svg" alt="">
</div>
</div>
</section>
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
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.
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.
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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css" />
<title>Bootstrap border radius</title>
<style>
body::before {
display: block;
content: '';
height: 100px;
}
.img {
height: auto;
width: 60px;
}
li::marker {
color: #676785;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-white py-4 fixed-top">
<div class="container ms-auto">
<a class="navbar-brand" href="#">
<img src="https://www.lambdatest.com/resources/images/logos/logo.svg" alt="LambdaTest Logo" />
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-menu">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a href="#" class="nav-link">Platform</a></li>
<li class="nav-item"><a href="#" class="nav-link">Enterprise</a></li>
<li class="nav-item"><a href="#" class="nav-link">Resources</a></li>
<li class="nav-item"><a href="#" class="nav-link">Developers</a></li>
<li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
<li class="d-flex gap-3 ms-lg-4 ms-md-0 ms-sm-0">
<a href="" class="nav-link">Login</a>
<!-- Modal trigger -->
<button class="btn btn-outline-dark" data-bs-toggle="modal" data-bs-target="#bookdemo" type="button">
Book a Demo
</button>
<!-- Modal trigger end -->
<a class="btn btn-dark" href="#" role="button">Sign Up</a>
</li>
</ul>
</div>
</div>
</nav>
<section class="py-5 bg-light-subtle">
<div class="container" style="width: 80%;">
<div class="pb-5">
<h1 class="pb-4 h1 fw-bold display-4">Web Scraping with Python Tutorial - A Complete Guide with Examples</h1>
<div class="d-flex justify-content-between ">
<div class="d-flex gap-3">
<div>
<img class="img rounded-circle"
src="https://secure.gravatar.com/avatar/2b0ab45992e9a7f49fa7ee0fa0e245d7?s=120&d=mm&r=r" alt="">
</div>
<div class="d-flex flex-column">
<span class="fw-semibold">Himanshu Sheth</span>
<span class="fw-light">Posted On: November 7, 2023</span>
</div>
</div>
<div class="d-flex flex-column">
<span>
<img src="https://www.lambdatest.com/blog/wp-content/uploads/2022/04/blog-view-count.png" alt="">
148214 Views
</span>
<span>
<img src="https://www.lambdatest.com/blog/wp-content/uploads/2022/04/blog-Clock.png" alt="">
40 Min Read
</span>
</div>
</div>
</div>
<div class="d-flex gap-3 align-items-center border-1 border-bottom pb-3">
<a class="link-dark link-underline link-underline-opacity-0 link-underline-opacity-75-hover d-flex align-items-center gap-3"
href="#">
Home <span class="fw-bold fs-5">></span>
</a>
<a class="link-dark link-underline link-underline-opacity-0 link-underline-opacity-75-hover d-flex align-items-center gap-3"
href="#">
Blog
</a>
<span class="fw-bold fs-5">></span>
<span class="fw-semibold" style="color: #0EBAC5;">
Web Scraping with Python Tutorial - A Complete Guide with Examples
</span>
</div>
</div>
<!-- Article Content -->
<section class="container d-flex" style="line-height: 1.7rem; width: 80%">
<div>
<section class="py-3">
<p>
We live in an era where we are surrounded by data that can be harnessed by extracting meaningful insights from it. As quoted by Tim Berners-Lee, inventor of the World Wide Web - " <i>Data is a precious thing and will last longer than the systems themselves.</i>"
</p>
<p>
If the data is the new oil, web scraping (or web harvesting) is the expeller that helps squeeze more oil.🙂Web scraping can be leveraged for analyzing and deriving actionable insights from tons of information available on
the internet.
</p>
<p>
Irrespective of the business domain (e.g., eCommerce, EdTech, Fintech, etc.), scraping can be used for market research, pricing intelligence, lead generation, and sentiment analysis, to name a few! Though web scraping is
immensely useful, it comes with a caveat - Scraping should be done legally and ethically, respecting the website's T&C and data privacy regulations.
</p>
<p>
By the end of this blog on web scraping with Python, you will learn to scrap static and dynamic websites using the best Python tools (or libraries) like PyUnit, pytest, and Beautiful Soup. The actionable examples will help
you harness the capabilities of web scraping with Python to extract meaningful insights from websites.
</p>
</section>
<section class="container border-5 border-start border-success bg-light rounded py-3">
<p class="fw-bold">TABLE OF CONTENTS</p>
<div>
<ul class="d-flex flex-column gap-3">
<li>
<a class="link-underline link-underline-opacity-0 link-underline-opacity-0" href="#">
What is WebScraping?
</a>
</li>
<li>
<a class="link-underline link-underline-opacity-0" href="#">
Prominent Use Cases of Web Scraping
</a>
</li>
<li>
<a class="link-underline link-underline-opacity-0" href="#">
Python Libraries and Tools for Web Scraping
</a>
</li>
<li>
<a class="link-underline link-underline-opacity-0" href="3">
Demonstration: Web Scraping With Python
</a>
</li>
<li>
<a class="link-underline link-underline-opacity-0" href="#">
Web Scraping Done Right!
</a>
</li>
<li>
<a class="link-underline link-underline-opacity-0" href="#">
Frequently Asked Questions (FAQs)
</a>
</li>
</ul>
</div>
</section>
<section class="container py-4">
<h3 class="fw-bold fs-1">What is Web Scraping?</h3>
<p>
To set the ball rolling, let's do a quick recap of the <i>What & Why</i> of web scraping. In simple terms, web scraping, or web harvesting (or data extraction), is the technique for deriving information (that matters) from
websites.
</p>
<p>
Shown below is the simplistic representation of web scraping that shows that input is a website that needs to be scrapped by the scraping logic.
</p>
<img src="https://www.lambdatest.com/blog/wp-content/uploads/2023/11/Web-Scraping-Architecture.png" alt="">
</section>
</div>
<div class="container pt-3 d-none d-lg-block">
<img src="https://mbaziiraronald.github.io/LambdaTest_Images/LambdaTest_Image_7.png" alt="" width="270px"
height="auto">
</div>
</section>
</section>
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
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.
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.
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.
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.
Here is how you could achieve the same results as seen in the images using Bootstrap.
Code:
<div>
<!-- rounded border indicator -->
<div class="mb-5 d-flex align-items-center gap-4">
<a class="text-decoration-none link-dark border border-2 p-2 px-3 rounded-circle border-primary" href="#">1</a>
<a class="text-decoration-none link-dark" href="#">2</a>
<a class="text-decoration-none link-dark" href="#">3</a>
<a class="text-decoration-none link-dark" href="#">4</a>
<a class="text-decoration-none link-dark" href="#">5</a>
<a class="text-decoration-none link-dark border border-2 p-2 px-3 rounded-circle" href="#">
<span class="text-primary">></span>
</a>
</div>
<!-- With square border indicator and frame -->
<div class="d-flex align-items-center gap-4 border px-5" style="width: fit-content;">
<a class="text-decoration-none link-dark text-secondary" href="">
<span class="fs-5 text-dark"><</span>
Previous
</a>
<a class="text-decoration-none link-dark border-start ps-4" href="#">1</a>
<a class="text-decoration-none link-dark" href="#">2</a>
<a class="text-decoration-none link-dark" href="#">3</a>
<a class="text-decoration-none link-dark border border-info border-2 p-2 px-3" href="#">4</a>
<a class="text-decoration-none link-secondary" href="#">...</a>
<a class="text-decoration-none link-secondary border-end pe-4" href="#">7</a>
<a class="text-decoration-none link-dark text-secondary" href="">
Next
<span class="fs-5 text-dark">></span>
</a>
</div>
</div>
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.
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.
Frequently asked questions
Did you find this page helpful?
More Related Hubs
TestMu AI forEnterprise
Get access to solutions built on Enterprise
grade security, privacy, & compliance
- Advanced access controls
- Advanced data retention rules
- Advanced Local Testing
- Premium Support options
- Early access to beta features
- Private Slack Channel
- Unlimited Manual Accessibility DevTools Tests