Type to generate custom UI components with AI

Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

Use Bootstrap Border to Build Beautiful Modern Applications

Welcome to our comprehensive guide on Bootstrap Borders!

Bootstrap is a popular front-end framework that facilitates the development of responsive and mobile-friendly websites. It includes various components, utilities, and styles to streamline building modern web applications. Borders in Bootstrap can be easily customized using utility classes or through custom CSS.

In this article, we will explore the various border classes provided by Bootstrap and how they can be used to enhance the visual design of your web pages. Whether you are a web developer, UI/UX designer, or a coding enthusiast, understanding Bootstrap borders will empower you to create visually appealing and professional-looking websites.

So, let’s dive in and explore the world of Bootstrap borders!

Understanding Bootstrap Borders

  • Bootstrap provides a wide range of classes that allow you to add and remove borders on your web elements.

  • Borders play a crucial role in defining the visual hierarchy of a web page and can be used to separate different sections, highlight important elements, and create an aesthetically pleasing design.

  • In Bootstrap, border classes can be categorized as additive and subtractive.

  • Additive border classes add borders to elements, while subtractive border classes remove borders.

  • These classes provide a flexible way to control the appearance of borders on your web elements with just a few lines of code.

Getting Started With Bootstrap Borders

Here are some basic steps to get started with Bootstrap borders:

1. Include Bootstrap: Ensure that you have included the Bootstrap CSS file in your HTML document. You can download Bootstrap and host it yourself or include it from a CDN (Content Delivery Network).

2. Add the following line in the <head> section of your HTML document: <link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css>">

3. Apply Bootstrap Border Classes: Bootstrap provides utility classes for applying borders to elements. Here are some commonly used classes:

.border: Adds a basic border to an element..border-0: Removes the border from an element..border-top, .border-right, .border-bottom, .border-left: Adds borders to specific sides of an element..border-*: Replace with a specific size (e.g., border-2, border-3) to set the border width.

To get started, let’s take a look at a simple example program that demonstrates the usage of the primary bootstrap border class :

<div class="border border-primary border-2 p-3"> This element has a primary border. </div>

4. Custom Borders with CSS: If you need more control over your borders, you can use custom CSS to customize your own Bordered Bootstrap. Bootstrap provides a base set of border utilities; you can extend them as needed. For example:

<style> .custom-border { border: 2px solid #007bff; /* Primary color border */ border-radius: 8px; /* Border radius */ padding: 10px; } </style> <div class="custom-border"> This element has a custom border. </div>

Customize the CSS styles according to your design requirements.

Remember that Bootstrap is highly customizable, and you can refer to the official documentation for more details on borders and other styling options: Bootstrap Documentation.

Now that we have a basic understanding of Bootstrap borders, let’s explore each type of Bootstrap border class in more detail.

1. Additive Border Classes

The additive border classes in Bootstrap allow you to add borders to different sides of an element.

Let’s look at each of these classes and see how they can be implemented.

ClassDescription
.borderAdds a border all around the element.
.border-topAdds a border on the top edge of the element.
.border-leftAdds a border on the left edge of the element.
.border-rightAdds a border on the right of the element.
.border-bottomAdds a border on the bottom of the element.

Let’s see additive border classes in action

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css”>
<style>
/* CSS for Square boxes */
span {
display: inline-block;
width: 100px;
height: 100px;
margin: 16px;
background-color: aliceblue;
}
</style>
</head>
<body>
<div style=”margin-top: 40vh;margin-left: 40vw;”>
<h2>Additive Borders</h2>
<span class=”border border-primary border-2 p-3″>
All sides border.
</span>
<span class=”border-top border-primary border-2 p-3″>
Border top.
</span>
<span class=”border-primary border-bottom border-2 p-3″>
Border bottom.
</span>
<span class=”border-start border-primary border-2 p-3″>
Border left.
</span>
<span class=”border-end border-primary border-2 p-3″>
Border right.
</span>
</div>
<script src=”src/script.js”></script>
</body>
</html>

2. Subtractive Border Classes

The subtractive border classes in Bootstrap allow you to add borders to different sides of an element.

Let’s take a closer look at each of these classes and see how they can be implemented.

ClassDescription
.border-0Removes the border from all around the element if it exists.
.border-top-0Removes the border from the top edge of the element if it exists.
.border-left-0Removes the border from the left edge of the element if it exists.
.border-right-0Removes the border from the right of the element if it exists.
.border-bottom-0Removes the border from the bottom of the element if it exists.

Let’s see subtractive border classes in action

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <style>
        /* CSS for Square boxes */
        span {
            display: inline-block;
            width: 100px;
            height: 100px;
            margin: 16px;
            background-color: aliceblue;
        }
    </style>
  </head>
  <body>
  <div style="margin-top: 40vh;margin-left: 40vw;">
    <h2>Subtractive Borders</h2>
    <span class="border border-0 border-primary p-3">
      No Border.
    </span>
    <span class=" border border-top-0 border-primary p-3">
      No Border Top 
    </span>
    <span class="border border-primary border-bottom-0 p-3">
      No Border Bottom 
    </span>
    <span class=" border border-start-0 border-primary p-3">
      No Border Left
    </span>
    <span class="border border-primary border-end-0 p-3">
      No Border Right
    </span>
  </div>
    <script src="src/script.js"></script>
  </body>
</html>

Responsive Bootstrap Border

In Bootstrap, you can make borders responsive using the responsive utility classes provided by Bootstrap. These classes allow you to control the visibility of elements based on the screen size.

Here’s an example of how you can create responsive borders using Bootstrap:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="<https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css>">
  <style>
    /* Custom style for demonstration purposes */
    .custom-border {
      padding: 20px;
      margin: 20px;
      text-align: center;
    }
  </style>
  <title>Responsive Bootstrap Borders</title>
</head>
<body>

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="custom-border border border-primary rounded p-3">
        <h2>Responsive Border</h2>
        <p>This border will be visible on medium and larger screens.</p>
      </div>
    </div>
    <div class="col-md-6">
      <div class="custom-border border border-success rounded p-3 d-md-none">
        <h2>Responsive Border</h2>
        <p>This border will be visible on small screens.</p>
      </div>
    </div>
  </div>
</div>

<script src="<https://code.jquery.com/jquery-3.2.1.slim.min.js>"></script>
<script src="<https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js>"></script>
<script src="<https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js>"></script>
</body>
</html>

In this example:

  • The Bootstrap grid system creates a two-column layout with col-md-6 classes.

  • Two div elements with the class custom-border are created, each with a different border color (border-primary and border-success).

  • The d-md-none class is added to the second div, making it hidden on medium and larger screens (md refers to medium screens in Bootstrap).

This way, the first div will be visible on medium and larger screens, and the second div will be visible only on small screens, creating a responsive border effect. You can customize the classes and styles based on your specific requirements.

Refer to this YouTube video tutorial to learn more about responsive bootstrap borders.

Border Color Bootstrap

  • Bootstrap provides various classes to set the color of borders.

  • These classes are named after theme colors and can be applied in combination with the border classes.

  • If you require a custom color for your borders, you can easily set it using CSS.

A. Using Bootstrap Classes for Border Colors

Bootstrap offers a range of classes that allow you to set border colors based on predefined theme colors. By applying these classes, you can quickly change the appearance of borders without writing custom CSS.

Here is an example that demonstrates using Bootstrap classes to set border colors:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <style>
        /* CSS for Square boxes */
        span {
            display: inline-block;
            width: 100px;
            height: 100px;
            margin: 16px;
            background-color: rgb(248, 250, 251);
        }
    </style>
  </head>
  <body>
  <div style="margin-top: 40vh;margin-left: 40vw;">
  <h2>Borders</h2>

  <p>Learn Border Color With Purecode</p>

  <span class="border border-primary border-2"></span>
  <span class="border border-secondary border-2"></span>
  <span class="border border-success border-2"></span>
  <span class="border border-danger border-2"></span>
  <span class="border border-warning border-2"></span>
  <span class="border border-info border-2"></span>
  <span class="border border-light border-2"></span>
  <span class="border border-dark border-2"></span>
  </div>
    <script src="src/script.js"></script>
  </body>
</html>

In the above example,

  • We have used Bootstrap’s color classes to set the border color of each <span> element.

  • By applying the .border-{color} class, you can easily change the color of the border to match your design requirements.

  • Additionally, you can combine these classes with other border classes to create unique and visually appealing designs.

B. Manual Customization of Border Color Bootstrap

  • If you require a custom color for your borders that is not available in Bootstrap’s predefined color classes, you can manually set it using CSS.

  • This gives you complete control over the color of your borders and allows for greater customization.

  • To set a custom border color, you can use CSS and apply it to your HTML elements.Here’s an example that demonstrates how to set a custom border color bootstrap using CSS:

<style>
    .custom-border {
        border: 1px solid #FF0000;
    }
</style>

<div class="custom-border"></div>

In the above code snippet,

  • we have defined a custom class called .custom-border and applied it to a <div> element.

  • The CSS rule sets the border color to red (#FF0000). You can modify this value to any valid CSS color code to achieve your desired border color.

By combining the predefined classes provided by Bootstrap and the ability to define custom colors using CSS, you have full control over the appearance of your borders. This allows for endless possibilities when it comes to creating visually appealing and unique designs.

Visit this article by geeksforgeeks for more information on border colors.

Now that we have covered border colors let’s explore how you can customize the border radius in Bootstrap.

Border Radius

  • Border radius is a property that allows you to create rounded corners on elements.

  • This can soften the sharp edges’ visual appearance and create a more friendly and modern design.

  • Bootstrap provides a range of classes that allow you to apply border-radius to your elements easily.

A. Applying Border Radius to Specific Corners

Bootstrap allows you to apply border-radius to specific corners of an element. This gives you granular control over the roundedness of each corner and enables you to create unique designs.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <style>
        /* CSS for Square boxes */
        span {
            display: inline-block;
            width: 100px;
            height: 100px;
            margin: 16px;
            background-color: rgb(248, 250, 251);
        }
    </style>
  </head>
  <body>
  <div style="margin-top: 40vh;margin-left: 40vw;">
  <h2>Borders</h2>

  <p>Learn Border Radius With Purecode</p>

  <span class="border border-primary border-4 rounded"></span>
  <span class="border border-secondary border-4 rounded-top"></span>
  <span class="border border-danger border-4 rounded-bottom"></span>
  <span class="border border-success border-4 rounded-end"></span>
  <span class="border border-warning border-4 rounded-start"></span>
  </div>
    <script src="src/script.js"></script>
  </body>
</html>

Let’s take a closer look at each of these classes:

  1. .rounded Class
    • The .rounded class applies a border radius to all four corners of an element, creating a rounded shape.
    • This class is useful when you want to give an element an overall rounded appearance without modifying individual corners
  2. .rounded-top Class
    • The .rounded-top class applies a border-radius only to the top corners of an element.
    • This can be useful when creating a container with rounded top corners and sharp bottom corners.
  3. .rounded-end Class
    • The .rounded-right class applies a border-radius only to the right corners of an element.
    • This can be useful when creating a container with rounded right corners and sharp left corners.
  4. .rounded-bottom Class
    • The .rounded-bottom class applies a border-radius only to the bottom corners of an element.
    • This can be useful when you want to create a container with rounded bottom corners and sharp top corners.

Now that we have explored applying border-radius to specific corners let’s move on to applying border-radius to the entire element.

B. Applying Border Radius to Entire Element

In addition to applying border-radius to specific corners, Bootstrap provides the .rounded-circle class, which allows you to create circular elements.

This class is particularly useful for creating rounded images or circular avatars.

To apply the .rounded-circle class, add it to the element’s HTML tag:

<img src="path/to/image.jpg" alt="Avatar" class="rounded-circle">

In the above code snippet,

  • We have added the .rounded-circle class to an <img> element. This results in the image being displayed with a circular shape.

  • You can also apply this class to other elements, such as <div> or <span>, to create circular shapes.

  • Additionally, if you want to remove the border-radius from an element with a rounded shape, you can use the .rounded-0 class.

  • This class sets the border radius of an element to 0 pixels, effectively removing any rounded corners.

It’s time to experiment with the various additive and subtractive border classes, along with trying different border colors and border-radius to enhance the visual appeal of your web elements. Looking for even more design power?

Consider incorporating PureCode. By using PureCode, you can optimize your workflow and elevate your web design skills. Try these features of Bootstrap borders with PureCode today to see the transformative impact on your projects.

Practical Applications of Bordered Bootstrap

Here’s a practical example of using Bootstrap borders in a simple webpage.

In this example, I’ll create a card component with a border to showcase a product:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <title>Bootstrap Borders Example</title>
</head>
<body>

<div class="container mt-5">
  <div class="card border-primary">
    <div class="card-header">
      <h5 class="card-title">Purecode</h5>
    </div>
    <div class="card-body">
      <p class="card-text">PureCode.ai is a developer tool that harnesses AI to transform design images into read-to-use front-end code.</p>
      <a href="https://purecode.ai/" class="btn btn-primary">Try Now</a>
    </div>
  </div>
</div>
</body>
</html>

In this example:

  • The card class is used to create a Bootstrap card component.

  • The border-primary class is added to give the card a primary color border.

  • The card has a header section with a title, a body section with some sample text, and a “Buy Now” button.

You can customize the border color by replacing border-primary with other Bootstrap border color classes like border-secondary, border-success, etc. You can find more information on Bootstrap border colors in the official documentation.

To try more such implementations of bootstrap borders in your applications, follow along with this YouTube video tutorial.

Conclusion: Elevate Your Web Designs

This guide explored Bootstrap’s border classes for enhancing web page design. It covered additive (.border, .border-top, etc.) and subtractive classes (.border-0), allowing selective border removal. The guide also discussed border color customization and the impact of border-radius on visual design.

In essence, Bootstrap borders offer diverse tools for creating visually appealing designs. Experiment with these classes, customize colors, and play with border-radius in your web projects to enhance aesthetics.

Apply your knowledge now! Experiment with Bootstrap borders in your projects. Try out different classes, customize colors, and use border-radius.

For an efficient coding experience, use PureCode. Try Bootstrap borders with PureCode today to elevate your web design skills.

Happy coding!

Yash Poojari

Yash Poojari