Aligning bootstrap panels next to each other

Question

I am having some issues getting aligning some bootstrap panels next to each other. No matter what HTML I add to it they always end up being under one another. How can I have them next to each other? I'm going to have a lot on the page.

My code:

<section class="bg-grey-50 padding-top-60 padding-top-sm-30">
            <div class="container">
                <div class="row">
                    <div class="col-md-3 col-sm-4 hidden-xs">
                        <div class="widget">
                            <div class="panel panel-default">
                                <div class="panel-heading">Information</div>
                                <div class="panel-body">

                                    <ul class="panel-list margin-top-1">
                                        <li><i class="glyphicon glyphicon-pencil"></i>Info1</li>
                                        <li><i class="fa fa-graduation-cap"></i>Info1</li>
                                        <li><i class="fa fa-warning"></i>Info1</li>
                                </div>
                            </div>
                        </div>
                        <div class="widget">
                            <div class="panel panel-default">
                                <div class="panel-heading">Information</div>
                                <div class="panel-body">

                                    <ul class="panel-list margin-top-1">
                                        <li><i class="glyphicon glyphicon-pencil"></i>Info2</li>
                                        <li><i class="fa fa-graduation-cap"></i>Info2</li>
                                        <li><i class="fa fa-warning"></i>Info2</li>
                                </div>
                            </div>
                        </div>





                    </div>


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

Answer 1

you can try with this below code it may help you.

.widget{
  float : left;
  margin-left : 10px;
  margin-top : 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<section class="bg-grey-50 padding-top-60 padding-top-sm-30">
  <div class="container">
    <div class="row">
      <div class="col-md-12 col-sm-12 hidden-xs">
        <div class="widget">
          <div class="panel panel-default">
            <div class="panel-heading">Information</div>
            <div class="panel-body">
              <ul class="panel-list margin-top-1">
                <li><i class="glyphicon glyphicon-pencil"></i>Info1</li>
                <li><i class="fa fa-graduation-cap"></i>Info1</li>
                <li><i class="fa fa-warning"></i>Info1</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="widget">
          <div class="panel panel-default">
            <div class="panel-heading">Information</div>
            <div class="panel-body">
              <ul class="panel-list margin-top-1">
                <li><i class="glyphicon glyphicon-pencil"></i>Info1</li>
                <li><i class="fa fa-graduation-cap"></i>Info1</li>
                <li><i class="fa fa-warning"></i>Info1</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="widget">
          <div class="panel panel-default">
            <div class="panel-heading">Information</div>
            <div class="panel-body">
              <ul class="panel-list margin-top-1">
                <li><i class="glyphicon glyphicon-pencil"></i>Info1</li>
                <li><i class="fa fa-graduation-cap"></i>Info1</li>
                <li><i class="fa fa-warning"></i>Info1</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 2

Cant you just wrap your widget in another col-md-3 col-sm-4 hidden-xs? This allows for 4 panels to be placed side by side on md size and 3 on sm

Codepen http://codepen.io/noobskie/pen/rezaaG

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<section class="bg-grey-50 padding-top-60 padding-top-sm-30">
  <div class="container">
    <div class="row">
      <div class="col-md-3 col-sm-4 hidden-xs">
        <div class="widget">
          <div class="panel panel-default">
            <div class="panel-heading">Information</div>
            <div class="panel-body">
              <ul class="panel-list margin-top-1">
                <li><i class="glyphicon glyphicon-pencil"></i>Info1</li>
                <li><i class="fa fa-graduation-cap"></i>Info1</li>
                <li><i class="fa fa-warning"></i>Info1</li>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-4 hidden-xs">
        <div class="widget">
          <div class="panel panel-default">
            <div class="panel-heading">Information</div>
            <div class="panel-body">
              <ul class="panel-list margin-top-1">
                <li><i class="glyphicon glyphicon-pencil"></i>Info2</li>
                <li><i class="fa fa-graduation-cap"></i>Info2</li>
                <li><i class="fa fa-warning"></i>Info2</li>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>