What is the best way to line up a checkbox and its labels alongside a dropdown menu?

My index.html file has a header like this: https://i.sstatic.net/s0hAt.png

I'm trying to align the checkbox and its label with the dropdown menu "In ordine". I'm using only bootstrap (no custom classes) and my current page layout is as follows.

<div class="container-fluid">

        <div class="row">
            <div class="col-12">
                <div class="content">
                    <div class="alert alert-secondary">
                        <form action="{{ url('admin/students') }}" method="GET" id="filters" >
                            <input type="hidden" name="filters" value="on">

                            <div class="form-row table mb-0">

                                // code continues...

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

Although I've searched through bootstrap documentation, I have yet to find a solution that suits my needs.

//edit: This is what I initially wanted when posting this question: https://i.sstatic.net/G4gJn.png

However, due to lack of clarity in my question, I had to settle for an answer. I forgot to mention that I wanted the checkbox to be centered relative to the label.

htmlcssbootstrap-4

Answer №1

By simply updating the Bootstrap classes for the input checkbox, you can achieve a different look:

<input type="checkbox" class="form-check-input" name="respinsi" >

Replace it with:

<input type="checkbox" class="form-check form-check-inline" name="respinsi" >

After making this change, your view will transform to: New Form View

Answer №2

It seems like you prefer to have the checkbox above the drop down menu, and the label aligned vertically with "In ordine." Does this layout meet your requirements?

If not, perhaps you could adjust your image to illustrate your desired layout.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="14767b7b60676066756454203a223a24">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">

    <div class="row">
        <div class="col-12">
            <div class="content">
                <div class="alert alert-secondary">
                    <form action="students" method="GET" id="filters">
                        <input type="hidden" name="filters" value="on">

                        <div class="form-row table mb-0">

                            <div class="form-group col-md-4  col-lg-3">
                                <label for="name">Nume</label>
                                <input class="form-control" type="text" name="nume" @if(request()->has('nume')) value="{{ request()->get('nume') }}" @endif>
                            </div>

                            <div class="form-group col-md-4  col-lg-3">
                                <label for="domeniu_doctorat_id">Domeniu doctorat</label>
                                <select class="form-control" name="domeniu_doctorat_id">
                                    <option value=0>Selecteaza domeniu</option>
                                    @foreach($domenii as $domeniu)
                                    <option value="{{ $domeniu->id }}" @if(request()->get('domeniu_doctorat_id') == $domeniu->id) selected="selected" @endif>
                                        {{ $domeniu->nume }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="form-group col-md-4  col-lg-3">
                                <label for="conducator_doctorat_id">Conducator doctorat</label>
                                <select class="form-control" name="conducator_doctorat_id">
                                    <option value=0>Selecteaza conducator</option>
                                    @foreach($conducatori as $conducator)
                                    <option value="{{ $conducator->id }}" @if(request()->get('conducator_doctorat_id') == $conducator->id) selected="selected" @endif>
                                        {{ $conducator->nume }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="form-group col-md-4  col-lg-3">
                                <label for="name">An inmatriculare</label>
                                <input class="form-control" type="text" name="an_inmatriculare" @if(request()->has('an_inmatriculare')) value="{{ request()->get('an_inmatriculare') }}" @endif>
                            </div>

                            <div class="form-group col-md-4  col-lg-3">
                                <label for="name">Forma de pregatire</label>
                                <select class="form-control" name="forma_admitere_id">
                                    <option value=0>Selecteaza</option>
                                    @foreach($forme as $forma)
                                    <option value="{{ $forma->id }}" @if(request()->get('forma_admitere_id') == $forma->id) selected="selected" @endif>
                                        {{ $forma->nume }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="form-group col-md-4  col-lg-3">
                                <label for="name">Status</label>
                                <select class="form-control" name="status">
                                    <option value="0">Selecteaza</option>
                                    <option value="1">Normal</option>
                                    <option value="2">Intrerupere</option>
                                    <option value="3">Prelungire</option>
                                    <option value="4">Gratie</option>
                                </select>
                            </div>

                            <div class="form-group col-md-4  col-lg-3">
                                <label for="name">Studenti pe pagina</label>
                                <select class="form-control" name="paginare">
                                    <option value="20">20</option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                </select>
                            </div>

                            <div class="form-group col-md-4 col-lg-3">
                                <label for="name">Ordonare dupa</label>
                                <select class="form-control" name="ordonare-dupa-camp">
                                    <option value="0">Selecteaza</option>
                                    <option value="1">Nume</option>
                                    <option value="2">An inmatriculare</option>
                                </select>
                            </div>

                            <div class="form-group col-md-4 col-lg-3">
                                <label for="name">In ordine</label>
                                <select class="form-control" name="ordine">
                                    <option value="ASC">Ascendenta</option>
                                    <option value="DESC">Descendenta</option>
                                </select>
                            </div>

                            <div class="form-group form-check col-md-4 col-lg-3 ml-n1">
                                <input type="checkbox" class="form-check-input" name="respinsi" checked style="margin-top: 0.375rem">
                                <label class="form-check-label" for="name">Include studentii respinsi</label>                                    
                            </div>

                            <div class="form-group col-md-8 col-lg-6 align-self-end text-right">
                                <button class="btn btn-primary" type="submit" name="action" value="cauta">Cauta</button>
                                <a href="{{ url('admin/students') }}" class="btn btn-light">Anuleaza</a>

                                <button class="btn btn-light" name="action" type="submit" value="exporta-excel">Exporta Excel</button>
                            </div>
                        </div>
                     </form>
                 </div>
             </div>
         </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

The Bootstrap Navbar appears hidden beneath other elements on mobile devices

While using bootstrap to style my header contents, I encountered a strange issue. The navbar that appears after clicking on the hamburger menu is displaying behind all the components. Even though I've set the z-index to the maximum value, it still doe ...

javascripthtmljquerycsstwitter-bootstrap

What causes the delay in CSS animations?

Is there a way to trigger an "updating" image to spin while a long JavaScript function is running? I am currently using JQuery to add a class called "spinning", defined in my CSS for the animation. The problem is that when I add the class and then call a l ...

javascriptjqueryhtmlcssanimation

What causes loss of focus in a React input element when it is nested inside a component?

When I have an input element connected to the React Context API, updating the value onChange works fine when the element is not nested within a component. However, if I render a different component just under the input that returns another input field conn ...

htmlreactjsformsecmascript-6ecmascript-2016

Utilizing JavaScript to eliminate objects from a collection and showcase a refreshed arrangement

On a simple webpage using bootstrap and js/jquery, data is fetched via ajax to create entries displayed to the viewer. The process involves: - making a request - parsing XML to create an array of objects with all the data - sorting by one property - cr ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Is there a way in Ruby to extract the inner HTML of the <title> tag by loading the HTML source code of a webpage into a string and then parsing it?

Currently, I am trying to extract the inner HTML of the <body> tag from an HTML source string using Ruby. Does anyone know how this can be achieved? Despite my attempts to find a solution, I have been unsuccessful so far. Any guidance would be grea ...

htmlruby

How can you use CSS to style an image's title attribute?

I am trying to customize the text displayed when hovering over an image. Despite my efforts, the code I used doesn't seem to be working properly: <body> <img src="img.jpg" title="<span class='title'>title</span>" &g ...

htmlcss

Purchase Now with Paypal Button

Just starting out with PHP and PayPal buttons! Important: Referring to Mysql items here. I'm attempting to set up an online shop, but I have a concern about PayPal "Buy Now" buttons. If a customer purchases an item, the website receives the money, b ...

phphtmlpaypal

What steps can be taken to resolve the link prefetch warning in a Next.js application?

I am currently working on a Next.js application using version 13.4, and I've encountered a warning in the console: After preloading the resource at <URL>, it was not used within a few seconds of the window's load event. Please ensure that i ...

cssreactjsgoogle-chromenext.js

Turn off Chrome 69's autofill functionality

I've recently encountered an issue with Chrome's password autofill feature that has been troubling me for a few days now. This problem began when I was using Chrome version 69. After much trial and error, I found a solution by removing the id an ...

javascripthtmlgoogle-chromeautocompleteautofill

Incorrect placement of rectangle on a dynamic canvas

After clicking on two different positions on the canvas rectangle, I noticed that it was being drawn in the wrong location due to issues with the responsive canvas size. Despite attempting to scale the pointer position based on both the canvas and window w ...

htmlresponsive-designfabricjs

Enter a number into a text box and increase the value in several text boxes created with jQuery in PHP

I need to dynamically populate textboxes with student information from a database after inputting a value, for example 100, and clicking on the 'Add' button. The challenge is to incrementally assign values to each textbox based on the initial num ...

phpjqueryhtmlajax

Placing buttons on top of a video within a div container

I am facing a challenge with implementing custom controls on a video embedded in my webpage. I have tried setting a div to absolute position for the buttons, but they are not clickable. Is there a way to achieve this without using jQuery? I need the butto ...

javascripthtmlcssbuttonvideo

Click a button to show or hide text

I am attempting to create a button that will toggle text visibility from hidden using 'none' to visible using 'block'. I have tried the following code but unfortunately, it did not yield the desired outcome. <p id='demo' s ...

javascriptcsshtmldom-events

Using jQuery to add HTML elements before the content of a list

I'm facing a challenge in dynamically adding new elements to my list. Through ajax, I retrieve HTML data from my database and aim to iterate through each new <li> element to gradually prepend them to the top of the list. This is the snippet of ...

jqueryhtmlajax

Manipulating the DOM by linking to a div and using JSON information for opening and closing

I have retrieved data from a JSON file and displayed it as a link. I am looking to implement functionality that allows me to hide and show a div when the link is clicked. Below is the code I'm currently using: $(document).ready(function() { $ ...

jqueryhtmljsonhideshow

What is the best approach in Ruby for managing an unordered list with split columns and counting each

I am currently in the process of strategizing the layout for a webpage utilizing Bootstrap 4 within Ruby on Rails. Specifically, I need to create a sidebar submenu that can expand and collapse, feature bullet points, and include a counter. The desired out ...

htmlcssruby-on-rails

Refresh a page automatically upon pressing the back button in Angular

I am currently working on an Angular 8 application with over 100 pages (components) that is specifically designed for the Chrome browser. However, I have encountered an issue where the CSS randomly gets distorted when I click the browser's back button ...

javascripthtmlangulartypescript

Launch a modal from a separate webpage

I've been trying to implement a modal using Bootstrap 4, and after referring to the documentation, it seems to be working smoothly. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <scri ...

javascripthtmlbootstrap-4

Ways to address time discrepancies when the countdown skips ahead with each button click (or initiate a countdown reset upon each click)

Every time I click my countdown button, the timer runs normally once. But if I keep clicking it multiple times, it starts skipping time. Here are my codes: <input type="submit" value="Countdown" id="countdown" onclick="countdown_init()" /> <div i ...

javascripthtmlbuttoncountdown

Having trouble with your HTML5 canvas?

Below is the JS code snippet: function DisplayText(output, x, y){ var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillText ("A" , x, y); ctx.font = 'bold 20px sans-serif'; ...

javascripthtmlcanvas