Tips for achieving uniform spacing between three buttons in a horizontal alignment using bootstrap 3

Is there a way to make buttons enclosed in a <div> with class="row" and each button having class="span4" only as wide as the text it contains, centered at 25%, 50%, and 75% of the width of the screen?

[aaa]   [bbb]  [ccc]

not

[ aaa ][ bbb ][ ccc ]

I am relatively new to bootstrap and not very proficient in CSS.

How can I achieve this layout?

My buttons also have class="btn-outline btn-default", but I don't think that should impact the solution.

At the moment, I am focusing on having exactly three buttons, but if there is an easy generic solution for any number of buttons, I would appreciate that too.

htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

It appears that you are still utilizing in your classes. I suggest transitioning to (v4 is currently in the beta testing phase), and you can achieve your desired result with the following code snippet:

.row {
  border: 1px dashed red /* demonstration */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row text-center">
    <div class="col-xs-4">
      <button type="button" class="btn btn-default">Left</button>
    </div>
    <div class="col-xs-4">
      <button type="button" class="btn btn-default">Middle</button>
    </div>
    <div class="col-xs-4">
      <button type="button" class="btn btn-default">Right</button>
    </div>
  </div>
</div>

UPDATE ()

If you are using or considering bootstrap V4, here is how you can implement it:

.row {
  border: 1px dashed red /* demonstration */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row text-center">
    <div class="col-4">
      <button type="button" class="btn btn-default">Left</button>
    </div>
    <div class="col-4">
      <button type="button" class="btn btn-default">Middle</button>
    </div>
    <div class="col-4">
      <button type="button" class="btn btn-default">Right</button>
    </div>
  </div>
</div>

Answer №2

Make sure to include a div with the class="row", then within that, add 3 separate div elements with the class="span4 text-center". Lastly, place a button inside each of these divs.

Answer №3

One approach to achieving this is through Bootstrap:

.col-md-3 {
  text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
  <div class="col-sm-4"><button class="btn-outline btn-default">text</button></div>
  <div class="col-sm-4"><button class="btn-outline btn-default">text</button></div>
  <div class="col-sm-4"><button class="btn-outline btn-default">text</button></div>
</div>
</div>

Alternatively, you can achieve the same result using plain CSS and flexbox:

.row {
  display: flex;
}
.col-md-4 {
  flex-grow: 1;
  text-align: center;
}
<div class="container">
  <div class="row">
    <div class="col-md-4"><button class="btn-outline btn-default">text</button></div>
    <div class="col-md-4"><button class="btn-outline btn-default">text</button></div>
    <div class="col-md-4"><button class="btn-outline btn-default">text</button></div>
  </div>
</div>

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

Align the content vertically in a Bootstrap column that takes up the full height

Is there a way to make sure that the columns in a row are the full height of the row while keeping the text content vertically centered? <div class="row fixed-bottom mobile-navbar align-items-center"> <router-link to="/" cl ...

cssbootstrap-4flexboxvertical-alignment

dynamic webpage resizing using html and css

Looking for a way to make my SharePoint window automatically resize when the user changes their browser size. I'm using the web version of SharePoint at work and don't have access to Designer. <style type="text/css"> #dgwrap { HEIGHT: ...

htmlcsssharepoint

Help me figure out how to independently toggle submenus on my navbar by utilizing the Vue.js composition API

I am currently working on developing a navbar using the Vue.js composition API. My primary objective is to toggle the submenus when a user clicks on them. However, since I am iterating through an object to display the submenus, I am faced with the challeng ...

javascripthtmllaravelvue.jsvue-composition-api

Ways to maintain image size while zooming out a webpage with CSS

Is there a way to maintain image dimensions when zooming out a page using CSS? Take, for example, fiverr.com. When the page is zoomed out by 25%, And then, when the page is zoomed back to 100% (normal), How can I fix the image dimensions in this situat ...

htmlcssimage

Explore our product gallery with just a simple hover

I am looking to design a product list page with a mouseover gallery similar to the one showcased on [this page][1]. I attempted to use a vertical carousel like the one illustrated in this Fiddle, but unfortunately, it does not function like Zalando and jc ...

javascriptjqueryhtmlcss

How to hide text within a contenteditable element

I'm trying to create a contenteditable span that behaves like a password field in a Linux terminal; the text is entered, but not visible. I've experimented with different CSS properties like visibility: hidden and display: none, but they don&apos ...

htmlcss

Manipulate the timing of css animations using javascript

I am currently working with a progress bar that I need to manipulate using JavaScript. The demo of the progress bar has a smooth animation, but when I try to adjust its width using jQuery $($0).css({'width': '80%'}), the animation disap ...

javascriptjquerycsscss-animations

I am experiencing difficulty transitioning the view in React Native from a side position to an inward direction

Currently tackling a design project and encountering a roadblock in achieving a specific curved effect. Here are two images for reference: The Desired Design: My Current Progress: The basic structure is in place, but hitting a wall when attempting to cu ...

javascripthtmlcssreact-nativereact-navigation

Adjusting variables in Bootstrap using the app.scss file is a helpful customization technique for

As I work on a template that will be utilized by various individuals across different projects, ensuring it functions seamlessly without the need for project-specific modifications is paramount. In this particular case, my goal is to modify the $spacer va ...

csstwitter-bootstrapsassbootstrap-5

Enable the entire button to be clickable without the need for JavaScript by utilizing a Bootstrap 5 button

Is there a way to make a button redirect when clicking anywhere on it, not just the text inside? Here is the button code utilizing Bootstrap 5: <button class="btn btn-rounded btn-primary" type="button">Placeholder Text</button& ...

javascripthtmlbootstrap-5

Adding a class to a div upon loading: A guide

Currently using the following script: $(document).ready(function() { $(".accept").change(function () { if ($(this).val() == "0") { $(".generateBtn").addClass("disable"); } else { $(".generateBtn").remove("dis ...

javascriptjquerycss

Is there a way to invoke a function in an iframe from its parent?

How can I call a function that is in an iframe from the parent document? If the function were in the parent, I could simply use parent.func(); but since it's within the iframe, how can I still call it successfully? JavaScript keeps saying it can' ...

javascripthtmliframe

Are there any alternative approaches to handling frequent database updates in web development aside from using Websockets/AJAX for coding?

Currently, I'm in the process of developing an HTML and Javascript game and looking to implement a feature that displays the player's gold balance on the screen. The goal is to have this balance decrement by 1 every time the player clicks on a sp ...

javascripthtmlsqlajaxwebsocket

Retrieving information from a dynamically created HTML link地址

I was curious about whether Selenium is the sole library capable of extracting data from a table on a specific webpage, found here. While attempting to navigate these sites with bs4, I found that it only displayed the table headers without any data. It wo ...

pythonhtmlselenium-webdriverbeautifulsoupdynamically-generated

Is there a way to make a button on a single div only affect that specific div

I have a PHP query that echoes a div for each row in the table. I want the div to slide up and then, when the user clicks the "read more" button, the div slides down. However, since it is echoed in a loop, all the divs have the same IDs and classes. I wo ...

javascriptjqueryhtmlcss

Navigation structure on a website built with HTML

As I dive into HTML5 programming, I am working on creating a simple navigation menu with links to different HTML pages such as "1.html", "2.html," and others. However, when I click on a link like "1.html," it takes me to a new page where the navigation men ...

html

Not all properties are affected by the CSS stylesheet

Even though my CSS stylesheet successfully changes the background color of the page, I am facing issues with other properties that I have set on my HTML tags. {% block body %} <div id='title'> <h1> VISUALIZER2D ...

htmlcss

Establish starting dimensions and remember the previous sizes of allocations

I successfully implemented a draggable split panel using a code library from johnwalley on GitHub called https://github.com/johnwalley/allotment. My goal is to achieve the following functionalities: Clicking on Expand or collapse the allotment B should e ...

cssreactjspanel

Prevent the wrapping of elements in an expanded hover state

Check out the Latest Demo: https://fiddle.jshell.net/Benihana77/cjtg5ojf/ The Scenario: I have designed a versatile promo where the main text and the button/link text can vary in length. The button/link is placed inline, with an extended arrow that expan ...

css

When the content in the div exceeds its boundaries, it causes it to overlap with

In my design, I have a top menu with a z-index of 999 to ensure nothing covers it. However, I am facing an issue where a scrolling div is appearing on top of the menu bar even though it shouldn't. Any idea why this is happening? Here is the CSS for t ...

htmlcsspositionoverflow