What is the best way to ensure that multiple bootstrap buttons in a row have the same width?

Could you help me figure out how to make the <div id="full"> element take up the full width of its parent container, while also ensuring that the 3 buttons inside share this width and have equal sizes with gaps between them?

https://i.stack.imgur.com/rul2S.jpg?

Is there a Bootstrap class that can achieve this layout?

<script src=https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3a5855554e494e485b4a7a0f140a">[email protected]</a>/dist/js/bootstrap.min.js integrity=undefined crossorigin=anonymous></script>
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5b3934342f282f293a2b1b6e756b75">[email protected]</a>/dist/css/bootstrap.min.css integrity=undefined crossorigin=anonymous>

<div class="d-grid gap1">
  <div id="full">
    <button type="button" class="btn btn-success">shared width button</button>
    <button type="button" class="btn btn-success">shared width button</button>
    <button type="button" class="btn btn-success">shared width button</button>
  </div>
  <button type="button" class="btn btn-primary">full width button</button>
</div>

htmlcssbootstrap-5

Answer №1

To achieve this layout, utilizing Bootstrap's flex feature would be beneficial.

You can start by adding the d-flex class to the parent container of the buttons, and then apply the flex-fill class to each button. Additionally, you have the option to incorporate spacing classes for creating space between the buttons and surrounding content.

<script src=https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="65e7eaeaeaafbfaaafe8e2eaedbaafeaacafaefbdbece59aae5e9ebdcaee1e9e5e3adb1b4"></script>
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95f7fafae1e6e1e7f4e5d5a0bba5bba4">[email protected]</a>/dist/css/bootstrap.min.css integrity=undefined crossorigin=anonymous>
<div class="d-grid gap1">
  <div id="full" class="d-flex mb-1">
    <button type="button" class="btn btn-success flex-fill me-1">shared width button</button>
    <button type="button" class="btn btn-success flex-fill me-1">shared width button</button>
    <button type="button" class="btn btn-success flex-fill">shared width button</button>
  </div>
  <button type="button" class="btn btn-primary">full width button</button>
</div>

Answer №2

For custom styling of the #full element, you can utilize a unique class:

.custom-flex { 
    display:flex; 
    gap:30px;                  /* defining custom gap */
}
.custom-flex > * { 
   flex:1;                    /* ensuring full width for all children elements */
}

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

Is it possible to stack images on top of each other on a webpage?

I'm looking to create a dress-up game website where users can click on different accessories to layer them on top of each other. It's a bit tricky to explain, but I've found some examples that demonstrate what I have in mind: This site is ...

jqueryhtmlcssflashimage

The CSS infinite animation becomes erratic and sluggish after a short period of time

My website featured a banner with a series of thumbnail images that animated at different intervals and looped indefinitely. Initially, the animations ran smoothly, but after a few seconds, they began to slow down and lose consistency. To troubleshoot, I u ...

htmlcssanimationanimate.css

Incorporating marker tags to different sections of text within a contenteditable div

The main objective of this feature is to enable users to select placeholders within message templates (variable names enclosed in %). Inspired by Dribbble The API provides strings in the following format: "Hello %First_Name% %Middle_Name% %Last_Name% ...

javascripthtmlcssangular

Adjust the positioning of divs to account for changes in scale caused

I have 3 div blocks arranged on a web page, with the first one bigger and located on the left side while the other two smaller ones are positioned on the right side. I want their relative positioning to remain fixed across all browsers and zoom levels. Cur ...

csshtml

Is it possible to customize the borders of boxes in Google Charts Treemap?

Although this may seem like a minor issue, I can't find any information in the documentation. I'm currently using Google Charts treemap for monitoring a specific project. The problem I'm facing is that when all the parent level rectangles ar ...

cssgoogle-visualizationtreemap

Determine the necessary adjustment to center the div on the screen and resize it accordingly

Currently, I am in a situation where I must develop a piece of code that will smoothly enlarge a div from nothing to its final dimensions while simultaneously moving it down from the top of the screen. Each time this action is triggered, the final size of ...

javascriptmathhtmlzoomingslide

What is the best way to hide the input field when there are multiple parent classes present?

I am currently implementing dynamic fields with jQuery and everything is functioning correctly. The problem arises when I attempt to remove these fields. After searching on Google and browsing past questions on StackOverflow, I noticed that everyone seems ...

javascriptjqueryhtml

Using a local variable within quotes in Angular 4 (HTML) and utilizing ngFor

In my current project, I am utilizing Angular2-Collapsible. The objective is to display the details upon clicking a table row. Below is the code snippet provided. Specifically, if I add [detail]= "detail1", the collapsible-table-row-detail will appear when ...

htmlangularinterpolationngfor

Leveraging the :has pseudo-class in Tailwind along with adjacent sibling selectors

My CSS code is working perfectly as intended. [data-type='transfer']:has(+ [data-type^='sale_']) { opacity: 0.25; } This CSS snippet targets elements with data-type="transfer" that are next to elements containing data attri ...

cssreactjstailwind-css

Begin with a Bootstrap non-fluid container and follow with a fluid container

I am currently facing a challenge where I want the lower section of my webpage to be full width within a container-fluid div, while keeping the top part in a traditional container with a set width. Despite my efforts, the following HTML snippet is not ach ...

htmltwitter-bootstrapbootstrap-4

Issues with hover menu arise following relocation of primary menu

#header { height: 108px; width: 1140px; background-color: #faa220; position: relative; } #Logo2 { height: 108px; float: left; } #header links { height: 50px; float: left; list-style: none; padding-top: 10px; } #container { overflo ...

htmlcss

"Utilizing an ellipsis within a span element in a table cell to achieve maximum cell

Update Note: Primarily targeting Chrome (and maybe Firefox) for an extension. However, open to suggestions for a universal solution. Additional Information Note: Discovered that lack of spaces in text for A causing overflow issues with B. Situation seem ...

htmlcss

Remove three text elements to the right of the small icon with no line breaks

I am trying to align three text items to the right of a smaller left-floated icon without causing the text items to wrap. div { width:30%; } div i { margin-right:0.75em; padding:0.5em; float:left; color:#fff; border-radius:50%; ...

htmlcss

Changing the Div heights in Material UI with grid layout customization

I have a project that requires me to implement material-ui. Is there a way I can adjust the width and height of the div containing the "Sign In With" text (as shown in the first image) to bring the buttons closer to the text? Transformation from this: ht ...

javascriptcssreactjsmaterial-uistyled-components

Utilizing HTML and JavaScript to Download Images from a Web Browser

I'm interested in adding a feature that allows users to save an image (svg) from a webpage onto their local machine, but I'm not sure how to go about doing this. I know it can be done with canvas, but I'm unsure about regular images. Here i ...

javascripthtmlimage

Error in Jquery click function not being triggered

I'm in the process of developing an eCommerce platform where users can choose options and have their shopping carts automatically updated using jQuery. Users will be presented with a few radio buttons to select from, and as they make their choice, th ...

javascriptjqueryhtml

Managing content in two separate divs at the same time using AJAX

I am curious to know how I can achieve a functionality where editing the text field on the left will automatically update the text field on the right. I have a feeling that it involves using AJAX, and I would like to implement it as well. Can anyone guid ...

htmlajaxformsjquery

Following an update, Storybook is failing to apply JSX styles

After upgrading my project from NextJS 10 to NextJS 12, everything is functioning normally except for Storybook, which is now missing its styles. I utilize the styled-jsx library to create embedded css, implementing it in this way: const SearchResult = ({ ...

cssreactjswebpacknext.jsstyled-jsx

RequireJS is timing out while loading the runtime configuration

I keep encountering a load timeout error with my run-time configuration, specifically with common.js. Although I have set the waitseconds value to 0 for files loaded from common.js, the loadTimeout issue persists for common.js itself. index.html <scr ...

javascripthtmlrequirejs

Unable to overlay a div on top of an image

Hello, I'm currently attempting to overlay a div on top of an image. Since the image needs to be responsive, it cannot be set as a background image. Here is the CSS I am using: #slider { margin:0 33%; width:67%; position:relative; } #sli ...

htmlcss