The border-color feature in Bootstrap 5 does not function properly when applying responsive border-start/end/top/bottom styles

My Objective:

For mobile: I want to have borders only at the top and bottom. For desktop: I want borders only at the start and end, in a border-dark color.

My Attempts:

I have added custom responsive borders to my main.scss file

// responsive borders

@each $breakpoint in map-keys($grid-breakpoints) {
    @include media-breakpoint-up($breakpoint) {
      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  
      .border#{$infix}-top {      border-top: $border-width solid $border-color !important; }
      .border#{$infix}-end {    border-right: $border-width solid $border-color !important; }
      .border#{$infix}-bottom {   border-bottom: $border-width solid $border-color !important; }
      .border#{$infix}-start {     border-left: $border-width solid $border-color !important; }
  
      .border#{$infix}-top-0 {    border-top: 0 !important; }
      .border#{$infix}-end-0 {  border-right: 0 !important; }
      .border#{$infix}-bottom-0 { border-bottom: 0 !important; }
      .border#{$infix}-start-0 {   border-left: 0 !important; }
  
      .border#{$infix}-x {
        border-left: $border-width solid $border-color !important;
        border-right: $border-width solid $border-color !important;
      }
  
      .border#{$infix}-y {
        border-top: $border-width solid $border-color !important;
        border-bottom: $border-width solid $border-color !important;
      }
    }
  }

Implementation in HTML:

<div class="col-sm-4 d-flex justify-content-center justify-content-sm-center border border-dark border-start-0 border-end-0 border-md-start border-md-end border-md-top-0 border-md-bottom-0 overflow-hidden"></div>

The issue is that on desktop, the borders at the start and end appear in the default 1px solid #dee2e6 !important bootstrap color

htmlcssborderbootstrap-5

Answer №1

To ensure proper styling, it is recommended to explicitly define the border-{side}-width and border-style properties instead of relying on shorthand methods. This is particularly important when dealing with Bootstrap's 

.border: {1px solid #dee2e6 !important;}
shorthand, as it may override your custom settings.

   @include media-breakpoint-up($breakpoint) {    
      .border#{$infix}-top { border-top-width: $border-width !important; border-style: solid !important; }
      .border#{$infix}-end { border-right-width: $border-width !important; border-style: solid !important; }
      .border#{$infix}-bottom { border-bottom-width: $border-width !important; border-style: solid !important; }
      .border#{$infix}-start { border-left-width: $border-width !important; border-style: solid !important; }
      
      .border#{$infix}-top-0 { border-top-width: 0 !important; }
      .border#{$infix}-end-0 { border-right-width: 0 !important; }
      .border#{$infix}-bottom-0 { border-bottom-width: 0 !important; }
      .border#{$infix}-start-0 { border-left-width: 0 !important; }
   }

Check out the SASS demo for more details.

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

How can we show pictures when a user clicks?

After creating a model for displaying images in a modal when clicked by the user, I encountered an issue. Whenever I try to access the images from the gallery within the modal content, it only displays a blank popup. I want the pictures from the image gall ...

javascripthtmlcssmodal-dialogshopify

Having trouble accessing the menu in the dropdown div when clicking back?

I am working on creating a menu that drops down from the top of the page using JQuery. I have everything set up with the code below: <div id="menu"> <div id="menucontentwrapper"> <div id="menucontent"></div> </di ...

javascriptjqueryhtml

Dynamic parallax or stacked vertical text animation

I am attempting to replicate the text effect found on . The text is centered both vertically and horizontally within each div, but as you scroll down, the top position shifts creating a parallax effect. As you continue scrolling, the text transitions to th ...

jquerycssparallax

Steps to eliminate validation following the clearing of input fields

This is the code I've written for live validation using AJAX in an input field. My issue is that I want the validation to be removed if all inputs are deleted. <script type="text/javascript"> $(document).ready(function(){ ...

htmljqueryajax

Receive a distinct key alert after including a key attribute to a div element containing multiple sub nodes in react version 18.2.0

When attempting to render the div element on the page, I encountered a warning stating: "Each child in a list should have a unique 'key' prop." <div {...{}} key={"formKey"}> <input type="text" /> <button> ...

javascripthtmlreactjsjsxreact-key-index

Using Python to access files

I have developed a system that allows me to load image files from HTML. However, after selecting a file and loading it from the front end, I am in need of a Python API to read the selected image file. How can I establish a connection between Python and HTM ...

pythonhtml

What is the best way to extract pricing information from Udemy?

Important: I haven't been able to find a relevant solution in similar questions. How can I extract prices from Udemy using web scraping? Scraping Data From Udemy's AngularJs Site Using PHP How do I obtain promotional prices using the Udemy API ...

pythonhtmlseleniumweb-scraping

What specific @media query should be used to target Windows Phone 8+ with high resolution?

As per the insights shared in Brett Jankord's article on Cross Browser Retina/High Resolution Media Queries The information suggests that Windows 8 phones do not adhere to device-pixel-ratio media queries. Are there alternative methods to target W ...

csswindows-phone-8media-queries

Steps for creating a two-dimensional arc

I want to input some pre-determined acr values from another program and replicate them in three.js Currently, I'm using code I found on this site to draw the arc, although it might not be the most optimal solution. function DRAWarc(){ ...

javascripthtmlthree.js

Unexpected behavior observed when trying to smoothly scroll to internal links within a div, indicating a potential problem related to CSS dimensions and

Within a series of nested div containers, I have one with the CSS property overflow:hidden. My goal is to smoothly scroll to internal links within this specific div using jQuery. The snippet of code below has worked successfully in previous projects: ...

javascriptjquerycssscroll

"Showing Off Your Steam Inventory on Your Website: A Step-by-

My goal is to display a user's specific inventory on a webpage. I've tried using the following link: but it hasn't been helpful. ...

jsonapihtmlsteam

What is the best way to incorporate various styles into one :style attribute?

Within my vuetify project, I encountered a challenge of adding multiple styles to the same style attribute. Specifically, I have successfully implemented a vuetify breakpoint and now wish to include {backgroundColor:'Color'} within the existing a ...

javascriptcssvue.jsvuetify.js

What could be causing my dropdown links to malfunction on the desktop version?

I've been developing a responsive website and encountering an issue. In desktop view, the icon on the far right (known as "dropdown-btn") is supposed to activate a dropdown menu with contact links. However, for some unknown reason, the links are not f ...

javascripthtmlcss

Difficulty with collapsing icon in Bootstrap's navigation bar

I am in the process of building a bootstrap website and facing an issue with the collapsible navigation bar. The nav toggle button is always visible, but I want it to only appear when the nav bar goes to a medium size. How can I achieve this? The code sni ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best way to organize table rows into a single column when the window is resized?

I am working on a table that has three pictures in a row, with 100% width. I want the table to be responsive and stack the pictures into one column when the space is limited. The issue I am currently facing is that the elements of the table do not stack i ...

htmlcsstwitter-bootstrapresponsive-design

I'm having trouble getting my if statement to function properly with a random number

I'm currently working on creating a natural disaster sequence for my game, and I'm using Math.random to simulate different outbreak scenarios. However, I've encountered an issue at the end of my code where an if statement is supposed to trig ...

javascripthtml

Having issues with RTL on MuiTextField when using special characters

Currently, I am working on a project where Mui is being used. I have successfully applied RTL according to the Mui guide. However, I am encountering a frustrating problem where special characters in MuiTextField are aligning to the left instead of the righ ...

cssreactjsmaterial-ui

What is the best way to position a popup div in CSS?

Currently, I am in the process of developing a website that displays DVD details when hovering over an image, similar to what is shown in picture 1. However, I've encountered an issue where the content gets cut off for DVDs located on the right side o ...

javascripthtmlcss

Modify the color of the active class in Bootstrap

I am trying to modify the color of the active class in my HTML code as I create a nav sidebar. Here is the snippet from my code: <div class="col-sm-2"> <ul class="nav nav-pills nav-stacked nav-static"> <!--stacked for vertic ...

htmlcsstwitter-bootstrapbackground-color

The CSS method for changing the content URL is experiencing difficulties in Firefox

Css: .woocommerce-placeholder.wp-post-image { content: url("DSC0926-1.jpg"); } /*for firefox*/ .woocommerce-placeholder.wp-post-image::before { content: url("DSC0926-1.jpg"); } HTML <img src="placeholder.png" alt="Placeholder" class="woocomm ...

css