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

Importing a .js file into HTML with AJAX

The following JavaScript code is located within index.html between "<script type="text/javascript">" function callanular() { peticion_http = new XMLHttpRequest(); peticion_http.onreadystatechange = showContent; peticion_ht ...

javascripthtmljqueryajax

The combination of jQuery, using .load method in javascript to prevent scrolling up, making XMLHttpRequest requests, updating .innerHTML elements, and troubleshooting CSS/JS

While utilizing this code, CSS and Javascript are disabled (only HTML loads): function loadContent(limit) { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (xhttp.readyState == 4 && xhttp.status ...

javascriptjqueryhtmlcssajax

Is it possible to integrate a GWT library into Dart programming?

Considering migrating to Dart, but unsure of its maturity. Can a library originally written in GWT be used in Dart? ...

javajavascripthtmlgwtdart

What could be causing me to receive null when trying to retrieve an element with document.getElementById, even after invoking $(document).ready(function() { ... })?

Here's a small example. I'm feeling a bit rusty with JavaScript, as it's been some time since I last worked with it. The problem I'm encountering is an error in Chrome developer tools: "Uncaught TypeError: Cannot set property 'src ...

javascriptjqueryhtml

Bootstrap Modal for WooCommerce

I'm facing an issue while trying to create a modal window using woocommerce variables ($product). The problem lies in the placement of my modal and accessing the correct product id. Here is the code snippet I've been working on. Unfortunately, i ...

javascriptcsswordpresstwitter-bootstrap

What steps can I take to resolve the issue of my popup closing automatically upon opening and simultaneously refreshing my webpage?

After creating a popup in my HTML page, when I click on the element that triggers it, the popup appears for a brief moment before automatically closing and causing my page to refresh. Below is the code I am using: HTML Code : <a class="lv-footer" id= ...

javascriptjqueryhtmlcsspopup

Tips for selectively applying CSS to a single HTML file

I'm currently working on a website utilizing AngularJS and Plangular to develop a unique Soundcloud Player. This is how I incorporate my template: <body> <div id="container"> <div id="header" ng-controller="HeaderCtrl"><div ...

htmlcssangularjs

When selecting a new tab in HTML, the current page position remains unchanged. However, I would like the page to automatically scroll to the

In the design of my website, I have incorporated buttons that are linked to various pages using navigation tabs. However, when these buttons are clicked, the view maintains its position on the new page (e.g., halfway scrolled through the page). Instead o ...

htmlcss

Encountered an issue during my initial AJAX call

Hello everyone, I am currently attempting to use AJAX to send a request with a button trigger and display the response HTML file in a span area. However, I am encountering some issues and need help troubleshooting. Here is my code snippet: //ajax.php < ...

javascriptphpjqueryhtmlajax

Why using the display:none property does not successfully conceal Struts 2 tags such as <s:textfield>

I am curious as to why the div tag is unable to hide the Struts2 tags. I have set up a div that should be hidden on load, and using onChange, I am triggering jQuery to toggle the visibility of the div tag... <%@ taglib prefix="s" uri="/ ...

jquerycssjspstruts2struts-tags

Every time a new message is sent or received, I am automatically brought back to the top of the screen on the

I'm currently working on integrating a chat feature into my Angular Firestore and Firebase app. Everything seems to be functioning well, except for one issue - whenever a new message is sent or received, the screen automatically scrolls up and gets st ...

htmlangulartypescriptangularfireionic5

list of key combinations in a ul element

I programmed a list of world states in PHP using an unordered list (<ul>): $WORLD_STATES = array( "France", "Germany", "Greece", "Greenland", "United Kingdom", "United States", "Uruguay" ...

javascripthtml

The CSS filter "progid:DXImageTransform.Microsoft.Alpha(style=1,opacity=80)" is not functioning properly in Firefox

Trying to apply a filter effect using CSS but encountering issues in Firefox: progid:DXImageTransform.Microsoft.Alpha(style=1,opacity=80 ) opacity: 0.5; -moz-opacity: 0.5; Any s ...

cssfirefox

Is there a way for me to view the table and information on this website?

Currently, I am in the process of extracting specific data from a table on the following website: . To achieve this, I have opted to use Python along with selenium. The issue arises when attempting to extract the table using read_html() from pandas. Unfor ...

htmlpandasseleniumbeautifulsoupselenium-chromedriver

Hover over the text to reveal its content

I am currently in the process of developing a website that features interactive images with text appearing when hovered over. This concept is inspired by the functionality on the nowthisnews.com site. Despite my efforts, I have been unable to get this fea ...

htmlcss

What is the best way to store font size and background color settings in local storage?

After following the solution provided for a similar issue on SO, I am facing a problem where no changes are reflected when using the select box or color picker to modify the font size or background color. I have commented out the lines that were added in a ...

javascriptjqueryhtmllocal-storage

Discovering the technique to dynamically load various content using jQuery in a div based on its

After discovering this code to extract information from the first div with an id of container (box4) and retrieve any new data from the URL, everything was functioning correctly. However, I encountered an issue when attempting to load box5 and rerun the co ...

javascriptphpjqueryhtmlcss

Is it possible to display or hide a spinner within a span using Javascript and AJAX?

When submitting a contact form, I want to display and hide a spinner on the submit button. The spinner should be visible while the form is being submitted and hidden once the submission is complete. Below is the code for my submit button with the spinner: ...

javascriptjquerycssajaxtwitter-bootstrap

Dynamic form validation using jQuery

I am facing a challenge with validating a dynamic form on the user side. My goal is to ensure that if a user fills out one column in a row, they are required to fill out the remaining columns as well. For example, filling out the CC # should prompt the use ...

javascriptjqueryhtmlformsvalidation

Implementing a JavaScript/CSS popup element within a PHP document

I recently attempted to add a popup div to my front page by following instructions from this guide Given that I am not well-versed in coding, I found it challenging to implement the code into my PHP file (which is for a WordPress site). Uncertain about wh ...

javascriptphphtmlcsspopup