Aligning list items with Bootstrap

I am struggling with aligning Sheet3 and Science vertically left in a list with checkboxes. Currently, Science goes below the checkbox and I need a solution to fix this alignment issue.

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

Any guidance on how to adjust the alignment of Sheet3 and Science would be greatly appreciated!

<div class="dropdown selection-l9zgqjql-gz80fbqg w-book-select w-50">
<input type="text" class="form-control form-select dropdown-toggle show" data-bs-toggle="dropdown" value="All Sheets" aria-expanded="true" data-bs-auto-close="outside" readonly="" style="border-top-left-radius: 0px; border-bottom-left-radius: 0px;">
<div class="dropdown-menu p-0 w-100 show" data-popper-placement="bottom-start" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(0px, 40px, 0px);">
    <div class="list-group">
        <label class="list-group-item">
            <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet1" checked=""> Sheet1 </label>
        <label class="list-group-item">
            <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet2" checked=""> Sheet2 </label>
        <label class="list-group-item">
            <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet3" checked=""> Sheet3 </label>
        <label class="list-group-item">
            <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet4" checked=""> Sheet4 </label>
        <label class="list-group-item">
            <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet1" checked=""> Sheet1 </label>
        <label class="list-group-item">
            <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet2" checked=""> Sheet2 </label>
        <label class="list-group-item" style="
">
            <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet3 this is a bigger title of the science" checked=""> Sheet3 this is a bigger title of the science </label>
        <label class="list-group-item">
            <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet4" checked=""> Sheet4 </label>
        <label class="list-group-item">
            <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet1" checked=""> Sheet1 </label>
        <label class="list-group-item">
            <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet2" checked=""> Sheet2 </label>
        <label class="list-group-item">
            <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet3" checked=""> Sheet3 </label>
        <label class="list-group-item">
            <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet4" checked=""> Sheet4 </label>
        <label class="list-group-item">
            <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet1" checked=""> Sheet1 </label>
        <label class="list-group-item">
            <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet2" checked=""> Sheet2 </label>
        <label class="list-group-item">
            <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet3" checked=""> Sheet3 </label>
        <label class="list-group-item">
            <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet4" checked=""> Sheet4 </label>
        <label class="list-group-item">
            <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet1" checked=""> Sheet1 </label>
        <label class="list-group-item">
            <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet2" checked=""> Sheet2 </label>
        <label class="list-group-item">
            <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet3" checked=""> Sheet3 </label>
        <label class="list-group-item">
            <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet4" checked=""> Sheet4 </label>
    </div>
</div>
</div>

htmlcssbootstrap-5

Answer №1

Adjusted the width of the dropdown-menu and dropdown elements.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ee8c81819a9d9a9a98a9aaedbc0dcc0dd">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="dropdown selection-l9zgqjql-gz80fbqg w-book-select" style="width: fit-content;">
  <input type="text" class="form-control form-select dropdown-toggle show" data-bs-toggle="dropdown" value="All Sheets" aria-expanded="true" data-bs-auto-close="outside" readonly="" style="border-top-left-radius: 0px; border-bottom-left-radius: 0px;">
  <div class="dropdown-menu p-0 show" data-popper-placement="bottom-start" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(0px, 40px, 0px); min-width: max-content;">
    <div class="list-group">
      <label class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet1" checked=""> Sheet1 </label>
      <label class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet2" checked=""> Sheet2 </label>
      <label class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet3" checked=""> Sheet3 </label>
      <label class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet4" checked=""> Sheet4 </label>
      <label class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet1" checked=""> Sheet1 </label>
      <label class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet2" checked=""> Sheet2 </label>
      <label class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet3 this is a bigger title of the science" checked=""> Sheet3 this is a bigger title of the science </label>
      <label class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet4" checked=""> Sheet4 </label>
      <label class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet1" checked=""> Sheet1 </label>
      <label class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet2" checked=""> Sheet2 </label>
      <label class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet3" checked=""> Sheet3 </label>
      <label class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet4" checked=""> Sheet4 </label>
      <label class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet1" checked=""> Sheet1 </label>
      <label class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet2" checked=""> Sheet2 </label>
      <label class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet3" checked=""> Sheet3 </label>
      <label class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet4" checked=""> Sheet4 </label>
      <label class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet1" checked=""> Sheet1 </label>
      <label class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet2" checked=""> Sheet2 </label>
      <label class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet3" checked=""> Sheet3 </label>
      <label class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet4" checked=""> Sheet4 </label>
    </div>
  </div>
</div>

Answer №2

Insert this CSS code into your stylesheet:

.list-group-item {
 justify-content: flex-start;
 align-items: flex-start;
}

Answer №3

Creating a similar look using CSS is possible:

span {
display: flex;
align-items: center;
}

Make sure to enclose the text within a span tag for certainty.

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

Obtain and retrieve media URL (m3u8) with the help of PHP

I am currently working on a project that involves hosting videos for a client on a website. The videos are loaded externally through m3u8 links on the site. Now, the client has expressed interest in having these videos available on a Roku channel as well. ...

phphtmldomcurlroku

Prevent div from moving upward using CSS

Whenever I use the search box, a dropdown list of suggestions appears. However, the searchbox div element keeps moving both up and down. How can I prevent the div from moving upwards? The code snippet below shows a hardcoded unordered list of names for s ...

cssmaterial-ui

Ways to showcase your style using Bootstrap

Can you help me figure out how to align this sidebar properly? I tried using the d-flex property but it doesn't seem to be working for me. The sidebar should be on the left side and the two containers should be centered. For a clearer explanation, pl ...

htmlcssbootstrap-5

Tips for utilizing the font-family style to span multiple columns

I recently discovered that you can set the background color across table columns using the <colgroup> tag. table { border: 2px solid; border-collapse: collapse; } td { border: 2px solid; } <ta ...

htmlcsshtml-table

I'm struggling to make this background show up in a div

Anyone able to help me figure this out? I can't seem to get the achtergrond_homepage.png as a background in rounded corners. Edit: It seems like the gray color is always on top. Could it be controlled in the JavaScript part? This is the CSS: @ch ...

javascriptcssbackground

When using Websocket, an error message stating "Invalid frame header" will be triggered if a close message of 130 or more characters is sent

I am utilizing the ws node.js module along with html5's WebSocket. The Websocket connection is established when a user triggers an import action, and it terminates once the import is completed successfully or encounters an error. At times, the error ...

javascriptnode.jshtmlwebsocket

Trouble accessing onclick function

My dataSend AJAX function is not being called when I use the onclick event. I have checked in the Inspector of my browser and confirmed that the click handler is attached to it. However, when I set a breakpoint in the function using the Debugger, it never ...

javascriptphphtmlajax

What is the best .scss file to use for updating the site?

Currently in the process of learning SASS and Bootstrap 4, I have set up some .scss partial files and imported them into my site.scss file as required. Making changes to Bootstrap involved modifying my _my-theme.scss file. But now, I'm wondering about ...

csssassbootstrap-4

Leveraging the power of Required (html5) feature in Internet Explorer

What should I do if I want to make a textbox required on my webpage, but the issue is that it uses an HTML5 attribute? Is there a solution or alternative available? This is how I create my TextBox: @Html.TextBoxFor(model => model.SubChoiceText, new { ...

asp.net-mvchtmlinternet-explorerhtml-helper

Show the chosen option when the textarea is no longer in focus

My form includes a text box and a button: <p><textarea rows="4" cols="30">Aliquam erat volutpat.</textarea></p> <p><input type="button" value="Submit"></p> When the user selects text in the textarea and then cl ...

javascriptjqueryhtmlcss

Themes in Next.js with a splash of color

Is there a way to implement theming with color picking for elements? Check out the example here. I've explored using CSS variables and changing the document classname, but I'm uncertain if this is the best approach. @tailwind base; @tailwind com ...

cssreactjsnext.jsthemescss-variables

Troubleshooting: Android compatibility issues with dynamic source for HTML 5 video

My HTML5 video with dynamic source loaded using JavaScript is functioning properly in a web browser but encountering issues within an Android PhoneGap build application. Take a look at the code snippet below: JavaScript code: $('#video_player' ...

javascriptandroidhtmlphonegap-build

Unable to convert cursor to jpg format

I am facing an issue where I have a jpg file stored in the same folder as my styles.css, and I want to change the cursor on a webpage to this particular jpg file. Despite my efforts, it seems like the cursor is not changing as expected. Currently, I am us ...

htmlcss

What is the best way to prevent certain bootstrap classes from being applied across all elements?

After testing my HTML and CSS code on my local computer, it looks perfect. However, when I upload it to a server, the appearance changes. You can see it in action here: . The issue seems to be related to some bootstrap classes being activated differently ...

htmlcssbootstrap-4google-web-designer

Is it possible to target the last child element in CSS without relying on nesting

Is there a way to select the very last child of an element and apply a specific class without using nesting? For instance, how can I target only the final div in the structure below, nothing more and nothing less. <body> <div class="very-last- ...

csssass

Is there a way to locate a file by inputting a partial name?

How can I create a search bar that allows me to find files in a folder (songs) by typing only part of the song name? For example, if I type "he," it should show results like "hello" and "hey." Is there a way to take my input and search for it within file n ...

phphtml

Is it possible to conceal my Sticky Div in MUI5 once I've scrolled to the bottom of the parent div?

Sample link to see the demonstration: https://stackblitz.com/edit/react-5xt9r5?file=demo.tsx I am looking for a way to conceal a fixed div once I reach the bottom of its parent container while scrolling down. Below is a snippet illustrating how I struct ...

javascriptcssreactjstypescriptmaterial-ui

"Experiencing technical difficulties: Website not functioning properly on

I recently created this website. While it functions perfectly on desktop computers, I am encountering issues when trying to access it on mobile or tablet devices. My instinct tells me that the problem may be related to a large css animation on the homepa ...

htmlcssanimationmobilecrash

Tips for keeping a reading item in place while scrolling

To enhance the user experience, I would like to improve readability without affecting the scroll position. Question: Is there a way to fix the scrolling item at a specific position (item with the .active class)? I am looking to maintain a consistent read ...

javascriptjqueryhtml

Implementing CSS counter-increment with jQuery

Is there a way to use jQuery to set the CSS counter-increment attribute on ".demo:before" even though jQuery cannot access pseudo elements directly? I recall seeing a suggestion on Stack Overflow about using a data attribute and then referencing that value ...

javascriptjquerycsscountercss-counter