Responsive Border Utilities #23892

LarryAzevedo · 2017-09-09T16:06:18Z

It would be great to be able to do something like this:
<div class="border-top border-lg-top-0 border-lg-left">...</div>
So in this example, you'll have:

a 1px top border from xs to md
a 1px left border from lg to xl (the top border get's removed)

Here's what the SASS might look like:

`@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);

	.border#{$infix}-top-0{		border-top: 0 !important;}
	.border#{$infix}-right-0{	border-right: 0 !important;}
	.border#{$infix}-bottom-0{	border-bottom: 0 !important;}
	.border#{$infix}-left-0{	border-left: 0 !important;}
	.border#{$infix}-top{		border-top: 1px solid $gray-200 !important;}
	.border#{$infix}-right{		border-right: 1px solid $gray-200 !important;}
	.border#{$infix}-bottom{	border-bottom: 1px solid $gray-200 !important;}
	.border#{$infix}-left{		border-left: 1px solid $gray-200 !important;}
	.border#{$infix}-x{			border-left: 1px solid $gray-200 !important; border-right: 1px solid $gray-200 !important;}
	.border#{$infix}-y{			border-top: 1px solid $gray-200 !important; border-bottom: 1px solid $gray-200 !important;}
}

}`

The text was updated successfully, but these errors were encountered:

mdo · 2017-09-09T21:16:21Z

No plans to make these responsive.

tmorehouse · 2017-11-18T21:20:45Z

Too bad, as I have a use case for adding/removing borders based on responsive positioning.

spaceemotion · 2018-04-03T08:36:24Z

Since I had the same issue today, here's an updated version of @LarryAzevedo's proposal that uses the proper BS4 variables:

@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}-right {    border-right: $border-width solid $border-color !important; }
    .border#{$infix}-bottom {   border-bottom: $border-width solid $border-color !important; }
    .border#{$infix}-left {     border-left: $border-width solid $border-color !important; }

    .border#{$infix}-top-0 {    border-top: 0 !important; }
    .border#{$infix}-right-0 {  border-right: 0 !important; }
    .border#{$infix}-bottom-0 { border-bottom: 0 !important; }
    .border#{$infix}-left-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;
    }
  }
}

drupalr · 2018-04-04T13:16:11Z

@spaceemotion Top notch!

ianryde · 2018-05-02T14:15:29Z

10/10 - used spaceemotions solution here. Quick solution on the back of bootstrap without having to write custom sass.

chrisdavies71 · 2018-05-05T08:01:14Z

@spaceemotion Which file did you put this code in?

spaceemotion · 2018-05-05T09:00:49Z

@chrisdavies71 I have an scss file called "_bootstrap.scss" that imports the individual bootstrap files one by one, commenting out the ones i/we don't need.

Directly after the utility import I added the custom changes, so it looks something like this:

@import "~bootstrap/scss/close";
// @import "~bootstrap/scss/modal";
// @import "~bootstrap/scss/tooltip";
// @import "~bootstrap/scss/popover";
// @import "~bootstrap/scss/carousel";
@import "~bootstrap/scss/utilities";
@import 'border-utilities';         // <--- custom file
@import "~bootstrap/scss/print";

DamiansDesign · 2018-05-25T06:18:33Z

@spaceemotion Thanks for your efforts! Are border colors like border-primary working for you?

For me, if I use border-primary border-md-bottom the border color is reset to default border color (gray).

spaceemotion · 2018-06-04T18:26:12Z

@DamiansDesign sorry for the late response, I've been quite busy lately.

It's a bit more complicated, but you could do the following:

Extract your bootstrap utilities import to a local file like _utilities.scss:

@import "utilities/align";
@import "utilities/background";
@import "utilities/borders"; <-- replace this with your _border-utilities.scss file
@import "utilities/clearfix";
@import "utilities/display";
@import "utilities/embed";
@import "utilities/flex";
@import "utilities/float";
@import "utilities/position";
@import "utilities/screenreaders";
@import "utilities/shadows";
@import "utilities/sizing";
@import "utilities/spacing";
@import "utilities/text";
@import "utilities/visibility";

Copy the bootstrap border utilities into your own utilities file. My previous addition should go between the .border-left-0 declaration and the @each $color, $value in $theme-colors { call:

https://gist.github.com/spaceemotion/0f750c975fbe9ddf49dc9ab6e69bbfeb

You're losing changes done by updating bootstrap, but you'd just need toupdate your local copy which hopefully is not too much of a hassle.

Hope this helps!

DamiansDesign · 2018-06-13T06:43:11Z

@spaceemotion thank you for your reply, and I completely understand --I too have been quite busy lately. Thanks for taking the time to reply.

I managed to figure out a solution that didn't require modifying any core files. The solution was to remove the !important declaration.

Like so:

@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 ; }
    .border#{$infix}-right {    border-right: $border-width solid $border-color ; }
    .border#{$infix}-bottom {   border-bottom: $border-width solid $border-color ; }
    .border#{$infix}-left {     border-left: $border-width solid $border-color ; }

    .border#{$infix}-top-0 {    border-top: 0 !important; }
    .border#{$infix}-right-0 {  border-right: 0 !important; }
    .border#{$infix}-bottom-0 { border-bottom: 0 !important; }
    .border#{$infix}-left-0 {   border-left: 0 !important; }

    .border#{$infix}-x {
      border-left: $border-width solid $border-color ;
      border-right: $border-width solid $border-color ;
    }

    .border#{$infix}-y {
      border-top: $border-width solid $border-color ;
      border-bottom: $border-width solid $border-color ;
    }
  }
}

davidrhoderick · 2019-11-20T11:23:31Z

Amazing job @spaceemotion and @DamiansDesign, this is a total keeper! Along with @madmax solution for responsive widths, these should definitely be a part of core.

For responsive design, nearly 100% of the time, adjacent columns need to be made full-width on mobile and if there is a border between them on larger screen sizes, it needs to be removed or moved to between the columns or rows. Along with responsive widths, this is another piece of Bootstrap I find missing that would complete the UI toolkit.

niftylettuce · 2020-01-13T06:45:16Z

@DamiansDesign and @spaceemotion you are missing this line from your snippet .border#{$infix} { border: $border-width solid $border-color; }

frederikhors · 2020-05-14T11:24:24Z

@mdo, given the sequel that has had this issue in the community, is there the possibility of having this feature in 5?

abrambailey · 2020-08-21T19:16:20Z

Also think this is a natural fit for bs 5.

tacomanator · 2020-09-16T07:48:44Z

Nice to have. I found a need for this feature when using a border between two items displayed as flex column on small screens or as a flex row on large screens, which requires changing the border from top/bottom to left/right.

ozgurg · 2021-12-01T12:38:17Z

In Bootstrap 5, you can add "responsive: true" for utility that you want to make responsive.

"border-top": (
  responsive: true, /* Add this */
  property: border-top,
  values: (
    null: $border-width solid $border-color,
    0: 0,
  )
),

And when you compile, following classes will be generated:

.border-top
.border-top-0
.border-top-sm
.border-top-sm-0
.border-top-md
.border-top-md-0
.border-top-lg
.border-top-lg-0
.border-top-xl
.border-top-xl-0
.border-top-xxl
.border-top-xxl-0

See for detailed instruction: https://getbootstrap.com/docs/5.1/utilities/api/#enable-responsive

fulldecent · 2022-01-03T05:08:08Z

For people that want to use baseline Bootstrap and you don't compile (bonus points if you are using CDN!) here is a simple workaround:

        <p class="d-none d-lg-block col-lg-4 border-start border-5">
{% for tag in page.tags %}
          <a href="/posts-by-tag#{{ tag | slugify }}">#{{ tag }}</a>
{% endfor %}  
        </p>
        <p class="d-block d-lg-none">
{% for tag in page.tags %}
          <a href="/posts-by-tag#{{ tag | slugify }}">#{{ tag }}</a>
{% endfor %}  
        </p>

I want to show something on the right with a border if there is enough width and otherwise show it below without border.

Basically I'm adding a border between the columns for this aside.

Natshah · 2022-02-01T08:41:07Z

Bootstrap Borders Utilities
https://www.npmjs.com/package/bootstrap-borders-utilities

npm i bootstrap-borders-utilities

huwiler · 2023-08-18T14:40:39Z

For those of us forced to work within the constraints of baseline bootstrap who also don't want to resort to redundant markup based solutions, here's a javascript workaround. This example works as if a compiled border-start-md were applied to an element with id "preview".

(() => {
    const mdMediaQuery = window.matchMedia('(min-width: 768px)'); // twbs *-md
    mdMediaQuery.addEventListener('change', e => {
        e.target.matches ?
            document.getElementById('preview').classList.add('border-start') :
            document.getElementById('preview').classList.remove('border-start');
    });
    const changeEvent = new Event('change');
    mdMediaQuery.dispatchEvent(changeEvent);
})();

joho1968 · 2024-03-15T11:03:59Z

I fail to grasp why these wouldn't/shouldn't be responsive out of the box. Having two "containers" side by side, it may make sense to have a border-start on the rightmost container, when the design "collapses" so that the right container is now placed under the left container, the border should be removed, or that's what I'd want anyway. Very strange IMHO ... 🤔

LarryAzevedo mentioned this issue Sep 9, 2017

Border utilities - add "border-x-0" and "border-y-0"? #23602

Closed

mdo closed this as completed Sep 9, 2017

mdo added css feature v4 labels Sep 9, 2017

bderblatter-qualtrics mentioned this issue Mar 21, 2019

Responsive Text Colors #26553

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Responsive Border Utilities #23892

Responsive Border Utilities #23892

LarryAzevedo commented Sep 9, 2017

mdo commented Sep 9, 2017

tmorehouse commented Nov 18, 2017

spaceemotion commented Apr 3, 2018 •

edited

Loading

drupalr commented Apr 4, 2018

ianryde commented May 2, 2018 •

edited

Loading

chrisdavies71 commented May 5, 2018

spaceemotion commented May 5, 2018

DamiansDesign commented May 25, 2018

spaceemotion commented Jun 4, 2018 •

edited

Loading

DamiansDesign commented Jun 13, 2018

davidrhoderick commented Nov 20, 2019

niftylettuce commented Jan 13, 2020

frederikhors commented May 14, 2020

abrambailey commented Aug 21, 2020

tacomanator commented Sep 16, 2020

ozgurg commented Dec 1, 2021 •

edited

Loading

fulldecent commented Jan 3, 2022

Natshah commented Feb 1, 2022

huwiler commented Aug 18, 2023

joho1968 commented Mar 15, 2024

Responsive Border Utilities #23892

Responsive Border Utilities #23892

Comments

LarryAzevedo commented Sep 9, 2017

mdo commented Sep 9, 2017

tmorehouse commented Nov 18, 2017

spaceemotion commented Apr 3, 2018 • edited Loading

drupalr commented Apr 4, 2018

ianryde commented May 2, 2018 • edited Loading

chrisdavies71 commented May 5, 2018

spaceemotion commented May 5, 2018

DamiansDesign commented May 25, 2018

spaceemotion commented Jun 4, 2018 • edited Loading

DamiansDesign commented Jun 13, 2018

davidrhoderick commented Nov 20, 2019

niftylettuce commented Jan 13, 2020

frederikhors commented May 14, 2020

abrambailey commented Aug 21, 2020

tacomanator commented Sep 16, 2020

ozgurg commented Dec 1, 2021 • edited Loading

fulldecent commented Jan 3, 2022

Natshah commented Feb 1, 2022

huwiler commented Aug 18, 2023

joho1968 commented Mar 15, 2024

spaceemotion commented Apr 3, 2018 •

edited

Loading

ianryde commented May 2, 2018 •

edited

Loading

spaceemotion commented Jun 4, 2018 •

edited

Loading

ozgurg commented Dec 1, 2021 •

edited

Loading