Is there a way to add border line separators between buttons in Bootstrap button groups?
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
</div>
https://getbootstrap.com/docs/4.6/components/button-group
The solution provided by @padaleiana is effective! They used a btn-light disabled button as the separator.
Solution:
To create the desired effect, make sure to include a button with the following classes: mr-0, ml-0, pl-0, and pr-0. Additionally, add the disabled attribute to ensure the "separator" appears correctly.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary mr-0 ml-0 pr-0 pl-0" disabled></button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary mr-0 ml-0 pr-0 pl-0" disabled></button>
<button type="button" class="btn btn-secondary">3</button>
</div>A different approach from padaleiana's solution is presented here, utilizing a method that does not involve HTML button elements. This helps to prevent any potential issues that may arise when jQuery (or other JavaScript libraries) interact with buttons:
<div class="alert alert-dark m-0 px-0"></div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-secondary">1</button>
<div class="alert alert-dark m-0 px-0"></div>
<button type="button" class="btn btn-secondary">2</button>
<div class="alert alert-dark m-0 px-0"></div>
<button type="button" class="btn btn-secondary">3</button>
</div>Here is a clever CSS solution:
.btn-group-separators > .btn {
margin-left: 0 !important;
}
.btn-group-separators > .btn:not(:last-child) {
margin-right: 2px;
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7b1914140f080f091a0b3b4e55485548">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group btn-group-separators">
<button class="btn btn-secondary">1</button>
<button class="btn btn-secondary">2</button>
<button class="btn btn-secondary">3</button>
</div>To customize the buttons, you can simply add the "btn-outline-secondary" class to each button within the btn-group. Here is an example:
<div class="btn-group btn-group-sm">
<button class="btn btn-light btn-outline-secondary btn-sm">Btn One</button>
<button class="btn btn-light btn-outline-secondary btn-sm">Btn Two</button>
<button class="btn btn-light btn-outline-secondary btn-sm">Btn Three</button>
</div>
My goal is to organize flex-items in a specific layout: To achieve this, I am referencing the following example: .Container { display: flex; overflow: hidden; height: 100vh; margin-top: -100px; padding-top: 100px; position: relative; widt ...
I am using Bootstrap and encountering an issue with displaying checkboxes after clicking on an accordion element. While the first checkbox is displayed correctly, the checkboxes inside the accordion do not appear as expected. It is confusing to me why thi ...
After browsing through multiple threads on accordions, none seem to match my current structure which I believed was effective. In an attempt to learn and build elements from scratch, I created the following accordion with some help from Google and experi ...
Has anyone successfully migrated the Ext.ux.TDGi.iconMgr plugin to ExtJS 4? (http://tdg-i.com/44/extuxtdgiiconmgr...-icons-and-css) ...
Currently, I am using WeasyPrint to generate a document and facing an issue with long sections that may span multiple pages. When a section breaks across pages, the name of the section does not display after the page break as intended. The following examp ...
I am looking to update the background design of Mui Datagrid from this image to this image However, I am encountering an issue where the background color does not fully cover the header. I have attempted using "cellClassName:" in the columns but it has n ...
I have implemented Bootstrap's accordion on my webpage, consisting of two different sections with unique content. Upon loading the page, the active class defaults to the first element of the first section. However, if I navigate to the "Second" sectio ...
Encountered an issue specific to Safari on iOS. Creating a page with a fixed position header that spans the width of the viewport. The content consists of multiple images that should scroll horizontally while the header remains in place during scrolling. ...
I am in the process of creating a website with various pages dedicated to About information, Projects, Events, and more. One issue I am facing is how to seamlessly include my navigation bar, header, and footer across all HTML files without duplicating the ...
I am attempting to integrate the output canvas from p5.js into my webpage by following a tutorial heretutorial. I am hoping that the canvas will appear where I have positioned it within the HTML body. However, no matter what I try with CSS properties like ...
Within my code in settings.py, I define the static URL like so: STATIC_ROOT = os.path.join(BASE_DIR, "static") STATIC_URL = '/static/' The location of my static files and folders is at /home/myLinuxUsername/myApp/static/interactive-preview-depe ...
Is there a way to connect a font from the internet (such as those on Google Fonts: ) to my Sublime Text CSS file? I have tried linking it to an HTML file that is already linked to my CSS code, but it hasn't been successful. ...
I'm currently working on a solution to extract the ids of dragged divs once they have been placed in the drop zone. Each drag component is assigned an id ranging from drag1 through drag8, while the drop zone is labeled as div drop zone. Since there a ...
When a user chooses a color in a form, I should receive the value, but instead I get a MultiValueDictKeyError and I can't figure out why. This is the code in my views: def primeira_pergunta(request): trans = Tranfer() my_list = trans.shared[ ...
I've noticed that when I check and select a row in ui-grid, only the last selected row is focused with a background color. Should all rows be automatically painted by default? Thank you. ...
Hi there, I'm having an issue with a link that's supposed to open in a pop-up but is instead opening in a new tab. I'd like it to open in a proper pop-up window. <button class="button button1" onclick=" window.open('te ...
Hi there, I'm currently developing an application using C# in Visual Studio that focuses on minifying CSS code. Recently, I encountered a specific piece of code that removes all prefixes for the # ID selector. strCSS = Regex.Replace(strCSS, @"[a-zA-Z ...
I am looking to create a component Table that groups countries together. Here is my mockup: enter image description here I am struggling to find a solution for this issue. Can someone please assist me? ...
I am currently experimenting with Bootstrap 5 to design a full-screen webpage with two columns, consisting of a header and a footer. Each column will hold content that exceeds the available space, necessitating individual scrollbars. One of the columns als ...
I'm currently working on calculating the top/bottom padding of a div (.content) based on its height, and updating it upon loading and resizing the window. The goal is to have it centered nicely next to another div (.character) positioned beside it. I ...