The column with a class of col-md-3 is not rendering properly

The design shown below was created in photoshop utilizing a 12 grid system: https://i.sstatic.net/MSGHc.jpg

I am attempting to replicate this layout using bootstrap with class='col-md-3' for each input. However, when I do this, they appear next to each other. When I try to add a margin, only 3 divs are displayed per row instead of all four. Am I missing something here? I thought bootstrap automatically added margins for columns.

<div class="songs col-md-3"><input type="checkbox" name="chk_spirit" value="Bleeding Love">Bleeding Love</div>
<div class="songs col-md-3"><input type="checkbox" name="chk_spirit" value="Better in Time">Better in Time</div>
<div class="songs col-md-3"><input type="checkbox" name="chk_spirit" value="Angel">Angel</div>
<div class="songs col-md-3"><input type="checkbox" name="chk_spirit" value="I Will Be">I Will Be</div>
htmlcsstwitter-bootstrap

Answer №1

If you want to style your checkboxes and radios inline, you can refer to Bootstrap's documentation on Inline checkboxes and radios and include an additional class within your columns for custom styling.

.songs {
  background: #eee;
  padding: 20px;
  margin: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-sm-3">
      <div class="songs">
        <label class="checkbox-inline">
          <input type="checkbox" id="inlineCheckbox1" name="chk_spirit" value="Bleeding Love">Bleeding Love</label>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="songs">
        <label class="checkbox-inline">
          <input type="checkbox" id="inlineCheckbox2" name="chk_spirit" value="Better in Time">Better in Time</label>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="songs">
        <label class="checkbox-inline">
          <input type="checkbox" id="inlineCheckbox3" name="chk_spirit" value="Angel">Angel</label>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="songs">
        <label class="checkbox-inline">
          <input type="checkbox" id="inlineCheckbox4" name="chk_spirit" value="The First Time Ever I saw Your Face">The First Time Ever I saw Your Face</label>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-3">
      <div class="songs">
        <label class="checkbox-inline">
          <input type="checkbox" id="inlineCheckbox5" name="chk_spirit" value="Whatever it Takes">Whatever it Takes</label>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="songs">
        <label class="checkbox-inline">
          <input type="checkbox" id="inlineCheckbox6" name="chk_spirit" value="The Best You never Had">The Best You never Had</label>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="songs">
        <label class="checkbox-inline">
          <input type="checkbox" id="inlineCheckbox7" name="chk_spirit" value="I Will Be">I Will Be</label>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="songs">
        <label class="checkbox-inline">
          <input type="checkbox" id="inlineCheckbox8" name="chk_spirit" value="Homeless">Homeless</label>
      </div>
    </div>
  </div>
</div>

Answer №2

The Bootstrap framework includes a convenient 'row' class for defining rows in your layout. This class automatically applies margin to the columns within it.

Here is the CSS code used by Bootstrap for the 'row' class:

.row {
    margin-right: -15px;
    margin-left: -15px;
}

To create rows with columns, simply wrap them inside a 'row' div like this:

<div class="row">
        <div class="songs col-md-3"><input type="checkbox" name="chk_spirit" value="Bleeding Love">Bleeding Love</div>
        <div class="songs col-md-3"><input type="checkbox" name="chk_spirit" value="Better in Time">Better in Time</div>
        <div class="songs col-md-3"><input type="checkbox" name="chk_spirit" value="Angel">Angel</div>
        <div class="songs col-md-3"><input type="checkbox" name="chk_spirit" value="I Will Be">I Will Be</div>
    </div>

If you notice that not all columns fit within the row due to excessive margins, you may need to adjust the margin values or review how containers work in Bootstrap.

I wanted to leave a comment, but I do not yet have enough reputation points to do so!

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

Is there a way to confine a jquery script within the dimensions of the container div?

I have recently created a gallery with navigation buttons in jQuery. As a newcomer to jQuery, I wrote a small script that adjusts the margin of a div container by a fixed amount. The script is functioning properly, but it extends beyond the top and bottom ...

javascriptjqueryhtmlcss

What is the best way to change the orientation of a scanner loop animation to

Currently, I have a CSS style featuring an animation that scans across a line in a loop. My goal is to apply this animation to a horizontal line, but I am struggling to figure out how to rotate the scanner for a horizontal loop. Below is my current code. A ...

htmlcss

Tips for resizing user-uploaded images to fit the required dimensions outlined in the design draft using CSS or JavaScript

Hey everyone! I'm facing an issue but my English isn't great. I'll do my best to explain it thoroughly, and if anything is unclear, please feel free to let me know! So here's the problem: today there's a block for users to upload p ...

javascriptcss

Tips for creating a dynamic div height that adjusts based on its content in percentage

Having trouble with 100% height sections that don't expand with the content? I've tried using height: auto; min-height: 100%; without success. Check out this FIDDLE for more information. ...

htmlcssresponsive-designheightfullscreen

Tips for properly formatting large numbers

I am facing a challenge with handling large numbers in my JavaScript code. I came across the nFormatter function for formatting large numbers but I am unsure how to integrate it into my existing code. Below is the nFormatter function that I found: functi ...

javascripthtmlnumber-formatting

Using jQuery, is it possible to retrieve the product name and image dynamically?

I'm currently working on implementing an add to cart functionality using jQuery. When the add to cart button is clicked, the product name and image should be displayed. I can achieve this statically but I need help figuring out how to dynamically retr ...

javascriptjqueryhtml

The input field cannot accommodate the lengthy value in the Mat Select option

When a user selects a value in my mat select, it doesn't display well in the selection box. The text wraps when the selection is opened, but once a choice is made, it gets cut off without proper spacing between the ellipses and the dropdown arrow. Th ...

htmlcssangulartypescript

Adjusting the height of the Owl Carousel div to enhance image hover effects

Seeking help with implementing a hover effect on an img within an Owl Carousel div. I have applied a simple CSS transition to the Owl Carousel container div, but the Carousel is automatically setting a standard height. Images included for reference. I have ...

htmlcsstwitter-bootstrapowl-carousel-2

Guide on restricting the character count and displaying the leftover characters using PHP with Ajax

I've been working on implementing a feature to display the remaining characters in a PHP AJAX call. I was successful using JavaScript, but I'm having trouble doing it with AJAX in PHP. Can someone provide assistance? <script type="text/javasc ...

javascriptphphtmlajax

Display an image when the iframe viewport is reduced in size by utilizing media queries

I am looking to showcase a demo.html page within a 400px square iframe. When the viewport is smaller than 400px, I want demo.html to only display an image. Then, when clicking on that image in demo.html, the same page should switch to fullscreen mode. Sim ...

javascripthtmlcss

Adjust css rotation to direct an element towards a specific point

Looking to rotate a div towards a point using the CSS 3 transform rotate function. Progress so far: View code on JSFiddle $(document).ready(function(){ var scw,sch,scx,scy; calcCenter(); $(window).resize(function() { calcCent ...

jquerycsscss-transforms

What is the best approach to managing undefined properties retrieved from the html in my Angular application prior to obtaining data from my controller?

Every time my Angular component HTML renders, I encounter numerous errors that all look similar to this ERROR TypeError: Cannot read properties of undefined (reading 'someProperty') Throughout my HTML page, there are many bindings that follow ...

javascripthtmlangularangular-templateangular-template-form

Neighbor wrapping causing Flex to shrink

Is there a way to make the element shrink when the flex container below grows due to flex-wrapping? Currently, the new space is created below the container instead of shrinking the one above. The flex-grow and flex-shrink properties do not seem to work as ...

htmlcssflexbox

Is it possible to create floating unordered lists using Bootstrap in HTML?

Is there a way to float text left or maintain list order in the HTML code of my page while using a dense CSS from this bootstrap template? For example, I would like my list to remain organized regardless of how many items are added: https://i.sstatic.net ...

javascripthtmltwitter-bootstrap

When a React CSS class is deployed to a production server, it may be automatically

I've encountered a strange CSS issue while working on my React project. One specific section of the JSX <div> has a class with style properties defined in the main .css file. During local development, everything appears as expected. However, aft ...

javascripthtmlcssreactjsmaterial-ui

Can CSS masking work on all web browsers?

Is there a method to apply masks in CSS that function properly in Firefox? I've searched extensively, but it must be doable. I came across a code snippet using mask: ('mask.svg#mask'); but unfortunately, it's not effective! ...

htmlcssmask

Input automatically establishes default values

Something strange is happening with my HTML form. When I view it on a browser, default values are appearing in the text and password inputs that I did not set. The text input shows "creator" and the password input shows "*****". This only occurs when I set ...

htmlajax

Leveraging clojurescript for displaying a Three.js scene on an HTML webpage

I'm currently working on incorporating the example for creating a scene in three.js using clojurescript. My aim is to display the static scene (which consists of a green block) without any animation. The issue seems to be with the function responsib ...

htmlthree.jsclojurescript

The addition operation in JavaScript seems to be malfunctioning as it is not adding up my values

After encountering an issue with calculating the number of payments, I discovered that the addition operator was not functioning as expected. Instead of summing up values, it was treating them as strings. For instance, when trying to add 3 and 5, the out ...

javascripthtml

"Utilizing a custom CSS style for a half heart rating system

I am currently working on implementing a rating system using the font-awesome fa-heart class. While I have successfully colored the full heart, I am facing difficulty in filling only the first half of the heart in red. Despite my research efforts, all solu ...

htmlcss