How can I align my checkboxes horizontally with a set number using bootstrap?

Question

How can I align my checkboxes horizontally with a set number using bootstrap?

Is there a way to align my checkboxes next to each other in columns of 5, rather than being stacked vertically?

The current layout looks like this:

I would like the checkboxes to appear like this:

[x] label [x] label [x] label [x] label [x] label
[x] label [x] label [x] label [x] label [x] label

This is what my code shows:

      <div class="row form-group">
        <div class="col col-md-3">
          <a data-toggle="collapse" href="#collapsKlassen">
            <h5 class="mb-0">
              Klassen <i class="fas fa-angle-down rotate-icon"></i>
            </h5>
          </a>
        </div>
        <div class="col-12 col-md-9 collapse" id="collapsKlassen" style="margin-right: 5px;">
          <div class="form-check  "  >
            <div >
              @Html.EditorFor(x => x.CheckBoxKlassen)
            </div>
          </div>
        </div>
      </div>

I have attempted using formcheck inline among other methods, but nothing has provided the desired result. EDIT: Rendered code:

<input id="CheckBoxKlassen_0__ID" name="CheckBoxKlassen[0].ID" type="hidden" value="61" />
<input id="CheckBoxKlassen_0__Display" name="CheckBoxKlassen[0].Display" type="hidden" value="BIO 1Aa" />
<input data-val="true" data-val-required="The WasChecked field is required." id="CheckBoxKlassen_0__WasChecked" name="CheckBoxKlassen[0].WasChecked" type="hidden" value="False" />
<input data-val="true" data-val-required="The IsChecked field is required." id="CheckBoxKlassen_0__IsChecked" name="CheckBoxKlassen[0].IsChecked" type="checkbox" value="true" />
<label for="CheckBoxKlassen_0__IsChecked">BIO 1Aa</label>
<br /><input id="CheckBoxKlassen_1__ID" name="CheckBoxKlassen[1].ID" type="hidden" value="64" />
<input id="CheckBoxKlassen_1__Display" name="CheckBoxKlassen[1].Display" type="hidden" value="BIO 1Ab" />
<input data-val="true" data-val-required="The WasChecked field is required." id="CheckBoxKlassen_1__WasChecked" name="CheckBoxKlassen[1].WasChecked" type="hidden" value="False" />
<input data-val="true" data-val-required="The IsChecked field is required." id="CheckBoxKlassen_1__IsChecked" name="CheckBoxKlassen[1].IsChecked" type="checkbox" value="true" />
<label for="CheckBoxKlassen_1__IsChecked">BIO 1Ab</label>
...

html css razor bootstrap-4

Answer 1

Answer №1

Here is a practical example that you can use as reference and customize according to your requirements.

Example

 public class CustomCheckBox
{
    public int Id { get; set; }
    public string Name { get; set; }

    public bool IsSelected { get; set; }
}

public class CheckBoxListViewModel
{
    public IList<CustomCheckBox> CheckBoxItems { get; set; }
}

CustomCheckBoxList.cshtml, utilize CSS for horizontal alignment of checkboxes and adjust the width percentage of <li> tag to control number of checkboxes per line.

@model YourNamespace.Models.CheckBoxListViewModel
<style>
  .checkbox-grid li {
    display: block;
    float: left;
    width: 20%;
   }
</style>

<div class="row form-group">
  <div class="col col-md-3">
    <a data-toggle="collapse" href="#collapsClasses">
        <h5 class="mb-0">
            Classes <i class="fas fa-angle-down rotate-icon"></i>
        </h5>
    </a>
  </div>
  <div class="col-12 col-md-9 collapse" id="collapsClasses" style="margin-right: 5px;">
    <div class="form-check">
        <ul class="checkbox-grid">
            @for (var i = 0; i < Model.CheckBoxItems.Count(); i++)
            {
            <li>
                <input type="checkbox" asp-for="CheckBoxItems[i].IsSelected" value="@Model.CheckBoxItems[i].Id" />
                <label>@Model.CheckBoxItems[i].Name</label>
            </li>

            }
        </ul>
    </div>
  </div>
</div>

Backend Code, retrieve checkbox list data in the controller

public IActionResult CheckBoxList()
    {
        CheckBoxListViewModel model = new CheckBoxListViewModel()
        {
            CheckBoxItems = _context.CustomCheckBox.ToList()
        };
        return View(model);
    }

Answer 2

Here is a practical example that you can use as reference and customize according to your requirements.

Example

 public class CustomCheckBox
{
    public int Id { get; set; }
    public string Name { get; set; }

    public bool IsSelected { get; set; }
}

public class CheckBoxListViewModel
{
    public IList<CustomCheckBox> CheckBoxItems { get; set; }
}

CustomCheckBoxList.cshtml, utilize CSS for horizontal alignment of checkboxes and adjust the width percentage of <li> tag to control number of checkboxes per line.

@model YourNamespace.Models.CheckBoxListViewModel
<style>
  .checkbox-grid li {
    display: block;
    float: left;
    width: 20%;
   }
</style>

<div class="row form-group">
  <div class="col col-md-3">
    <a data-toggle="collapse" href="#collapsClasses">
        <h5 class="mb-0">
            Classes <i class="fas fa-angle-down rotate-icon"></i>
        </h5>
    </a>
  </div>
  <div class="col-12 col-md-9 collapse" id="collapsClasses" style="margin-right: 5px;">
    <div class="form-check">
        <ul class="checkbox-grid">
            @for (var i = 0; i < Model.CheckBoxItems.Count(); i++)
            {
            <li>
                <input type="checkbox" asp-for="CheckBoxItems[i].IsSelected" value="@Model.CheckBoxItems[i].Id" />
                <label>@Model.CheckBoxItems[i].Name</label>
            </li>

            }
        </ul>
    </div>
  </div>
</div>

Backend Code, retrieve checkbox list data in the controller

public IActionResult CheckBoxList()
    {
        CheckBoxListViewModel model = new CheckBoxListViewModel()
        {
            CheckBoxItems = _context.CustomCheckBox.ToList()
        };
        return View(model);
    }

Answer 3

Answer №2

In my experience, I find that utilizing flexbox is the ideal solution for scenarios like this one. You can refer to an easy-to-understand guide here which provides a quick explanation. When paired with the CSS calc function, it proves to be one of the most efficient ways for styling.

If you want to implement this in your CSS code, you can use the following:

div.form-check { display: flex; flex-wrap: wrap; width: 100%; }

div.form-check div { flex-basis: 20%; }

Answer 4

In my experience, I find that utilizing flexbox is the ideal solution for scenarios like this one. You can refer to an easy-to-understand guide here which provides a quick explanation. When paired with the CSS calc function, it proves to be one of the most efficient ways for styling.

If you want to implement this in your CSS code, you can use the following:

div.form-check { display: flex; flex-wrap: wrap; width: 100%; }

div.form-check div { flex-basis: 20%; }

How can I align my checkboxes horizontally with a set number using bootstrap?

Answer №1

Answer №2

Similar questions

When working with TextareaAutosize component in MUI, an issue surfaces where you need to click on the textarea again after entering each character

Parsing a Table in Python with HTMLParser

Set the color of the text in the Material UI pagination component to a subtle shade

What is the best way to adjust the height of a dropdown box in an angular application?

Encountering an Uncaught TypeError while trying to read properties of undefined (specifically 'remove') during a Change event is causing an issue for me

The header and logo are missing from my webpage

Tips for displaying a multi-select dropdown in the Creative Tim Angular Material Pro filter panel

retrieving data from a database to populate selection options using PHP

Internet Explorer fails to accurately determine the height of a textarea based on the line-height

Differences Between Mobile and Desktop Browser Media Queries

How to insert an HTML element in between multiple list items using jQuery

Using JavaScript regular expressions to validate currency without relying on jQuery

Update the parent element's class style within a targeted div media query

What is the best way to enclose text within a border on a button?

Layers of CSS images

Leveraging Bootstrap column classes with diverse div heights

Selecting multiple items from a grid using the Ionic framework

Does anyone know how to position div 1 underneath div 2 using CSS?

What is the process for implementing a banner across the entire website?

I am looking to enhance my email subscription form by incorporating a URL into the subscription button, all while ensuring that the email subscription function in the HTML remains fully operational