Main Menu

 Home
 Join our Clan
 [HSX] Roster
 Forums
 News
 Downloads
 News Letter
 Video tutorials
 Supporters
 Uploads
 F.A.Q
· FAQ
· Docs
· Forums FAQ
 [HS] Timeline
 Site Map
 Write a Review
 Image Repo
 WhoIs
 Twitch ID Finder
 GTA Garages
 Logout

[HSX] Donations

Total Donators 0
Total: $0.00
Goal: $30.00
Difference: $30.00
Donate

Whos Been

 Doug
 7 hours ago
 The-UnXpLaiNeD
 8 hours ago
 coRpSE
 11 hours ago
 Firefighter716
 11 hours ago
 UTBaDaSS
 13 hours ago
 lxgfusion
 14 hours ago
 UM-Hitman
 14 hours ago
 Lonestar
 23 hours ago
 tester
 3 days ago
 airsteam
 4 days ago

 

[HSX] HeadShot Xtreme is officially recognized by the Central Outpost as a genuine gaming organization.

Total Hits

We received

50,578,883

page views since December 2003

● Quick Fix Bootstrap Responsive Borders

Post new topic Reply to topic
Doug
Posted: Wed Jul 02, 2025 5:19 pm
#8550
Doug
Wed Jul 02, 2025 5:19 pm
NOOB!!!
16 Posts
Reputation: 10.6

PHP:  [ Select all ]

@media (min-width: 0px) {
    .list-group-vertical-xs { flex-direction: column !important; }
    .border-top-xs { border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }
    .border-end-xs { border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }
    .border-bottom-xs { border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important; }
    .border-start-xs { border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }
    .border-top-xs-0 { border-top: 0 !important; }
    .border-end-xs-0 { border-right: 0 !important; }
    .border-bottom-xs-0 { border-bottom: 0 !important; }
    .border-left-xs-0 { border-left: 0 !important; }
    .border-x-xs { 
      border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; 
      border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    }
    .border-y-xs {
      border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
      border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    }
    .border-xs {
      border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
      border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
      border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
      border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    }
    .border-xs-0 {
      border-top: 0 !important;
      border-bottom: 0 !important;
      border-left: 0 !important;
      border-right: 0 !important;
    }
}
@media (min-width: 576px) {
    .list-group-vertical-sm { flex-direction: column !important; }
    .border-top-sm { border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }
    .border-end-sm { border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }
    .border-bottom-sm { border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }
    .border-start-sm { border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }
    .border-top-sm-0 { border-top: 0 !important; }
    .border-end-sm-0 { border-right: 0 !important; }
    .border-bottom-sm-0 { border-bottom: 0 !important; }
    .border-left-sm-0 { border-left: 0 !important; }
    .border-x-sm { 
      border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; 
      border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    }
    .border-y-sm {
      border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
      border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    }
    .border-sm {
      border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
      border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
      border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
      border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    }
    .border-sm-0 {
      border-top: 0 !important;
      border-bottom: 0 !important;
      border-left: 0 !important;
      border-right: 0 !important;
    }
}
@media (min-width: 768px) {
    .list-group-vertical-md { flex-direction: column !important; }
    .border-top-md { border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }
    .border-end-md { border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }
    .border-bottom-md { border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }
    .border-start-md { border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }
    .border-top-md-0 { border-top: 0 !important; }
    .border-end-md-0 { border-right: 0 !important; }
    .border-bottom-md-0 { border-bottom: 0 !important; }
    .border-left-md-0 { border-left: 0 !important; }
    .border-x-md { 
      border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; 
      border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    }
    .border-y-md {
      border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
      border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    }
    .border-md {
      border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
      border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
      border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
      border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    }
    .border-md-0 {
      border-top: 0 !important;
      border-bottom: 0 !important;
      border-left: 0 !important;
      border-right: 0 !important;
    }
}
@media (min-width: 992px) {
    .list-group-vertical-lg { flex-direction: column !important; }
    .border-top-lg { border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }
    .border-end-lg { border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }
    .border-bottom-lg { border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }
    .border-start-lg { border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }
    .border-top-lg-0 { border-top: 0 !important; }
    .border-end-lg-0 { border-right: 0 !important; }
    .border-bottom-lg-0 { border-bottom: 0 !important; }
    .border-left-lg-0 { border-left: 0 !important; }
    .border-x-lg { 
      border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; 
      border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    }
    .border-y-lg {
      border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
      border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    }
    .border-lg {
      border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
      border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
      border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
      border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    }
    .border-lg-0 {
      border-top: 0 !important;
      border-bottom: 0 !important;
      border-left: 0 !important;
      border-right: 0 !important;
    }
}
@media (min-width: 1200px) {
    .list-group-vertical-xl { flex-direction: column !important; }
    .border-top-xl { border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }
    .border-end-xl { border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }
    .border-bottom-xl { border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }
    .border-start-xl { border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }
    .border-top-xl-0 { border-top: 0 !important; }
    .border-end-xl-0 { border-right: 0 !important; }
    .border-bottom-xl-0 { border-bottom: 0 !important; }
    .border-left-xl-0 { border-left: 0 !important; }
    .border-x-xl { 
      border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; 
      border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    }
    .border-y-xl {
      border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
      border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    }
    .border-xl {
      border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
      border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
      border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
      border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    }
    .border-xl-0 {
      border-top: 0 !important;
      border-bottom: 0 !important;
      border-left: 0 !important;
      border-right: 0 !important;
    }
}
@media (min-width: 1400px) {
    .list-group-vertical-xxl { flex-direction: column !important; }
    .border-top-xxl { border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }
    .border-end-xxl { border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }
    .border-bottom-xxl { border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }
    .border-start-xxl { border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }
    .border-top-xxl-0 { border-top: 0 !important; }
    .border-end-xxl-0 { border-right: 0 !important; }
    .border-bottom-xxl-0 { border-bottom: 0 !important; }
    .border-left-xxl-0 { border-left: 0 !important; }
    .border-x-xxl { 
      border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; 
      border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    }
    .border-y-xxl {
      border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
      border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    }
    .border-xxl {
      border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
      border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
      border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
      border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    }
    .border-xxl-0 {
      border-top: 0 !important;
      border-bottom: 0 !important;
      border-left: 0 !important;
      border-right: 0 !important;
    }
} 

 
I am nearly sure this will get patched in bootstraps release at some point, for now, this is just a quick patch to the CSS.

PS: Bonus for .list-group-vertical responsive as well ( albeit not complete ).
Post new topic Reply to topic
Powered by phpBB © 2001, 2019
phpBB Group
Theme Designed & Coded by Lonestar
Lonestar Modules
Forums ©