CODEWITHSUNDEEP
htmlcss
HappyUser
HappyUser

Reputation: 309

Space between vertical divs and alignment

I have some problems with div spacing. Here is the html:

            <div class="row">
              <div class="col-lg-4">
                <div class="checkbox checkbox-circle checkbox-business">
                    <input id="checkbox-business-id" class="styled" type="checkbox">
                    <label for="checkbox-business-id">BUSINESS</label>
                </div>
                <div class="checkbox checkbox-circle checkbox-health">
                    <input id="checkbox-health-id" class="styled" type="checkbox">
                    <label for="checkbox-health-id">HEALTH</label>
                </div>
                <div class="checkbox checkbox-circle checkbox-science">
                    <input id="checkbox-science-id" class="styled" type="checkbox">
                    <label for="checkbox-science-id">SCIENCE</label>
                </div>
                <div class="checkbox checkbox-circle checkbox-technology">
                    <input id="checkbox-technology-id" class="styled" type="checkbox">
                    <label for="checkbox-technology-id">TECHNOLOGY</label>
                </div>
            </div>
           </div>

and CSS:

.checkbox-business {
   margin-top: 10px;
 }

.checkbox-health {
  margin-top: 10px;
}

.checkbox-science {
  margin-top: 10px;
}

.checkbox-technology {
  margin-top: 10px;
}

enter image description here

I want to let some space between divs and I want all the checkboxes to be aligned.I am not able to do this. Also, I am using bootstrap.

Could someone take a look at it ?

Fiddle: https://jsfiddle.net/paul28/do5efo1w/2/

Upvotes: 0

Views: 268

Answers (2)

Nandita Sharma
Nandita Sharma

Reputation: 13407

Add the following styles. This should do what you want

header.masthead {
    text-align: left;
}
.checkbox {
    margin-bottom: 20px;
    height: 30px;
}

.checkbox label::before {
    width: 30px;
    height: 30px;

}
.checkbox label::after {
    padding-top: 3px;
    padding-left: 5px;
}


.checkbox input {
    width: 20px;
    height: 16px;
}
.checkbox input[type="checkbox"]:checked + label::after, .checkbox input[type="radio"]:checked + label::after {
    font-family: "FontAwesome";
    content: "\f00c";
    font-size: 18px;
        padding: 1px 5px;
}
.checkbox label {
    padding-left: 20px;
    line-height: 30px;
}

Check updated code here

Upvotes: 2

PDSSandeep
PDSSandeep

Reputation: 189

This Will help you 

.checkbox {
    text-align: left;
    margin-bottom: 20px;
}

Upvotes: 0

Related Questions