Serena Serena - 27 days ago 6
HTML Question

Change format from one column to two columns

<div class="wrapper">
<div class="container">
<div class="blocks">
<h2 style="text-align: center">Extra Information</h2>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><i class="fa fa-book fa-2x" aria-hidden="true"></i><br>Reference it for later</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><i class="fa fa-commenting-o fa-2x" aria-hidden="true"></i><br>Give Feedback</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><i class="fa fa-info fa-2x" aria-hidden="true"></i><br>Why are annotations so important?</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><i class="fa fa-magic fa-2x" aria-hidden="true"></i><br>They say Annotation websites are for genius; well this is why you are here!</div>
<br><br><br>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><i class="fa fa-exchange fa-2x" aria-hidden="true"></i><br>Interaction</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><i class="fa fa-question-circle fa-2x" aria-hidden="true"></i><br>Information</div>

</div>
</div>
</div>
</div>


It looks like Image 1
Image1

How can I make it look like image 2 but with 2 columns, because mine is all stuck with eachother:
Image2

Answer

First, you can't have more than 12 col by row, so your code is wrong.

Second, please, don't use the "I'll put every class and it'll work" as suggested by my fellow, Bootstrap work on a cascade way, you just have to set on the "until the smallest screen" you want.

If you want 2 col even in xs-, then just use the col-xs-6, no need to set the sm- / md- / lg-.

And last, I don't really understand what you want, this ?

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
  <div class="container">
    <div class="blocks">
      <h2 style="text-align: center">Extra Information</h2>
      <div class="row">
        <div class="col-xs-6"><i class="fa fa-book fa-2x" aria-hidden="true"></i><br>Reference it for later</div>
        <div class="col-xs-6"><i class="fa fa-commenting-o fa-2x" aria-hidden="true"></i><br>Give Feedback</div>
      </div>
      <div class="row">
        <div class="col-xs-6"><i class="fa fa-info fa-2x" aria-hidden="true"></i><br>Why are annotations so important?</div>
        <div class="col-xs-6"><i class="fa fa-magic fa-2x" aria-hidden="true"></i><br>They say Annotation websites are for genius; well this is why you are here!</div>
      </div>
      <div class="row">
        <div class="col-xs-6"><i class="fa fa-exchange fa-2x" aria-hidden="true"></i><br>Interaction</div>
        <div class="col-xs-6"><i class="fa  fa-2x" aria-hidden="true"></i><br></div>
      </div>
    </div>
  </div>
</div>