CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-design
Emanuel Marsicovetere
Emanuel Marsicovetere

Reputation: 33

Bootstrap break in column

I want to have a Website with 4 columns using Bootstrap. My problem now is: inside the columns the text does not break (just one line, into the next col).

This is my HTML:

<div class="row">
  <div class="col-xs-18 col-sm-3">
      <h4>First</h4>
      asdasd asda sd asd asdhbsc sbdsdbsad dchbdf hcds cd
  </div>
  <div class="col-xs-18 col-sm-3">
      <h4>Second</h4>

  </div>
  <div class="col-xs-18 col-sm-3">
      <h4>Third</h4>
  </div>
  <div class="col-xs-18 col-sm-3">
      <h4>Fourth</h4>
  </div>
</div>

How can I handle the breakpoints in the cols (I don't want to give them fixed widths)?

Upvotes: 1

Views: 3621

Answers (3)

Adarsh Gowda K R
Adarsh Gowda K R

Reputation: 951

Go to getbootstrap.com and learn more about bootstrap columns .

Bootstarp is 12 column grid layout .so there is no class called col-xs-18 in bootstrap .

Here col-xs-* is for mobile device.. Better use all four classes like below

<div class="row">
  <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
      <h4>First</h4>
      asdasd asda sd asd asdhbsc sbdsdbsad dchbdf hcds cd
  </div>
  <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
      <h4>Second</h4>

  </div>
  <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
      <h4>Third</h4>
  </div>
  <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
      <h4>Fourth</h4>
  </div>
</div>

Upvotes: 2

Bir
Bir

Reputation: 812

Bootstrap has 12 columns. So you can't write like <div class="col-xs-18 col-sm-3"> . If you need four columns, you can write it like <div class="col-xs-3 col-sm-3">. xs= extra small device, xm= small device, md= medium device, lg = large device. Suppose, you need four columns for all device then you can write <div class="col-xs-3">.

Upvotes: 0

budamivardi
budamivardi

Reputation: 760

rewrite col-xs-18 to col-xs-3

http://jsfiddle.net/apr7c4Lq/

  <div class="row">
  <div class="col-xs-3 col-sm-3">
      <h4>First</h4>
      asdasd asda sd asd asdhbsc sbdsdbsad dchbdf hcds cd
  </div>
  <div class="col-xs-3 col-sm-3">
      <h4>Second</h4>

  </div>
  <div class="col-xs-3 col-sm-3">
      <h4>Third</h4>
  </div>
  <div class="col-xs-3 col-sm-3">
      <h4>Fourth</h4>
  </div>
</div>

Upvotes: 0

Related Questions