The alignment of Bootstrap input fields is off center

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
<div class="row">
    <div class="col-xs-12 text-center btn-group" data-toggle="buttons">
        <label class="btn btn-primary active">
            <input type="radio" name="measurement" value="far" checked="checked" /> F
        </label>
        <label class="btn btn-primary">
            <input type="radio" name="measurement" value="cel" /> C
        </label>
    </div>
</div>

I'm a little perplexed as to why it appears left-aligned. I assumed the text-center class would center align everything. Additionally, being inside a col-xs-12 div should also center-align it. What am I overlooking?

htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

The issue lies with the btn-group element. To resolve this, it should be repositioned within a div that is nested under the text-center class. Here's how the updated code will appear:


    <div class="row">
        <div class="col-xs-12 text-center" data-toggle="buttons">
             <div class="btn-group">
                 <label class="btn btn-primary active">
                     <input type="radio" name="measurement" value="far" 
                     checked="checked" /> F
                 </label>
                 <label class="btn btn-primary">
                    <input type="radio" name="measurement" value="cel" /> C
                 </label>
            </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

I am unable to reach POST; instead, I keep receiving GET

After deciding to expand my knowledge, I delved into the world of NodeJS and ReactJS, excited about learning something new. However, there is a dilemma that requires assistance. On the server side, I installed several packages such as MySQL, body-parser, n ...

htmlnode.jsreactjsexpressaxios

What is the best way to fill out border boxes in Bootstrap 4 for horizontal text alignment?

I'm struggling with this code snippet: <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="row border border-success"> <div class="cols-12 col-sm-6 col-lg-4" class="b ...

htmlcsstwitter-bootstrapbootstrap-4

Guide on leveraging event delegation to trigger a function depending on the id of the clicked element

Although I have experience with event delegation, I am currently facing a challenge in setting up a single event listener that can execute one of three functions based on the ID of the element clicked. Here is the existing code without event delegation: ...

javascripthtml

Customize Bootstrap 5: Changing the default color scheme

Currently, I am utilizing Bootstrap 5 (v5.2.1) along with a form on my website. I am attempting to customize the default styles for form validation. Specifically, I want to modify the colored 'tick' or 'check' icon that is displayed wh ...

cssbootstrap-5

Optimal approach for creating a CSS button with a dynamic size, gradient background and arrow design

I'm utilizing the Zurb Foundation framework and aiming to create dynamic call-to-action buttons with varying sizes, text, a background gradient, and a right-pointing arrow. There are three potential approaches I've envisioned: Employ an a el ...

htmlcssbuttonzurb-foundation

What is the process for indicating a specific spot on Google Maps?

Hello, I am a new programmer trying to indicate the location of my company. The map pointer is not showing up even though the location is correct. I have tried numerous solutions but none seem to be working. Any assistance would be gre ...

htmlgoogle-mapslocationpoint

Is there a way to dynamically update text using javascript on a daily basis?

I am currently developing a script to showcase different content and images every day. While I have successfully implemented the image loop to display a new picture daily, I need assistance in achieving the same functionality for the title. My aim is to c ...

javascriptjqueryhtmldynamic

Utilizing ng-bind-html alongside ng-controller

Injecting insecure html into a <div> is part of my current task: <div class="category-wrapper" ng-bind-html="content"></div> The angularjs "code" in this html snippet ($scope.content) includes the following: <script type='text/ ...

javascripthtmlangularjsangularjs-directiveng-bind-html

A guide on how to perfectly center a <ul> element on a webpage

After creating a ul element, I have customized the html and css for my navigation bar: Html: <ul id="list-nav"> <li><a href="Marsrutas.html">Item1</a> </li> <li><a href="Nuotraukos.html">Item2</a& ...

jqueryhtmlcsshtml-listsnavbar

The issue with jspdf is that it is failing to generate PDF documents of

I'm currently developing a resume builder app using ReactJS. One of the functionalities I'm working on is enabling users to download their resumes as PDFs. However, I've encountered an issue with the generated PDFs when using jsPDF. The down ...

javascripthtmlcssreactjsjspdf

How to style FullCalendar to apply background-color for the entire day, not just the event using the 'addEventSource' method

Is it possible to add a background color for the entire day, rather than just for the event itself? The code I've written currently only displays the events with a background color. <script> $(document).ready(function() { $.ajax({ u ...

cssjsoncodeigniterfullcalendar

What is the best way to align my content alongside my sidebar?

I am facing some challenges with my website layout because I used Bootstrap to integrate a sidebar. The sidebar has caused issues with the positioning of my content, and I'm struggling to align it properly next to the sidebar on the left side. Please ...

javascripthtmljquerycssbootstrap-5

Having issues with the Vue.js documentation example not functioning properly in Codepen?

My goal is to replicate a checkbox example from Vue.js's documentation. However, when I import Vue into codepen.io and copy the code for multiple checkboxes into the JS field, then paste the HTML into the designated field, something isn't working ...

htmlvue.jscodepen

Incorporate my personal design flair when utilizing third-party React.js component libraries

Incorporating Material UI as a component library in my React project has been beneficial. However, I am facing a challenge where the inline styling provided by Material UI clashes with my existing custom styles that I have developed over time. Is there a ...

cssreactjsmaterial-ui

What is the best way to have the text in my table cell wrap when it reaches the width of the image in the same cell?

Within the table, I have <td> elements structured like this: <tr> <td> <p class="tableText">Lengthy random text..........</p> <img src="www.imageurl.com/img.png" width="33vw"> </td> &l ...

htmlcsshtml-tableword-wrap

Utilize the attribute selector to apply styling directly within HTML elements

My job requires me to use a CMS that does not give me access to the head-section in order to utilize attribute selectors. I attempted to address this issue by using inline styles. Here is a simplified version of my HTML code: <div> <style typ ...

htmlcss

Steps to center the search form in the navbar and make it expand in Bootstrap 5

I'm utilizing Bootstrap v5.1.3 and have included a navbar as shown below: navbar Here is the code for that implementation: <div class="container"> <nav class="navbar navbar-expand-lg navbar-light bg-light& ...

csstwitter-bootstrapnavbarbootstrap-5search-form

Getting the location of a mouse click and adding tags (marks) on an image: a simple guide

Is there a way to incorporate images with tagged marks similar to Facebook's image tagging feature? How can I retrieve the X and Y coordinates of tags on the image itself (not the screen) and display them in a responsive manner? ...

javascriptjqueryhtmlcss

Utilizing Python and Selenium for Xpath, extracting text from a span tag within a web table

Struggling with this one, I've carefully gone through all previous posts before reaching out for help. The structure of the HTML web table is provided below. I am specifically interested in extracting the date from the span tag, and here are the vari ...

pythonhtmlselenium-webdriverxpath

Displaying or concealing list elements in Angular 6

I am working on a simple Angular app that displays a list of items. I want the behavior to be such that when the first item in the list is clicked, its description (card) should be displayed. And, if the second item is clicked and its description is displa ...

javascriptangularhtmltypescriptbootstrap-4