CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
plywoods
plywoods

Reputation: 257

How to place two div's inside bootsrap columns?

I am tying to place two divs inside a column. However, when I add margins or float property it doesn't help.

<div class="col-xs-1">
            <div class="main-checkbox">
                <input type="checkbox" /></div>
            <div class="arrow-down"></div>
        </div>

.arrow-down {
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid black;
float: right;
margin-top:5px;}

.main-checkbox {
width:13px;
margin-left:10px;}

I need to get a checkbox and a little triangle next to it. enter image description here

Upvotes: 1

Views: 49

Answers (2)

Wilf
Wilf

Reputation: 2315

Let's see if it's work. Just add pull-left which is already existed in bootstrap css. It acts like float:left. So you don't need to write any stylesheet anymore.

<div class="col-xs-1">
 <div class="main-checkbox pull-left">
 <input type="checkbox" /></div>
 <div class="arrow-down pull-left"></div>
</div>

Upvotes: 3

Think Different
Think Different

Reputation: 2815

Add display:inline-block; to it like:

.arrow-down {
   width: 0;
   height: 0;
   border-left: 7px solid transparent;
   border-right: 7px solid transparent;
   border-top: 7px solid black;
  margin-top:5px;
   display: inline-block;
}
.main-checkbox {
   width:13px;
   margin-left:10px;
   display: inline-block;
}

SEE FIDDLE

Upvotes: 2

Related Questions