CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Icemanind
Icemanind

Reputation: 48736

Bootstrap: wrapping text

I have the following bootstrap code:

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-2 col-md-2 col-sm-2">
      <div style="width: 75px; background-color: #ccc">
        <img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
      </div>
    </div>
    <div class="col-xs-10 col-md-10 col-sm-10" style="">
      Right content
    </div>
  </div>
</div>

On tablets and desktops, this code looks good. However, on smaller devices, xs, the right content flows into the image. I am trying to make the text just wrap on the right and not collide with the image.

I have a fiddle here so you can see what I'm talking about. If you open the fiddle and resize the browser small enough, you'll see the right text overlap onto the image. How can I prevent this?

Upvotes: 0

Views: 5182

Answers (4)

XYZ
XYZ

Reputation: 4480

It is becaue of the width of the col-xs-2.You can chage that.Or try an alternative solution like this 

<div class="container-fluid">
  <div class="row">
 <div class="col-xs-12">
    <div style="width: 75px; background-color: #ccc;display:table-cell;">
         <img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
    </div>
     <div class=" " style="display:table-cell;vertical-align:middle;">
        Right content
    </div>
</div></div></div>

Or with css flexboxes like 

<div class="container-fluid">
    <div class="row">
     <div class="col-xs-12" style="display:flex">
    <div style="width: 75px; background-color: #ccc;flex:1;">
         <img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
    </div>
     <div class=" " style="flex:1;vertical-align:middle;">
        Right content
     </div></div></div></div>

Upvotes: 0

Townim Faisal
Townim Faisal

Reputation: 325

Try this. 

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-3 col-md-2 col-sm-2">
      <div style="width: 75px; background-color: #ccc">
        <img class="img-responsive" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
      </div>
    </div>
    <div class="col-xs-9 col-md-10 col-sm-10" style="">
      Right content
    </div>
  </div>
</div>

Upvotes: 1

Jhecht
Jhecht

Reputation: 4435

Easiest way I know is to apply a direct width to element. You could theoretically alter the bootstrap 3 SCSS or LESS (whichever you use) and add in a special column class, but this is the most direct method.

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div style="width:75px" class="col-xs-2">
      <div style="width: 75px; background-color: #ccc">
        <img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
      </div>
    </div>
    <div class="col-xs-10 col-md-10 col-sm-10" style="">
      Right content
    </div>
  </div>
</div>

Upvotes: 0

Nirmal Krishna
Nirmal Krishna

Reputation: 53

It is because of the width set. Try this.

JSFiddle

HTML

   <div class="container-fluid">
      <div class="row">
        <div class="col-xs-2 col-md-2 col-sm-2">
          <div style="background-color: #ccc">
            <img class="test-image" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
          </div>
        </div>
        <div class="col-xs-10 col-md-10 col-sm-10" style="">
          Right content
        </div>
      </div>
    </div>

CSS

.test-image{
  width:100%;
  height:auto;
  min-width:25px;
}

Upvotes: 0

Related Questions