Inline checkbox label with Bootstrap 5 styling

How can I align the checkbox with its label?

Example

<div class="row g-1 border-bottom p-3">
  <div class="col border-end justify-content-center d-flex align-items-center">
    <div class="h6 text-sm-center h-25">
      achievements
    </div>
  </div>
  <div class="col ps-3">

    <div class="form-check">
      <input type="checkbox" name="distinction" id="distinction">
      <label for="distinction">
        Certificate of completion from primary school with distinction
      </label>
    </div>

    <div class="form-check">
      <input type="checkbox" name="distinction2" id="distinction2">
      <label for="distinction2">
        Achievements in social activities, including volunteering for the school community and environment
      </label>
    </div>
  </div>
</div>

I am trying to ensure that the checkboxes are aligned properly with their labels.

Answer №1

Make sure to use the correct checkbox classes: form-check-input and form-check-label.

For more information, check out the official documentation.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="accec3c3d8dfd8decddcec99829c829e">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="row g-1 border-bottom p-3">
  <div class="col border-end justify-content-center d-flex align-items-center">
    <div class="h6 text-sm-center h-25">
      Achievements
    </div>
  </div>
  <div class="col ps-3">


    <div class="form-check">
      <input class="form-check-input" type="checkbox" name="achievement1" id="achievement1">
      <label class="form-check-label" for="achievement1">
        Certificate of completion from elementary school with distinction
      </label>
    </div>

    <div class="form-check">

      <input class="form-check-input" type="checkbox" name="achievement2" id="achievement2">
      <label class="form-check-label" for="achievement2">
          Achievements in social activities, including contribution to the school community, especially through volunteering
      </label>

    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32505d5d46414640534272071c021c00">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Answer №2

To style the form, use display: flex inside the .form-check class. Add some margin to the input and padding to the label.

Live Example

.form-check {
  display: flex !important;
  align-items: flex-start;
}

.form-check>input {
  margin-top: 7px;
}

.form-check>label {
  padding-left: 7px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="75171a1a01060107140535415b415b44">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="row g-1 border-bottom p-3">
  <div class="col border-end justify-content-center d-flex align-items-center">
    <div class="h6 text-sm-center h-25">
      Achievements
    </div>
  </div>
  <div class="col ps-3">


    <div class="form-check">
      <input type="checkbox" name="achievement" id="achievement">
      <label for="achievement">
              Certificate of completion with distinction from primary school
            </label>
    </div>

    <div class="form-check">
      <input type="checkbox" name="achievement2" id="achievement2">
      <label for="achievement2">
              Achievements in social activities, including school environment-related voluntary work
            </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

Z-Index not functioning as expected

I've been trying to position my <h1> header on top of a light div with a background image called light.png. I used Z-index to stack them and added position:relative, but for some reason, the <h1> is not showing above the <div class=ligh ...

Encountering an issue while trying to import the D3.js library into my React.js application

I'm having trouble with properly importing the d3.js libraries in my react.js app. I am using import * as d3 from 'd3' to import everything and store it in the d3 namespace, but I keep getting an error that says - Cannot read property ' ...

Avoiding memory leaks in Reactjs when canceling a subscription in an async promise

My React component features an async request that dispatches an action to the Redux store from within the useEffect hook: const fetchData = async () => { setIsLoading(true); try { await dispatch(dataActions.fetchData(use ...

Functionality fails to load correctly post completion of AJAX request

After successfully implementing an API call to OS Maps (UK map builder) as per their documentation, I encountered a problem when trying to display a map based on a custom field name using ACF (Advanced Custom Fields) in WordPress. The issue arises because ...

Selenium2: Exploring ways to retrieve error specifics after executeScript() encounters a failure

While facing certain idiosyncrasies with browsers, I often have to execute JavaScript commands during testing. Every now and then, Selenium returns an error stating that there was a JavaScript error without providing any specifics. Is there a method to re ...

The image within the element is being cropped despite having a higher z-index

On my page, I am dynamically generating a table using an API request. Each row in the table has an icon that, when hovered over by the user, displays an image associated with that item. However, I seem to have misunderstood how z-index functions, as I have ...

`replaceWith function limited to single use`

I'm encountering an issue where the replaceWith function is only working on the first instance. Even though I am getting updated data, it's not being written to the div after the initial replacement. $( "#searchboxform" ).keyup(function() { ...

Having trouble getting the Underscore.js template to function correctly with JSON data

Hello there! I have some PHP code $arr = array("title"=>"sample Title", "body"=>"151200"); echo json_encode($arr); The data output is: {"title":"test Title","body":"151200"} When I attempt to use this JSON output in Underscore, I encounte ...

Linking text to specific spot on image

I am seeking a solution to anchor a text input box to a specific spot on an image. Although I can achieve this using CSS, the problem arises when I resize my window and the alignment of the input box is lost. While I want to allow some resizing of the win ...

Jest testing in a Vue child component is failing due to the presence of lodash

In this specific instance of my Vue app, I have globally loaded lodash as a Vue plugin in the main.js file: import _ from "lodash" export default function install(Vue) { Vue.prototype._ = _ Vue.mixin({ computed: { _: () => ...

Vue Dynamic Table Title

Is it possible to add labels to a pivot-table in Vue without affecting array indexes and drag-and-drop functionality as shown in the screenshot below? https://i.stack.imgur.com/5JTSM.png Are there alternative methods for implementing this feature? You c ...

initiate an animated sequence upon the initialization of the Angular server

Is there a way to launch a Netflix animation after my server has started without success using setTimeout? I don't want to share the lengthy HTML and CSS code. You can view the code for the animation in question by visiting: https://codepen.io/claudi ...

Error message: RefererNotAllowedMapError - Google Maps API has encountered an issue with

I've integrated the Google Places API into my website to display a list of addresses, but I'm encountering the error detailed below. Encountered the following error when trying to use Google Maps API: RefererNotAllowedMapError https://developers ...

Click the button to trigger the pop-up

After creating a photo gallery using a plugin, my goal is to display this gallery when the user clicks on my homepage button. I am unsure how to make this happen and would appreciate any assistance. Below is my button code: <div class="ow-button-base ...

Ways to center an image within a div using Bootstrap 4

I am currently using Bootstrap version v4.0.0-beta.3 and facing a challenge with aligning an image in the absolute center of a fixed-height div tag. While I have successfully aligned the image horizontally using the mx-auto and d-block classes, I am strugg ...

Anticipated outcome for absent callbacks in module API implementation

I am seeking advice on the expected behavior when developing a Node module API. It is becoming complicated in my module implementation to check if the caller has provided a callback before calling it. I am starting to believe that it may be the user's ...

Setting Up AdminLTE Using Bower

Recently, I decided to incorporate the Admin LTE Template into my Laravel project. I diligently followed the guidelines outlined here As soon as I entered the command: bower install admin-lte The installation process seemed to start, but then the ...

Encountering a challenge when attempting to upgrade to Angular 9: Issue with transitioning undecorated classes with DI migration

As I transition from Angular 8 to Angular 9, I encounter an error during the step related to transitioning undecorated classes with DI. While attempting to migrate, I faced an issue with undecorated classes that utilize dependency injection. Some project ...

Replace async/await with Promise

I want to convert the async/await code snippet below: const mongoose = require('mongoose') const supertest = require('supertest') const app = require('../app') const api = supertest(app) test("total number of blogs" ...

After converting my HTML elements to JSX in Next.js, I am experiencing issues with my CSS files not being applied

Hey there, I'm currently working on a website using Next.js. I've converted the HTML elements of a page to JSX elements but for some reason, the CSS of the template isn't showing up. I've double-checked all the paths and even updated th ...