I have a nested row with 3 columns that are stacking vertically instead of horizontally. I've tried solutions from other sources like stackoverflow but none seem to be 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>;
Check it out on fiddle: fiidle