Creating a multi-column layout for list items using Bootstrap. Unusual behavior observed (see demo in JSBIN

I am struggling to display items in multiple columns without any strange formatting issues. Can someone help me out?

Check out the JSBin for reference:

http://jsbin.com/huzurejunu/1/edit?html,css,output

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

<div class="row">
  <div class="col-xs-12">
    <div class="well">
      <strong>Checkbox list:</strong>
      <div class="row checklist">
        <div class="checkbox col-xs-6 col-sm-4 col-md-3 col-lg-2">
          <label style="white-space: nowrap;"><input type="checkbox">Check box 1</label>
        </div>
        more checkboxes....
  </div>
</div>

csstwitter-bootstrap-3

Answer №1

To override bootstrap and other CSS styles, you need to add the following custom CSS:

.checklist .checkbox {
    position: relative;
    display: block;
    margin-top: 5px;
    margin-bottom: 5px;
}
.checklist .checkbox+.checkbox {
    margin-top: 5px;
    margin-bottom: 5px;
}


.checkbox {
  color: red;
}

.well {
    min-width: 250px;
}
.checklist .checkbox {
    position: relative;
    display: block;
    margin-top: 5px;
    margin-bottom: 5px;
}
.checklist .checkbox+.checkbox {
    margin-top: 5px;
    margin-bottom: 5px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="row">
  <div class="col-xs-12">
    <div class="well">
      <strong>Checkbox list:</strong>
      <div class="row checklist">
        <div class="checkbox col-xs-6 col-sm-4 col-md-3 col-lg-2">
          <label style="white-space: nowrap;"><input type="checkbox">Check box 1</label>
        </div>
        <div class="checkbox col-xs-6 col-sm-4 col-md-3 col-lg-2">
          <label style="white-space: nowrap;"><input type="checkbox">Check box 1</label>
        </div>
        <div class="checkbox col-xs-6 col-sm-4 col-md-3 col-lg-2">
          <label style="white-space: nowrap;"><input type="checkbox">Check box 1</label>
        </div>
        <div class="checkbox col-xs-6 col-sm-4 col-md-3 col-lg-2">
          <label style="white-space: nowrap;"><input type="checkbox">Check box 1</label>
        </div>
        <div class="checkbox col-xs-6 col-sm-4 col-md-3 col-lg-2">
          <label style="white-space: nowrap;"><input type="checkbox">Check box 1</label>
        </div>
        <div class="checkbox col-xs-6 col-sm-4 col-md-3 col-lg-2">
          <label style="white-space: nowrap;"><input type="checkbox">Check box 1</label>
        </div>
        <div class="checkbox col-xs-6 col-sm-4 col-md-3 col-lg-2">
          <label style="white-space: nowrap;"><input type="checkbox">Check box 1</label>
        </div>
        <div class="checkbox col-xs-6 col-sm-4 col-md-3 col-lg-2">
          <label style="white-space: nowrap;"><input type="checkbox">Check box 1</label>
        </div>
        <div class="checkbox col-xs-6 col-sm-4 col-md-3 col-lg-2">
          <label style="white-space: nowrap;"><input type="checkbox">Check box 1</label>
        </div>
        <div class="checkbox col-xs-6 col-sm-4 col-md-3 col-lg-2">
          <label style="white-space: nowrap;"><input type="checkbox">Check box 1</label>
        </div>
        <div class="checkbox col-xs-6 col-sm-4 col-md-3 col-lg-2">
          <label style="white-space: nowrap;"><input type="checkbox">Check box 1</label>
        </div>
        
      </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

Adding custom styles to an unidentified child element in React using Material-UI

When the function below is executed in a loop, I need to include styles for the icon which will be passed as an argument to the function. The icon element will be an unspecified React Material-UI Icon component. const renderStyledCard = (lightMode, headi ...

javascripthtmlcssreactjsmaterial-ui

Vanished were the empty voids within our

It seems that the spaces between words have mysteriously vanished in a font I am currently using. Take a look at this website: I am utilizing a slightly modified Twitter Bootstrap with Google Web fonts, and the font causing the issue is Oswald from Googl ...

csstwitter-bootstrapgoogle-webfontsletter-spacing

Design and styling with HTML5 and CSS

Having a small issue with my code as I venture back into coding after a long hiatus, resulting in me forgetting some basics. Currently, I am attempting to create a simple HTML layout. Upon inspecting the page, I noticed that it appears slightly longer tha ...

htmlcss

The compatibility issue between Jquery highlight and show more/less function is causing them to malfunction when used

I am facing an issue where, while trying to search for a specific word to highlight it, the "show more" button closes and only displays the text prior to clicking the button. How can I ensure that the expanded content remains open while searching for a wor ...

htmljquerycssbootstrap-4

Tips for arranging divs in the exact way you want

Can you assist me in creating a layout like the one shown in the image below? I have attempted to achieve it, but my understanding of CSS is lacking and the layout needs to be completed quickly... I experimented with CSS properties such as float, overflow ...

csshtml

Tell me about the CSS ruby-align characteristic

While browsing online, I stumbled upon a reference to the ruby-align property that piqued my interest. After searching on w3schools for some examples, I was surprised to find no mention of it anywhere. I remembered that Ruby is a newer tag in HTML5 and de ...

htmlcss

In what way can a programmer create HTML tailored to a designer's needs, even without a comprehensive grasp of

Currently, I am diving into my most ambitious website project yet. It's worth mentioning that I'm utilizing ASP.NET MVC 2 and the Microsoft stack. I value design and aesthetics greatly, knowing they can make or break the success of this endeavor ...

htmlcss

Is there a way to keep my fixed footer container from moving while zooming in and out on a webpage

Is there a way to prevent the bottom text from shifting when zoomed in or out on the page? The rest of the content remains stable, but due to using position:absolute for this section to stay at the bottom of another div (content), it causes movement. #con ...

htmlcsslayoutpositioningabsolute

Display the navigation controls in the CSS Bootstrap Carousel only when hovering over the control section, rather than when hovering over the entire carousel

My carousel displays full page images, but I want the controllers to only appear when the mouse hovers over the specific area they are in, rather than appearing when the mouse is anywhere on the page. .carousel .carousel-control { visibility: hidden; ...

csstwitter-bootstrap

The container is not adjusting to the screen size correctly and the flex-direction: row is not functioning as

Struggling with setting up a basic layout in Angular for my application. While I have experience with Angular, the actual HTML/CSS design is new to me. No matter what I try, I can't seem to get this container to take up the whole screen width. Variou ...

htmlcssangularflexbox

How can I ensure my custom CSS stylesheet takes precedence over Inline CSS when working with Bootstrap?

Looking to enhance the visual appeal of my website by incorporating CSS properties for background changes. Take a peek at my code: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta ...

htmlcssbootstrap-5

I am experiencing issues with the functionality of the Search Button in my code

I am experiencing an issue with the Search Button in my Search Form. I created the Search form using only html and pure CSS to test whether JS is necessary for a Search form with Drop Down Filter! Do I need to incorporate some JS code or is it feasible to ...

htmlcss

Display a list group in two columns using Bootstrap 4's grid system

Is there a way to create a list-group with 2 columns using bootstrap 4? <div class="categories"> <h4>Categories</h4> <ul class="list-group"> <li class="list-group-item active">Name 1</li> <li clas ...

htmlcssbootstrap-4

Creating two columns with separate scrollbars in Responsive Bootstrap is a useful feature for organizing content in a visually

Is there a way to create 2 columns with scrollbars using Bootstrap when a button is clicked? Here's what I'm trying to achieve: My webpage consists of a row-fluid div that contains the main-column div with main-content and extra-content. There&a ...

jquerycsstwitter-bootstrapresponsive-designsass

Having issues with my toggler functionality. I attempted to place the JavaScript CDN both at the top and bottom of the code, but unfortunately, it is still not

I recently attempted to place the JavaScript CDN at the top of my code, but unfortunately, it did not have the desired effect. My intention was to make the navigation bar on my website responsive and I utilized a toggler in the process. While the navbar di ...

javascripthtmlcssbootstrap-5

Align anchor tag text in the center vertically after adjusting its height using CSS

I'm having trouble vertically aligning the text within an anchor tag that has a height and background color set. The goal is to have equal amounts of space above and below the text, but currently all the extra height is being added below the text. I&a ...

htmlcss

Transition the background image color smoothly from left to right in a seamless and continuous movement

A switch button located in the top right corner can toggle between light and dark modes. The background features a zoomed-in image. Currently, the transition is as follows: From left to right when switched to dark mode From right to left when switched to ...

javascripthtmlcssreactjs

Positioning a button at the center-right

I'm currently in the process of creating a coming soon website, which you can find hosted here. However, I am having some trouble aligning the button correctly. My goal is to have it positioned to the right of the text field. How can I achieve this? ...

htmlcss

Issues with Bootstrap Carousel Slide Show functionality in FireFox

I have implemented a Bootstrap-5 Carousel Slide Show for the website banner. It is functioning correctly in Google Chrome, but there seems to be an issue when viewed in Firefox. The Firefox browser version I am using is 90.0.2 (64-bit). Upon inspecting the ...

htmlcssbootstrap-5

Change element position to relative while scrolling

I created a wrapper with an animation similar to the one on Apple's Airpods Pro page. It features a video that plays gradually as I scroll, with the text smoothly scrolling over it within a specific area (text-display). So far, this part is working w ...

javascriptjqueryhtmlcss