Revamp the Bootstrap 4 Form Check: Rearrange Options from left-to-right and top-to-bottom to top-to-bottom and left-to-right

I am currently using a Bootstrap form that displays a checkbox with 13 different options, including:

Urban Plans Commercial Entity Cultural Approval Education Sector Hospitality Industrial Design Interiors Art Leisure/ Sporting Residential Care Retail Space Seniors Living Care Student Housing Warehouse

This is how it currently looks:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="row">
    
    <div class="col-md-6">

</div><!-- /.col-md-6-->

    
    <div class="col-md-6">

<table class="table table-striped table-bordered">
                        <thead>
                            <th scope="col">Customer Sectors</th>
                        </thead>
    <tr>
    
    
    
    <td>
    
                               
                 <label class="checkbox-inline-contacts">
                                <input type="checkbox" id="clientSectors" name="clientSectors[]" value="Urban Plans">Urban Plans                            </label>
                                                        <label class="checkbox-inline-contacts">
                                <input type="checkbox" id="clientSectors" name="clientSectors[]" value="Commercial Entity">Commercial Entity                            </label>
                                                        <label class="checkbox-inline-contacts">
                                <input type="checkbox" id="clientSectors" name="clientSectors[]" value="Cultural Approval">Cultural Approval                            </label>
                                                        <label class="checkbox-inline-contacts">
                                <input type="checkbox" id="clientSectors" name="clientSectors[]" value="Education Sector">Education Sector                          </label>
                                                        <label class="checkbox-inline-contacts">
                                <input type="checkbox" id="clientSectors" name="clientSectors[]" value="Hospitality">Hospitality                            </label>
                                                        <label class="checkbox-inline-contacts">
                                <input type="checkbox" id="clientSectors" name="clientSectors[]" value="Industrial Design">Industrial Design                            </label>
                                                        <label class="checkbox-inline-contacts">
                                <input type="checkbox" id="clientSectors" name="clientSectors[]" value="Interiors Art">Interiors Art                            </label>
                                                        <label class="checkbox-inline-contacts">
                                <input type="checkbox" id="clientSectors" name="clientSectors[]" value="Leisure/ Sporting" checked="checked">Leisure/ Sporting                          </label>
                                                        <label class="checkbox-inline-contacts">
                                <input type="checkbox" id="clientSectors" name="clientSectors[]" value="Residential Care">Residential Care                          </label>
                                                        <label class="checkbox-inline-contacts">
                                <input type="checkbox" id="clientSectors" name="clientSectors[]" value="Retail Space">Retail Space                          </label>
                                                        <label class="checkbox-inline-contacts">
                                <input type="checkbox" id="clientSectors" name="clientSectors[]" value="Seniors Living Care">Seniors Living Care                            </label>
                                                        <label class="checkbox-inline-contacts">
                                <input type="checkbox" id="clientSectors" name="clientSectors[]" value="Student Housing" checked="checked">Student Housing                          </label>
                                                        <label class="checkbox-inline-contacts">
                                <input type="checkbox" id="clientSectors" name="clientSectors[]" value="Warehouse">Warehouse                            </label>
                                        
            
    
    
    </td>
    </tr>
    </table>
  
    </div><!-- /.col-md-6-->

</div><!-- /.row-->

The checkbox values are dynamically generated from a database and are currently displayed from left to right and then top to bottom.

If the snippet doesn't display correctly, here is a screenshot for reference:

https://i.sstatic.net/YuT4B.png

We want to change the layout so that the list is displayed from top to bottom and then left to right on the web page:

Urban Plans Leisure/ Sporting

Commercial Entity Residential Care

Cultural Approval Retail Space

Education Sector Seniors Living Care

Hospitality Student Housing

Industrial Design Warehouse

Interiors Art

htmlcssbootstrap-4

Answer №1

To achieve this layout, you can utilize CSS columns. Create a class for the container of your checkboxes and specify:

  • the number of columns to display
  • the minimum width for each column

For instance, the following class will showcase the checkboxes in 2 columns with a minimum width of 200px. When the screen size reduces, the columns will automatically stack on top of each other.

.mycolumns{
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
    -webkit-column-width: 200px;
       -moz-column-width: 200px;
            column-width: 200px;
}

You have the flexibility to adjust the number of columns and their widths according to your requirements.

Working Example:

.mycolumns{
  -webkit-columns: 2 200px;
     -moz-columns: 2 200px;
          columns: 2 200px;
}
/* display each checkbox on a separate line */
.mycolumns label { display:block}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-6">
    <p>This is your first col-md-6</p>
  </div><!-- /.col-md-6-->
  <div class="col-md-6">
    <h2>Customer Sectors</h2>
    <div class="mycolumns">
      <label class="checkbox-inline-contacts">
        <input type="checkbox" id="clientSectors" name="clientSectors[]" value="Urban Plans">Urban Plans                            </label>
      <label class="checkbox-inline-contacts">
        <input type="checkbox" id="clientSectors" name="clientSectors[]" value="Commercial Entity">Commercial Entity                            </label>
      <label class="checkbox-inline-contacts">
        <input type="checkbox" id="clientSectors" name="clientSectors[]" value="Cultural Approval">Cultural Approval                            </label>
      <label class="checkbox-inline-contacts">
        <input type="checkbox" id="clientSectors" name="clientSectors[]" value="Education Sector">Education Sector                          </label>
      <label class="checkbox-inline-contacts">
        <input type="checkbox" id="clientSectors" name="clientSectors[]" value="Hospitality">Hospitality                            </label>
      <label class="checkbox-inline-contacts">
        <input type="checkbox" id="clientSectors" name="clientSectors[]" value="Industrial Design">Industrial Design                            </label>
      <label class="checkbox-inline-contacts">
        <input type="checkbox" id="clientSectors" name="clientSectors[]" value="Interiors Art">Interiors Art                            </label>
      <label class="checkbox-inline-contacts">
        <input type="checkbox" id="clientSectors" name="clientSectors[]" value="Leisure/ Sporting" checked="checked">Leisure/ Sporting                          </label>
      <label class="checkbox-inline-contacts">
        <input type="checkbox" id="clientSectors" name="clientSectors[]" value="Residential Care">Residential Care                          </label>
      <label class="checkbox-inline-contacts">
        <input type="checkbox" id="clientSectors" name="clientSectors[]" value="Retail Space">Retail Space                          </label>
      <label class="checkbox-inline-contacts">
        <input type="checkbox" id="clientSectors" name="clientSectors[]" value="Seniors Living Care">Seniors Living Care                            </label>
      <label class="checkbox-inline-contacts">
        <input type="checkbox" id="clientSectors" name="clientSectors[]" value="Student Housing" checked="checked">Student Housing                          </label>
      <label class="checkbox-inline-contacts">
        <input type="checkbox" id="clientSectors" name="clientSectors[]" value="Warehouse">Warehouse                            </label>
    </div>
  </div>
  <!-- /.col-md-6-->
</div>
<!-- /.row-->

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

Push Button Unleashes a Cascade of Buttons

After creating a dropdown button, I encountered an issue where replicating it multiple times resulted in all the buttons on the page opening simultaneously. I initially thought that wrapping the button in a class called "dropdown" would prevent this from h ...

htmlcssbootstrap-4

Ways to adjust the height of one panel based on the height of surrounding panels

I have a layout with three panels: two on the left side and one on the right. <div class="row"> <div class="col s6"> <div class="panel"> content1 </div> <div class="panel"> ...

javascriptcsspanelmaterialize

Upon the page loading, only select a handful of checkboxes (JSF)

I am currently developing a web application using JSF 2.0 and I need to have checkboxes pre-selected when the page loads. <h:selectManyCheckbox value="#{UserRegistration.rightSelected}" id="myRight"> <f:selectItem itemValue="add" itemLabel="A ...

htmljsfjsf-2checkbox

Viewport height-responsive image not functioning as expected in Firefox browser

Is there a way to set an image to the 100% height of the browser window, with a small padding at the bottom, and have it centered on the page? I created an example in codepen that works well in Chrome and Safari, but not in Firefox. In Firefox, the image ...

imagefirefoxresponsive-designcss

Utilizing Vue.js i18n for a multi-line text display

Currently, I am implementing i18n single file component in order to provide translation support for my application. In order to achieve this, I have been utilizing the i18n tag as shown below: <i18n> { "fr": { "text": "Lore ...

javascripthtmlvue.jsinternationalizationvue-i18n

Dynamic Mat-select-trigger that automatically adjusts its size to fit the content

Currently, I am experimenting with an Angular Mat-Select that allows multiple selections. To display the selected values in the value field, I have implemented a custom Mat-Select-Trigger. My goal is to enable automatic resizing of the value field (similar ...

cssangularflexboxangular-material

how do I modify my JavaScript code to achieve the desired outcome

How can I program a button to disable after being pressed 10 times in less than a minute, but continue counting if not pressed for 1 minute? function buttonClicked() { if (totalCount + accCounter > 9) { document.getElementById("btn").disabled = ...

javascripthtmljquerycss

What is the best way to save Arabic text in a MySQL database from an HTML form using PHP?

I've been searching extensively, but have had no luck! >> Following the PHP connection I included: mysql_set_charset('utf8', $conn); >> The form input tag has the attribute: accept-charset="utf-8" >> I confirmed that the d ...

phphtmlmysqlutf-8arabic

I am looking to incorporate a 10 px border at the top of my column by utilizing bootstrap4

How can I add a border to the top of my column using Bootstrap 4? I've been struggling with it and can't seem to get it right. Here is the code I'm currently using, which includes <div> tags for the columns: <!doctype html> &l ...

htmlcssbootstrap-4

The global CSS styles in Angular are not being applied to other components as expected

Currently utilizing Angular v10, I have a set of CSS styles that are meant to be used across the entire application. To achieve this, I added them to our global styles.css file. However, I'm encountering an issue where the CSS is not being applied to ...

javascripthtmlcssangulartypescript

The use of the picture element, with its ability to support various image formats and sizes, must always include

Recently, I came across a VueJS template that closely resembles HTML but has the following structure: <picture> <source type="image/avif" :scrset="avif" /> <source type="image/webp" :scrset="webp" ...

htmlcss

Unable to successfully update DIV content in JavaScript due to incorrect file path specified

I came across this code online and it seems to be functioning properly. However, no matter what name I give the file that is supposed to load into the DIV, I consistently receive an error message stating "Object was not found." What specific steps do I nee ...

javascriptajaxhtmlfilenamesgetelementbyid

Identify objects obstructed from camera view (hidden behind other objects) - Three.js version 71

I am working on triggering intersectObjects when a mesh is behind another mesh (to determine if the mesh is visible to the camera). Currently, I have found that intersectObjects is triggered when a mesh is both behind and in front of another mesh. Here i ...

htmlthree.js

Creating a 3D slider on Owl-carousel 2: A Step-by-Step Guide

I am trying to create a slider using Owl-carousel, but I'm having trouble implementing it. I came across this example https://codepen.io/Webevasion/pen/EPMGQe https://i.stack.imgur.com/KnnaN.jpg However, the code from this example doesn't seem ...

htmljquerycssowl-carousel

The Google reCaptcha reply was "Uncaught (in promise) null"

When using reCaptcha v2, I encountered an issue in the developer console showing Uncaught (in promise) null message regardless of moving the .reset() function. Here is the console output: https://i.stack.imgur.com/l24dC.png This is my code for reCaptcha ...

javascriptphphtmlajaxrecaptcha

Expanding the reach of the navigation bar

Hello Everyone, Is there a way to stretch my navigation bar so that the links are evenly spaced out across the browser window instead of being clustered together? I want it to be responsive rather than fixed in size. This is my HTML code: <div class= ...

javascripthtmlcss

Flexbox allows you to easily manage the layout of your website

I am currently working on a CSS project and have encountered an issue. Whenever I apply the "display: flex" property to the .student element, the border around it mysteriously doubles. The reason for wanting to use the flex property is to align the text ve ...

htmlcssflexbox

Align list items vertically, even when they have varying heights

I am currently working on creating rows of images, with 3 images in each row. The data being used is dynamic, however, I have provided some sample HTML and CSS below: ul { margin: 0; padding: 0; list-style: none; width: 900px; } li { margin: 0; padding: ...

htmlcss

Tips for presenting PHP code in a Bootstrap 3 col-sm-4 layout for each set of 3 database entries in a single row

My PHP program retrieves 3 customer records from the database. I want to display the results in a Bootstrap grid view with 3 columns of col-sm-4 in one row. Currently, it displays all the results in a single vertical line. Another requirement is to show ...

phphtml

Leveraging the :checked state in CSS to trigger click actions

Is there a way to revert back to the unchecked or normal state when clicking elsewhere in the window, after using the :checked state to define the action for the clicked event? ...

htmlcss