Border utilities in Bootstrap 4 provide easy ways to add borders

I have been searching for a solution, but I can't seem to find it. Bootstrap 4 offers utility classes for adding and removing borders, but is there a way to define the border width or style like solid or dashed?

<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>

There are also classes that adjust margins and padding such as mr-3 and pt-2.

Could it be that I need to create my own definitions?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Unfortunately, Bootstrap 4 does not include specific classes for customizing border width or style.

However, you can easily create your own class like this:

.border-3 {
    border-width:3px !important;
}

Check out this example on Codeply

Keep in mind that using !important is necessary in this case due to the use of Bootstrap's utility classes which also use !important.

Answer №2

Recommends incorporating a bootstrap extension.

/* _border-width-customs.scss */
$border-width-custom-1: 1px !default;
$border-width-custom-2: 2px !default;
$border-width-custom-3: 3px !default;
$border-width-custom-4: 4px !default;
$border-width-custom-5: 5px !default;
$border-width-custom-6: 6px !default;
$border-width-custom-7: 7px !default;
$border-width-custom-8: 8px !default;

$border-width-customs: ("1": $border-width-custom-1, "2": $border-width-custom-2, "3": $border-width-custom-3, "4": $border-width-custom-4, "5": $border-width-custom-5, "6": $border-width-custom-6, "7": $border-width-custom-7, "8": $border-width-custom-8);

@each $name, $size in $border-width-customs {
    @each $var in '', 'top-', 'right-', 'bottom-', 'left-' {
        .border-#{$var}#{$name} { border-#{$var}width: $size !important; border-#{$var}style: solid; border-#{$var}color: $border-color;}
    }
}

Answer №3

When it comes to using borders in Bootstrap 4, you have a variety of options:

  • Add or remove borders
  • Customize border colors
  • Adjust border radius
  • Float elements
  • Create responsive floats
  • Center alignment
  • Set width
  • Define height
  • Control spacing

If you want to create your own custom classes for borders, you can do something like this:

.border-dotted{
 border-style: dotted;
}
.border-10{
border-style:solid;
 border-width: 10px;
}
<h1 class="border-dotted">Hi</h1>
<h1 class="border-10">Hi!</h1>

Answer №4

For more information on borders in Bootstrap, check out Bootstrap's Border Documentation.

While there are basic styling classes available like btn-default and btn-warning, as well as border radius options, any additional styling would need to be implemented manually.

This may be due to a lack of demand for specific border styles in Bootstrap's framework, the complexity of defining numerous options efficiently, or simply the ease of creating custom styles within your own classes.

Answer №5

When working with the bootstrap npm library, take a look at _variable.scss to locate: $border-width: 1px !default;

To customize this value, create a new .scss file where you can import bootstrap modules.

$myborder-width: 3px;

$border-width: $myborder-width;

@import "../node_modules/bootstrap/scss/bootstrap";(include only necessary modules)

You can then convert this main.scss file to css and utilize it instead of bootstrap.css in your html code.

Answer №6

With the latest version of bootstrap, V5, you have the ability to achieve the following:

$styles: (
  "text-color": (
    property: color,
    class: text,
    values: (
      primary: #007bff,
      secondary: #6c757d,
      success: #28a745,
      danger: #dc3545
    )
  )
)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Prioritize the Menu display

Is there a way to bring the menu's black background in front of the body text in the image below? Here is the JSFiddle link for reference: https://jsfiddle.net/johnking/j58cubux/6/ The issue occurs when scrolling down and the menu is not clearly vi ...

htmlcss

Learn how to automatically retrieve messages without refreshing the page by leveraging the power of AJAX

displaying notifications with:- $call = "SELECT * FROM `chat` WHERE fromthe = '$email' and tothe='theadmin' UNION ALL SELECT * FROM `chat` WHERE fromthe = 'theadmin' and tothe='$email' order by id desc"; mysqli_quer ...

javascriptphphtmlajaxmysqli

Place a Button or Link Right Below the Title on the Custom Post Type Editing Page

I am currently working on customizing the backend of a WordPress site for a client by adding multiple custom post types. These custom posts are only meant to be displayed on the front-end through a specific loop on one page, preventing users from accessing ...

phphtmlwordpress

Having divs stacked on top of each other with one positioned fixed and the other

In my HTML document, there is a main div element called container that contains several child elements also in the form of divs. One specific child div, named top_bar, has its positioning set to fixed, while the rest of the child divs have relative posit ...

htmlcssposition

When attempting to retrieve a value from a dropdown menu in HTML using PHP, an undefined index error occurs

Having trouble extracting a value from a select tag in HTML using PHP, as it keeps reporting an undefined index error. Here's my HTML form: <form method="POST" action="proceso.php"> <label for="language">Language</label> <se ...

phphtmlselect

How to display only the thumbnail on WordPress archive page and remove the post excerpt

I am currently in the process of revamping my category archive to resemble a grid layout by utilizing custom CSS. I have successfully eliminated the elements I desired using code like this: .archive .entry-footer { display: none; } Now, I only have t ...

csswordpress

Creating a dynamic progress bar that scrolls for multiple elements

I am currently working on implementing a scrolling progress bar to show users how much of an article within a div they have read. For reference, something similar can be seen on this site. I have created my custom progress bar and coded it on fiddle, whe ...

javascriptjqueryhtmlscrollprogress-bar

There are two different ways to set a hyperlink in HTML. One method is by using the href attribute, where you provide the URL inside the quotation marks. The other

While browsing, I stumbled upon this interesting piece of JavaScript code: onClick="self.location.href='http://stackoverflow.com/'" I incorporated this code into my website, and it seems to have the same effect as using the href attribute. Sin ...

javascripthtmlonclickhref

The radio buttons are stuck and not changing their selection

Having a group of radio buttons with the same name, when one is checked, it automatically selects another one in the group. Here is my current code: <input name="a" type="radio"> <input name="a "type="radio" checked> JS $("input[type='r ...

javascripthtml

Enhance the user experience with a personalized video player interface

I am facing difficulty in creating a responsive video with custom controls. While I understand that using a <figure></figure> element and setting the width to 100% makes the video responsive, I am struggling with making the progress bar also r ...

javascriptcsshtmlvideo

A Guide to Configuring jQuery UI Slider with Three Distinct Colors

I'm currently implementing the UI Slider on my website. However, I would like to customize the slider with three different colors: Handle Color Previous portion of Handle Next portion of Handle I want it to look something like this: Currently, I h ...

jquerycssjquery-ui-slider

Employing CSS selectors to target the subsequent element that is accessible

Here is the structure of my HTML: <input type = "checkbox" style = "display:none" id = "select"> <label for = "select" id = 'click'> click </label> <div class = 'next'> </div> I am trying to style t ...

htmlcsscss-selectors

Using htaccess to restrict access to a specific URL path based on IP Address

(I don't believe the previous link addresses this question; please refer to the comment below) I am currently utilizing a CMS platform that utilizes a database instead of the usual file-directory structure for managing webpages. Due to the absence of ...

htmlapache.htaccess

Enhance the user experience by adding visual appeal to the first option in the selection form. Make it

Is there a way to change the color of the first option in the selection box to grey, similar to the example above? Additionally, how can I create a clickable icon that will display all options? The current setup is not functioning correctly. <div clas ...

htmlcssformsfont-awesome

Provide spacing on the sides for a background position

Is there a way to evenly space my background image with 10px margins on all sides instead of just the left side? Currently, it's only working on the left side. .login-page { display: flex; flex-direction: column; background: url("../src/As ...

htmlcss

The head tag specification doesn't properly include the CSS file reference

I have a question regarding my HTML5 web page and the way I am referencing a CSS file in the head tag. Currently, I have it set up like this: <head> <link rel="stylesheet" href="css/style.css" type="text/css"/> </head> However, it d ...

htmlcss

Displaying a visual representation of time remaining with a countdown progress bar

While browsing online, I stumbled upon a creative progress bar code featured on this particular website. My goal is to implement a countdown timer that displays the remaining minutes and seconds rather than a percentage. In order to achieve this, I have i ...

jquerycss

Tips for regularly retrieving information from a psql table

I have a scenario where I am retrieving data from a psql table and converting it into a JSON array to be used for displaying a time series chart using JavaScript. The data that is passed needs to be in the form of an array. Since the data in the table get ...

javascriptphphtmlpostgresql

Quantify the Proportion of Affirmative/Negative Responses and

I am attempting to calculate the percentage of "Yes" or "No" responses in an HTML table based on user input for each month's questions. Then, I want to display the average percentage in the "average" column for each month. For example, if the user sel ...

javascripthtmljquerycss

Creating a scrolling effect similar to the Nest Thermostat

After researching countless references, I am determined to achieve a scrolling effect similar to the Nest Thermostat. I came across this solution on this JSFiddle, but unfortunately, the parent element has a fixed position that cannot be utilized within my ...

javascripthtmljquerycssparallax