How to specify border colors in Bootstrap ?
Bootstrap provides us with different classes that can be used with different HTML tags such as <button>, <a>, <input>, and <label> to apply custom button borders.These classes are as follows.
In this article, we will learn to implement border colors using Bootstrap.
CDN link: First, add Bootstrap scripts needed for your project.
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css”>
Example 1: The following code shows a simple use of border classes.
Note: As you can see the output is barely visible. For this purpose, Bootstrap provides border colors.
Bootstrap border colors: It also provides a series of classes that can be used on the above bootstrap border classes to apply custom border styles. These classes are as follows:
Note: In order for the above classes to work, Bootstrap border classes should also be mentioned along with the above classes. The below examples use the Bootstrap “border” class.
Example 2: The following example demonstrates classes “border-primary”, “border-secondary”, “border-success”,”border-danger”,”border-warning” with blue,gray,green,red and yellow colors respecively.
Example 3: The following example demonstrates classes “border-info”,”border-light”,”border-dark”,”border-white” with cyan,light,black and white colour respectively.
Please Login to comment...