CODEWITHSUNDEEP
twitter-bootstrapcssbootstrap-4
user7806384
user7806384

Reputation: 135

Bootstrap 4 keeping div's inline

I have a list item with 2 divs inside. I want the div with the checkmark to stay on the left when the screen resized. Currently when the screen is too small for both divs, they stack.

<ul>
    <li class="comment">
      <div class="likeButton d-inline-block align-top">CHECKBOX</div>

      <div class="d-inline-block">
        <div>
            <small>Username - Date</small>
        </div>
        <div class="commentContent">
            This is where the comment goes
        </div>
      </div>
    </li>   
</ul>

My initial thought was that d-inline-block or d-inline would suffice but it doesn't.

example:http://www.bootply.com/ZVPZFTKJ4A

Upvotes: 2

Views: 3894

Answers (2)

user7806384
user7806384

Reputation: 135

I ended up just making the parent div 

position:relative;

and made the checkbox div 

position: absolute;  
left:0;

and then I threw a left padding on the remaining div.

updated bootly:http://www.bootply.com/lfRCJKCMi6

Upvotes: 0

Raphael Parreira
Raphael Parreira

Reputation: 468

You just need to reduce the width, then your div will fit correctly.

<li class="comment" data-userid="{{ comment.id }}" style="width: 100%;">
      <div class="likeButton d-inline-block align-top">CHECKBOX</div>
          <div class="d-inline-block" style="width: 78%;/* float: left; */">
          <div>
              <small>Username - Date</small>
          </div>
          <div class="commentContent">asdasdasd</div>
      </div>
</li>

CSS:

.commentContent {
    white-space: normal;
    word-wrap:break-word;
    word-break: break-all;
    width: 100%
}

Upvotes: 1

Related Questions