Central button placed in a card footer using Bootstrap

I have a .card-footer with three buttons:

<div class="card-footer">
    <button class="btn btn-theme pull-left" type="button" id="toleft"><</button>
    <button class="btn btn-theme" type="button" id="more">+</button>
    <button class="btn btn-theme pull-right" type="button" id="toright">></button>
</div>

While the #toleft and #toright buttons are in the correct positions, the #more button should be in the center of the footer, but it is currently aligned to the left.

Does anyone have any suggestions on how to center the #more button?

htmlcsstwitter-bootstrap

Answer â„–1

Bootstrap 3

Here is a solution for centering buttons in the .card-footer container by adding .text-center class:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-footer text-center">
  <button class="btn btn-theme pull-left" type="button" id="toleft">&lt;</button>
  <button class="btn btn-theme" type="button" id="more">+</button>
  <button class="btn btn-theme pull-right" type="button" id="toright">&gt;</button>
</div>

Bootstrap 4.0+

For Bootstrap 4.0+, the .pull-left and .pull-right classes are no longer available. Instead, use .float-left and .float-right classes. You can also use .text-center to center the second button.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="card-footer text-center">
  <button class="btn btn-dark float-left" type="button" id="toleft">&lt;</button>
  <button class="btn btn-dark" type="button" id="more">+</button>
  <button class="btn btn-dark float-right" type="button" id="toright">&gt;</button>
</div>

Note: It is advised not to use custom CSS rules as Bootstrap provides solutions for design problems. Overwriting CSS properties on components can lead to issues.

Answer â„–2

If it's now 2018 or later, be aware that some of these older solutions may not be compatible with Bootstrap 4...

Don't worry about adding extra CSS as suggested in previous answers.

The use of pull-left and pull-right classes is no longer supported in Bootstrap 4.

Instead, we can utilize float-left and float-right to align our buttons left and right.

To achieve the desired layout, you can start by centering the footer content with the text-center class.

Then, float the left button using float-left and the right button using float-right.

Here's the updated HTML:

<div class="card-footer text-center">
<button class="btn btn-theme float-left" type="button" id="toleft">left</button>
<button class="btn btn-theme" type="button" id="more">center</button>
<button class="btn btn-theme float-right" type="button" id="toright">right</button>
</div>

Resulting in the following layout:

https://i.sstatic.net/6H7jW.png

Answer â„–3

Testing out the latest alpha6 version of Bootstrap 4, specifically focusing on the card component alignment. It seems that by default, buttons within card footers are centered.

It's worth noting that I had to bring in the .pull-left and .pull-right utility classes separately, as they are no longer included in the Bootstrap CSS.

Check out the demonstration below:

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-block">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    <button class="btn btn-theme pull-left" type="button" id="toleft">&lt;</button>
    <button class="btn btn-theme" type="button" id="more">+</button>
    <button class="btn btn-theme pull-right" type="button" id="toright">&gt;</button> </div>
</div>

Answer â„–4

Give this a shot:

.footer-links{
    text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="footer-links">
     <button class="btn btn-style pull-left" type="button" id="moveleft"><</button>
     <button class="btn btn-style" type="button" id="addmore">+</button>
     <button class="btn btn-style pull-right" type="button" id="moveright">></button>
 </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

CSS animation fails to execute

I created a rotating carousel using CSS. The carousel is constructed using the 'ul' tag. To navigate left or right, I dynamically add a 'li' element to the left or right of the list by cloning the necessary value and appending/prependin ...

jquerycssjquery-pluginscss-transitionscarousel

Discovering a way to capture the space bar event in a number input field with JavaScript

Is there a way to capture space bar input with an onchange event in JavaScript? <html> <head> <script type = "text/javascript"> function lala(aa){ console.log(aa + " dasda"); } </script> </head> <body> <input ty ...

javascripthtml

Inject a directive attribute dynamically into an element using another directive, and ensure the initial directive is set to 'active.'

Let me explain in more detail. I am utilizing the tooltip directive from the UI Bootstrap suite, which allows me to attach a tooltip to an input element like this: <input type="text" ng-model="inputModel" class="form-control" placeholder=" ...

javascriptangularjstwitter-bootstrapangularjs-directive

Collection of components displayed in a row - Bootstrap 4

In order to meet the requirement, the label must be positioned above the input element, and the group consisting of each label and input element should be displayed inline with one another. I have managed to achieve this using the following code snippet, ...

javascriptjqueryhtmlcssbootstrap-4

What is the best way to incorporate progressive JPEG images onto a website?

I am currently working on a website called winni.in that is built using Java, Html, and Javascript. I would like to incorporate progressive image rendering upon page load, but I lack the necessary knowledge. I have come across and explored the following re ...

javascriptjqueryhtmlcssjpeg

``Sorry, the link redirection feature is currently experiencing technical

First and foremost, take a look at this example View here Based on the example provided, I would like to create a similar page using the Telrik Text Editor, with a list of links and their corresponding paragraphs. Here is the HTML I am using in the Telr ...

phphtml

Create a dropdown menu option that changes based on the number of items that have been

I need a selection option that displays values 1 to 5. Depending on the selected value, it should generate select options equal to the number selected. For example, if I choose 3, then it should generate 3 select options. Is it possible to loop the ajax in ...

phpjqueryhtmlmysqlajax

Ways to prevent the movement of changing centered text

After recently downloading a text rotator plugin, I've run into a small issue. Whenever the text changes, the entire heading shifts because it's centered. Here's a simple example: (Don't worry about the js code, it's just a ba ...

javascripthtmlcss

Can JOLT be utilized to convert this HTML into a JSON output?

Is it possible to transform this HTML into JSON using JOLT SPEC? [<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <HTML> <HEAD> </HEAD> <BODY><br> #Message Receive correctly<br> ORDERID=1725786449 ...

htmljsonjolt

Tiny containers are positioned outside the boundaries of the larger container

click here to view image description Having trouble with my dashboard layout When adding small boxes, they exceed the page boundaries when moving to a new row The boxes in the first row display correctly, but issues arise with subsequent rows Seeking advi ...

phphtmlcssbootstrap-4

how can I modify the css style of an html element only when a specific sibling is present?

After searching through the MDN CSS documentation, I was unable to find any Combinators that can target the specific element I want to style. /* second-span red when first-span is present */ [first-span] ~ [second-span] { color: red; } /* firs ...

htmlcss

What is the best way to add animation to the hide/show function?

<div class="overlay"></div> CSS: .overlay::after { position: fixed; top: 0; left: 0; width: 100%; content: ""; z-index: -1; height: 100%; transit ...

htmlcss

Navigate through previous and next siblings in jQuery until a difference is found

Here's the issue: I have a div with multiple siblings positioned before and after it. For example: <div id="parent"> <div class="invalid"></div><!-- break iteration here !--> <div class="operand"></div> <div cl ...

jqueryhtmlcss

I am looking to switch from a hamburger menu to a cross icon when clicked

Hey there, I'm currently working on a Shopify website and trying to make the hamburger menu change to a cross when clicked. I've been experimenting with different methods, but unfortunately haven't had any success so far. I have two images â ...

javascriptjavajquerycss

Utilizing Javascript to set the innerHTML as the value of a form

I have written a JavaScript code that utilizes the innerHTML function, as shown below: <script> var x = document.getElementById("gps"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showP ...

javascripthtml

JavaScript is unable to make changes to the page once it has finished loading

I have implemented a JavaScript code that allows me to send messages in a chat interface: function sendMessageToChat(conversation, message) { $("#content").html(conversation + message); $(".current-msg").hide(); $(".current-msg").delay(500).fadeIn ...

javascripthtmlfunction

Duplicate a form based on the selected option

My goal is to duplicate a form based on the numerical value selected from the drop-down menu. You can find the corresponding code in this JSFiddle. Here is the HTML code: <div class="travel_tour-info"> <h3>How many people are you booking for? ...

javascriptjqueryhtml

What is the best way to split a Bootstrap row into five equal-sized columns?

Trying to divide a Bootstrap row into five columns can be tricky when you only have 12 units available on the device. How can this division be achieved successfully? ...

htmlcssbootstrap-4

Transmit a JSON object while simultaneously receiving the corresponding response

As part of a school project, I need to work with JSON. The server will process the file and send back a response in JSON format. This entire exchange needs to be done using JavaScript. I recently learned about the XMLHttpRequest object, but I'm still ...

javascripthtmljson

Employing jQuery, how can one assign attributes to appended HTML and store them

So, I am currently working on a backend page for managing a blog. This page allows users to create, edit, and delete articles. When the user clicks the "edit" button for a specific article named 'foo', the following actions are performed: The ...

javascriptjqueryhtml