Bootstrap arranges checkboxes into three evenly spaced columns and centers them within a form

Having trouble organizing my checkboxes into 3 columns and centering them within the form perfectly. Current layout:

Click here for image

Desired look:

Click here for image

HTML:

`

            <form action="/signup" method="POST">
                <div class="form-group">
                    <input 
                        type="text"
                        name="firstName"
                        id="first-name"
                        class="form-control" 
                        placeholder="First Name"    
                    />
                </div>
                <div class="form-group">
                    <input 
                        type="text"
                        name="surname"
                        id="surname"
                        class="form-control" 
                        placeholder="Surname"    
                    />
                </div>
                <div class="form-group">
                    <input 
                        type="email"
                        name="email"
                        id="email" 
                        class="form-control"
                        placeholder="Email"
                    />
                    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                </div>
                <fieldset class="form-group">
                    <legend>Pick your favourite 3 things</legend>
                    <div class="form-inline">
                      <label class="form-check-label">
                        <input class="form-check-input mr-2" type="checkbox" value="">
                        Option 1
                      </label>
                    </div>
                    <div class="form-inline">
                        [...]
                    </div>
                    <div class="form-inline">
                        [...]
                    </div>
                        [...]
                    </div>
                </fieldset>
                <button type="submit" class="btn btn-primary">Do it!</button>
            </form>

Answer №1

...
<legend>Select your top 3 preferences</legend>
<div class="row">
  <div class="col-sm-4">
    <div>
      <label>
        <input type="checkbox">
        Choice 1
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox">
        Choice 2
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox">
        Choice 3
      </label>
    </div>
  </div>
  <div class="col-sm-4">
    <div>
      <label>
        <input type="checkbox">
        Choice 4
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox">
        Choice 5
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox">
        Choice 6
      </label>
    </div>
  </div>
  <div class="col-sm-4">
    <div>
      <label>
        <input type="checkbox">
        Choice 7
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox">
        Choice 8
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox">
        Choice 9
      </label>
    </div>
  </div>
</div>

Check out this JSFiddle link: https://jsfiddle.net/bf4vtzry/1/

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

Tips for retrieving information from a dynamically created form using VUE?

Welcome Community I am working on a parent component that includes a child component. The child component dynamically renders a form with various controls from a JSON object retrieved via a Get request using Axios. My goal is to be able to read and loop ...

Arranging divs in a row using jQuery sortable technique

Greetings! I have been attempting to achieve horizontal sorting for two divs but have encountered a couple of issues. Firstly, the divs do not align correctly upon initial page load and secondly, while they can be dragged around, the sortable functionality ...

Using jQuery to toggle the visibility of div elements while displaying an indicator

A query arises regarding the utilization of JQuery to facilitate toggling the visibility of text divs. The question pertains to how one can incorporate an indicator - such as an up and down arrow graphic - to denote whether the divs are open or closed. Sug ...

Storing geographic locations in a variable by inputting an address

Currently, I am working on a feature that allows users to input a location and then convert it into longitude and latitude coordinates. These coordinates will be stored in a variable called latlng instead of using preset coordinates. Right now, I have a fu ...

Utilizing Loops to Generate Unique CSS Designs on an HTML Page

View reference image ->Take a look at the reference image provided. ->In the image, a for loop is used to create box designs and displayed above. ->The goal is to change the background color and border color of all boxes using a single HTML cla ...

Is there a way to ensure my circular image maintains its shape when viewed on mobile devices?

On my website, I have circular images implemented using the Bootstrap 4 class rounded-circle. While they appear perfectly round on desktop, they become oval-shaped on mobile devices such as the iPhone XR. You can see the issue in this Codepen link. Here i ...

Tips for adjusting the size and positioning the ng bootstrap carousel in the center

My Angular project is using ng bootstrap, but I'm facing a styling issue. The content doesn't display in the center, rather it appears in the upper left corner: example I would like the content to be centered and wide under the blue headbar. W ...

The CSS 'd' attribute for the <path> element is not functioning properly in Firefox

My generated code cannot be directly modified due to its association with a large JS code. A portion of this code creates an SVG shape, which I attempted to override through CSS. However, my solution does not function properly in Firefox! Below is the ori ...

Challenges in working with PHP, SQL, HTML, and AJAX data submission

Having encountered another issue, I've been attempting to make an AJAX script function properly, but whenever I click on it, the page reloads without updating the database field. The code I'm using has successfully worked for similar scripts on ...

What is preventing me from retrieving an ID value within an IF condition?

I'm trying to create a script that only allows devices with matching IP addresses, but I'm having trouble using an if statement. Whenever I include x.id inside the statement, it doesn't seem to work... any suggestions? <html> <sc ...

Determining When to Apply max-height / max-width for Images in CSS

At what point should one consider using max-height or max-width for an image? Is it beneficial if I refrain from mentioning the specific dimensions of the image due to uncertainty? ...

Attempting to divide the main page into quadrants

I want to split my homepage into four equal images without any scrolling. When you click on the website, I want the four images to expand and cover the entire screen with no scrollbars. I've made some progress with my code, but it's not quite the ...

What is the best way to calculate the number of div elements with a specific class that are contained within parent div elements with another specific class?

Is there a way to count the number of elements with the class '.child' in each container and then add a sentence containing that count inside each container? <div class='container'> <div class='child'></di ...

jQuery issue with hover and mousedown

Hello everyone, I have a little challenge that I believe shouldn't be too complicated. What I want to achieve is displaying an image in a cell when the mouse hovers over it. Here's the setup: <table id="selectable"> <tr> ...

A confined space that is scrollable, yet keeps any overflow hidden without displaying a scroll bar

Is there a method for creating a overflowing div that conceals the overflow, does not display a scroll bar, but remains scrollable (via mouse wheel or touch input)? For example: <!DOCTYPE html> <div id="longtext" style="width:100px; height ...

Mobile-style menu with full desktop height

I am currently working on developing my first custom WordPress theme from scratch. My goal is to design a mobile-style menu that can also be displayed on desktop screens. To achieve this, I have used jQuery to implement the sliding effect. You can view a ...

Determine the preceding element in a table by utilizing jQuery

I currently have an HTML table with the following content: <table class='main'> <tr id='r1' class='tbl'> <td>V1</td> </tr> <tr id='r2' class='tbl'> <td>V2& ...

navigate to a different section on the page with a series of visuals preceding it

When I try to navigate to a specific dom element on another page, the page initially works fine but then jumps to somewhere before that element. I believe this issue occurs because the page calculates the position before images load, and once the images ar ...

Adding a border with vertical padding above and below two floated divs with different heights

Here is some sample markup: <div class="container"> <div class="one">column a<br />column a</div> <div class="two">column b</div> </div> The content in the inner divs can vary in height and is dynamically g ...

The scrolling speed of my news div is currently slow, and I am looking to increase its

This is the news div with bottom to top scrolling, but it is slow to start scrolling. I want to increase the speed. The current behavior is the div appears from the y-axis of the system, but I want it to start exactly where I define. The scrolling div is ...