Achieve perfect alignment of Bootstrap checkboxes

Is there a way to vertically align checkboxes in a column with their labels? My goal is to have these elements centered on the page, but I want the checkboxes themselves to be aligned vertically.

<div class="row">
  <div class="span12 pagination-centered">
  <div class="checkbox">
    <label><input type="checkbox" value="">asdfasdf</label>
  </div>
    <div class="checkbox">
    <label><input type="checkbox" value="">sdfasdf</label>
  </div>
  <div class="checkbox">
    <label><input type="checkbox" value="">asfdasdf</label>
  </div>
  <div class="checkbox">
    <label><input type="checkbox" value="">asdfasdf</label>
  </div>
 </div>
</div>

htmlcsstwitter-bootstrapcheckboxvertical-alignment

Answer №1

Here's a method to achieve this:

<div class="row">  
    <div class="col-md-4 "></div>
  <div class="col-md-4" style="text-align:center">
  <div class="checkbox">
    <label><input type="checkbox" value="">asdfasdf</label>
  </div>
    <div class="checkbox">
    <label><input type="checkbox" value="">sdfasdf</label>
  </div>
  <div class="checkbox">
    <label><input type="checkbox" value="">asfdasdf</label>
  </div>
  <div class="checkbox">
    <label><input type="checkbox" value="">asdfasdf</label>
  </div>
 </div>
        <div class="col-md-4 "></div>
</div>

Another approach is as follows:

<div class="row">
  <div class="col-md-12" style="text-align:center">
  <div class="checkbox">
    <label><input type="checkbox" value="">asdfasdf</label>
  </div>
    <div class="checkbox">
    <label><input type="checkbox" value="">sdfasdf</label>
  </div>
  <div class="checkbox">
    <label><input type="checkbox" value="">asfdasdf</label>
  </div>
  <div class="checkbox">
    <label><input type="checkbox" value="">asdfasdf</label>
  </div>
 </div>
</div>

Both methods yield the same outcome

Answer №2

To achieve the desired styling, simply incorporate these CSS rules:

input[type="checkbox"] {
    vertical-align: middle;
}

.span12.pagination-centered {
    margin: 25px auto;
    width: 100px;
}

In order to apply these styles, use the following HTML structure:

input[type="checkbox"] {
    vertical-align: middle;
}

.span12.pagination-centered {
    margin: 50px auto;
    width: 100px;
}
<div class="row">
  <div class="span12 pagination-centered">
  <div class="checkbox">
    <label><input type="checkbox" value="">asdfasdf</label>
  </div>
    <div class="checkbox">
    <label><input type="checkbox" value="">sdfasdf</label>
  </div>
  <div class="checkbox">
    <label><input type="checkbox" value="">asfdasdf</label>
  </div>
  <div class="checkbox">
    <label><input type="checkbox" value="">asdfasdf</label>
  </div>
 </div>
</div>

Answer №3

One way to approach this is by implementing the following structure:

<section class="wrapper">
    <div class="row align-center">                  
        <div class="col-lg-6"> ... </div>
        <div class="col-lg-6"> ... </div>
    </div>
</section>

Here's the corresponding CSS:

.align-center {
     display: flex;
     justify-content: center;
     align-items: center;
}

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

Invoke a function to retrieve HTML content from a controller method

public ActionResult MyActionMethod(MyModel model) { //some code string myVar= ActionMethod2(model).toString(); //use myVar Method3(myVar, otherVar); } public ActionResult ActionMethod2()(MyModel model) { return View(model); } private ...

htmlasp.net-mvccontrollerrenderaction

The appearance of the page varies when viewed on different computers using the same version of Firefox

Previously, I posed a question with a touch of irony regarding Firefox without providing an example. As a result, my question was downvoted and I had to request its removal. Now, I have an example illustrating the issue at hand. It took some time to clean ...

htmlcssfirefoxwindows-7

What is the best way to attach two separate event listeners to a single button?

I'm attempting to have one button trigger two different functions, but I haven't been successful so far. I tried adding the second event listener as indicated by the // part, but it didn't work. The two functions should be executed sequentia ...

javascripthtmldom

Tips for Transitioning a Div Smoothly Upwards with CSS!

This is the code that relates to the title: #main { float: left; width: 20%; height: 10vh; margin-top: 10vh; margin-left: 40%; text-align: center; } #k { font-family: Questrial; font-size: 70px; margin-top: -7px; ...

htmlcsscss-transitions

jQuery DataTables covering a CSS-anchored menu bar

My webpage has a pinned navigation menu bar at the top and some tables with interactive features using jQuery's DataTables. However, after implementing jQuery, I encountered an issue where the tables cover the menu when scrolling down, making it uncli ...

javascriptjqueryhtmlcssdatatable

I'm experiencing difficulties with JS on my website. Details are provided below – any suggestions on how to resolve this issue

Can someone help me with a web project issue I'm facing? Everything was going smoothly until I tried to add some JS for dynamic functionality. However, when I attempt to access my elements by tag name, ID, or class, they always return null or undefine ...

javascripthtmlcss

Animating a group of images with JQuery

Hey there! I've been working on a simple animation for my webpage, but I'm having some trouble getting it to work the way I want. You can check out my page at . What I'm trying to achieve is having each image appear at its final position an ...

javascriptjqueryhtmlcssjquery-animate

The jQuery prop method seems to be malfunctioning

Here is the HTML code snippet: <ul class="expander-list" id="category"> <li> <div class="radio" style="padding-left:0px"> <label> <input type="checkbox" id="all" ...

javascriptjqueryhtml

Color in the diamond shape only to a designated height

I am in search of a unique diamond shape that allows me to fill the color up to a specific height based on an attribute or variable provided. https://i.stack.imgur.com/62U6h.png. I attempted creating the diamond shape and initially considered placing it ...

javascripthtmlcss

Create a div element that initially aligns to the left, expands to the full width of the window, and then shrinks back

Hi there! I am currently diving into the world of javascript and jQuery, with a specific goal in mind. I want to create functionality where a div expands to the width of the window when clicked, then shrinks back down to its original size but switches alig ...

javascriptjqueryhtmlcss

Clicking on the parent div with a Jquery onclick event does not trigger when the child image is clicked

I'm running into an issue with a simple code containing an image within a div Oddly enough, clicking on the div itself (even with padding) triggers the function, but clicking directly on the image does not. $(".parent0").click(function() { conso ...

javascriptjqueryhtml

Tips for fashionable dressing &

Can you provide some insights on how to format the &amp; symbol in this HTML snippet? <a>Ian</a> &amp; <a>Jim</a> ...

htmlcss

Using the power of Selenium's XPath, we can easily navigate through a table to access

Looking for assistance in creating selenium xpath for the various column links within a table. Each row has a unique identifier and contains information about a product, including the name. Based on the product name, I need to locate other links within the ...

cssxpathselenium

Trouble experienced with the window.open() function on Safari

When using Safari, it can sometimes block the opening of a new tab through the window.open() function during an ajax call. To bypass this blocking, we must first call window.open() to open a new tab before making the ajax call. Refer to this Stack Overflow ...

javascripthtmlajaxsafariwindow.open

Objective-C and the World of WebSockets

Possible Duplicates: Comparison of WebSockets, TCP/IP, and JavaScript/AJAX for iPhone chat Integrating WebSockets into a Cocoa application Hello all, our team is embarking on creating a bespoke iPhone chat app and deliberating the use of WebSocket ...

c#javascriptiphoneobjective-chtml

Error with an absolutely positioned element within a link in the Firefox browser

I'm experimenting with a unique effect for my links that involves making it look like the upper left corner has been bitten off. To achieve this, I am using absolute positioning of a square element with the same background color as the link itself. W ...

htmlcssgoogle-chromefirefox

Learning the art of Javascript programming within the HTML5 realm

Seeking assistance with a JavaScript project - I'm attempting to develop a Bubble Buster game reminiscent of pong, but with multiple bubbles. The goal is to have falling bubbles on screen (roughly 100 in total) in various colors dropping from random l ...

javascripthtml

Running Javascript based on the output of PHP code

I have been working on my code with test.php that should trigger some Javascript when my PHP code, conditional.php, detects input and submits it. However, instead of executing the expected "Do Something in Javascript," it outputs "Not empty" instead. I fin ...

javascriptphphtmlajaxjson

Using JQuery to dynamically change className based on specific logic conditions

I am struggling to dynamically change the class name of a div based on the text inside another div using jQuery. Here is an example of the HTML structure: <div class="div-overlay"> <a class="image" href="https://www.e ...

javascripthtmljqueryvariables

Can the navigation bar be filled automatically with content that corresponds to the anchors found within the content?

Currently, I am utilizing a Bootstrap frontend for the project at hand. The task I am tackling involves a significant amount of automatically generated content and code, which greatly simplifies the work process. My goal is to explore the potential of cre ...

jqueryhtmlcsstwitter-bootstrap