Bootstrap:columns stacking horizontally

Question

I am using 3 columns inside a nested row. instead of stacking horizontally columns are stacking vertically. this is my code. i have tried stackoverflow answers but not working.

  <div class="jumbotron mainBar">
      <div class="container mainBarContainer">
          <div class="row">
              <div class="col-xs-2">
                 <div class=" profilePic">
                  <a href="#section_1"><h2>1<small>st</small><p>Title</p></h2></a>
                 </div>

                </div>
              <div class="col-xs-4">
                 <h1>Hello, world!</h1>

              </div>
              <div class="col-xs-6 container">
                <div class="row">
                 <div clas="col-xs-4">
                  <div class=" profilePic1">
                   <a href="#section_1"><h2>1<small>st</small><p>Title</p></h2></a>
                  </div>
                 </div>
                 <div clas="col-xs-4">
                  <div class=" profilePic1">
                   <a href="#section_1"><h2>1<small>st</small><p>Title</p></h2></a>
                  </div>
                 </div>
                 <div clas="col-xs-4">
                  <div class=" profilePic1">
                   <a href="#section_1"><h2>1<small>st</small><p>Title</p></h2></a>
                  </div>
                 </div>
                </div>

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

and here is the fiddle fiidle

Answer 1

You have a spieling mistake. Change the clas to class which is inside second container.

The demo