The text-center alignment in Bootstrap doesn't seem to be applying to buttons

After spending a considerable amount of time trying to center two buttons in Bootstrap, I came across the "text-center" class offered by Bootstrap. However, no matter where I include this class, it doesn't seem to have any effect on the alignment of the buttons.

  <div class="form-group">
    <div class="col-sm-10 text-center">
      <button type="submit" class="btn btn-default">Submit</button>
      <button type="reset" class="btn btn-default">Reset</button>
    </div>
 </div>

The code is part of a form nested within a well element. If you require additional information, please feel free to reach out. Thank you!

javascripthtmlcsstwitter-bootstrap

Answer №1

To center an element in the Bootstrap framework, it is recommended to use the .center-block class.

<div class="form-group">
<div class="col-sm-10 center-block">
  <button type="submit" class="btn btn-default">Submit</button>
  <button type="reset" class="btn btn-default">Reset</button>
</div>
</div>

Answer №2

Ensure that your code snippet functions properly by incorporating the bootstrap css file as shown below. There may be other pieces of code impacting this area of your page - check your browser console to identify any styles conflicting with your desired layout.

To 'center' your col-sm-10 without using col-sm-12, you will need to specify an offset value.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
                    <div class="col-sm-10 col-sm-offset-1 text-center">
                        <button type="submit" class="btn btn-default">Submit</button>
                        <button type="reset" class="btn btn-default">Reset</button>
                    </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

Pass on only the necessary attributes to the component

I have a simple component that I want to include most, if not all, of the default HTML element props. My idea was to possibly extend React.HTMLAttributes<HTMLElement> and then spread them in the component's attributes. However, the props' ...

javascriptreactjstypescriptcomponentsreact-props

Enhancing SVG graphics dynamically with JavaScript and ensuring compatibility across different web browsers

I am currently working on incorporating an element into an existing SVG file. Interestingly, the process runs smoothly on Chrome and Firefox but encounters issues on Edge. I aim for it to function seamlessly on the latest versions of all three browsers, wi ...

javascripthtmldomsvgmicrosoft-edge

What is the best way to flip the pentagon shape made with CSS?

I need assistance in creating a downward-pointing pentagon shape. However, I am unsure of how to define the points on the shape. #pentagon { margin:70px 0 5px 20px; position: relative; width: 110px; border-width: 100px 36px 0; border-style: solid; ...

htmlcsscss-shapes

An issue arises in Node.js and MongoDB where data is being returned from the previous update instead of the most

Currently, I'm delving into the world of Node.js and creating a platform where individuals can vote on different items and view the results afterward. The voting process involves utilizing the /coffeeorwater POST route, which then redirects to the /re ...

javascriptnode.jsdatabasemongodbexpress

Manipulating the display style of an element without using jQuery

Could anyone assist me with this issue? I am currently facing a challenge in making the following script functional. It is intended to hide the button after it has been clicked. The script is being called through Ajax and PHP, so I am unable to utilize jQ ...

phpjavascriptjqueryajaxonclick

What is the best way to connect images within my database?

Struggling to come up with a title for this question, but I'll do my best to explain clearly. I'm working with PHP & HTML and using a MYSQL Database. So, on my member site, each new member is assigned a random football player as their avatar fro ...

phphtmlmysqldatabase

What is the best way to showcase navigation and footer on every page using AngularJS?

I'm in the process of building a Single Page Application. I've decided to create separate components for Navigation, Section, and Footer. The Navigation and Footer should be displayed on every page, while only the Section content changes when nav ...

javascriptangularjsangular-ui-routerangular-ui-bootstrapangular-ui

Incorporate the operating hours of a Business

If I specifically choose Sunday and Monday with working hours ranging from 08.00 to 20.00, the output should be 1&08:00&20:00,2&08:00&20:00. How can I achieve this using Vue.js? This is my current code: <script> submitBox = new Vue( ...

javascriptjqueryhtmlvue.jsvue-component

Determine the occurrences of each element in a given array and save them as key-value pairs

Is there a way to efficiently convert an array of elements into an object with key value pairs representing element frequencies? For example, given an array: var array = ['a','a','a','b','b','c&ap ...

javascriptarraysobject

Transferring data from one function to another function

I'm currently working on a role-based access application where I've integrated user roles into JWT tokens. Upon decoding the token, I retrieve information such as id and role. I have implemented a function that checks for the token within the x-a ...

javascriptnode.jsmongodbfunctionexpress

An unanticipated SyntaxError was encountered while attempting to utilize an Ajax post, specifically in relation

I can't seem to figure out how to troubleshoot an ajax/jquery error. Here is the function I'm working with: var LogIn = { Email: $("#Name").val(), MobileNo: $("#txtMobileNumber").val(), PinCode: '', ...

javascriptjqueryajax

Input field in a tableview

I have a ListView that features a dropdown, 4 textboxes and buttons. My goal is to only show the fourth textbox (enclosed in a span) when the dropdown value in each row of the ListView is set to 2. For instance, if there are 5 records being displayed in t ...

javascriptasp.nethtmllistviewtextbox

The modal appears on the screen prior to the content being shown

While attempting to render a bootstrap modal with content from a REST call, I am encountering an issue where the modal appears before the content has finished populating. The modal is triggered by a button click event. If I click the button again after wa ...

javascripthtmlangularjstwitter-bootstrap

CSS footer element refuses to disappear

This sample application features a header, footer, and a content div that includes a table displaying various statistics of basketball players. One issue I encountered was with the footer when there were many entries in the table. This caused the footer t ...

javascriptjqueryhtmlcssjquery-mobile

Managing React state with custom objects

We are currently utilizing a react table component that requires selections to be maintained across different pages. To achieve this functionality, we have implemented a Map to store the selected rows and a custom class named Selections to manipulate these ...

javascriptreactjsreact-state-management

Error message: Selenium is having trouble finding the search bar, regardless of the selector method (such as xpath, css_selector, fullXpath, etc.)

My attempt to automate the search process on Facebook has hit a roadblock. I have tried the following code: search = driver.find_element_by_xpath('//*[@id="mount_0_0_ij"]/div/div[1]/div/div[2]/div[2]/div/div/div[1]/div/div/label/input') ...

pythonhtmlpython-3.xseleniumweb-scraping

JAVASCRIPT ENCOUNTERS ISSUE WITH RANDOM TEXT GENERATION

Utilizing an array of words, we are in the process of generating random text. The goal is to shuffle and combine these words to form new "random sentences". However, we have encountered a minor issue - the addition of "undefined" at the beginning of each p ...

javascriptarrays

Sometimes, a record goes missing from a PHP/JSON array

When calling a PHP script to retrieve results and converting the array into a JavaScript array for a multiple choice quiz, I encountered an issue where certain records were missing unexpectedly. It seems to occur randomly as there is no specific pattern to ...

phpjavascriptarraysjsonmultidimensional-array

Warning: ComponentMounts has been renamed. Proceed with caution

I'm encountering a persistent warning in my application and I'm struggling to resolve it. Despite running npx react-codemod rename-unsafe-lifecycles as suggested, the error persists and troubleshooting is proving to be challenging. The specific w ...

javascriptreactjs

Struggling to make the DataTables.net Bootstrap 5 example function properly

I'm currently working on familiarizing myself with the styling example for Datatables.net using Bootstrap 5, which can be found at https://datatables.net/examples/styling/bootstrap5.html. I've followed the code provided in the example closely, bu ...

javascripthtmlbootstrap-5