Hi I have 3 divs inside my row class.

<div class="row">
    <div class="col-3">some content</div>
    <div class="col-9">
      <div class="col-4">
        <div class="col-12">
          <div class="col-6">conetnt</div>
          <div class="col-6">conetnt</div>
        </div>
      </div>
      <div class="col-8"> content </div>
    </div>
</div>

How can I modify this HTML so that, all the content inside floats right and auto adjust its width based on the content? Now the width is fixed, so even if the data in my 3rd div very little it still consumes loads of space. Any idea guys? bit newbie to CSS

Hi I have 3 divs inside my row class.

<div class="row">
    <div class="col-3">some content</div>
    <div class="col-9">
      <div class="col-4">
        <div class="col-12">
          <div class="col-6">conetnt</div>
          <div class="col-6">conetnt</div>
        </div>
      </div>
      <div class="col-8"> content </div>
    </div>
</div>

How can I modify this HTML so that, all the content inside floats right and auto adjust its width based on the content? Now the width is fixed, so even if the data in my 3rd div very little it still consumes loads of space. Any idea guys? bit newbie to CSS

• javascript
• html
• css
• twitter-bootstrap

Share Improve this question Follow edited Aug 25, 2017 at 5:58 PEHLAJ 10.1k1010 gold badges4343 silver badges5656 bronze badges asked Aug 25, 2017 at 5:03 blackdaemonblackdaemon 75555 gold badges2222 silver badges4444 bronze badges 7

• I want to float my entire content inside second div in to right and stick with the third div left side – blackdaemon Commented Aug 25, 2017 at 5:05
• hey why dont you use col-md-1 if you want less space – Ashish sah Commented Aug 25, 2017 at 5:06
• and if you want it should take the width as much as the content just use a div not any bootstrap class and apply float:left to the parent div – Ashish sah Commented Aug 25, 2017 at 5:08
• 1 Your code dont work because of wrong classes. You are missing the viewport prefix for bootstrap-column classes (e.g. .col-md-1): getbootstrap./docs/3.3/css/#grid – Gerrit Commented Aug 25, 2017 at 5:10
• bootstrap grid classes are used as col-md-12 not as col-12 you are using wrong classes – Ashish sah Commented Aug 25, 2017 at 5:11

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 3

Solution :

If your content is occupying space less than width of your bootstrap column. You better put it without bootstrap column classes and give it simply float:left to your content inside the simple div.

It will automatically be resized according to your content. You may need to give display:inline to your div to display that div inline.

Update : You can use flexbox. display: flex to container and can use flex-direction attribute according to your need.

Reference :

First you need to study the behavior of bootstrap grid systems. This official bootstrap documentation is all about grid system of bootstrap (Latest version).

https://getbootstrap./docs/4.0/layout/grid/

It will help you to understand content management inside bootstrap rows and columns.

You can use float: right to move content on right and try using display: table

Have a look here: https://v4-alpha.getbootstrap./layout/grid/