title: Why does div without class limit width
body: <p>I am using bootstrap to style a simple form I want two buttons aligned next to each other enclosed in a div container so I can position both of them side by side together. As soon as I enclose them in a div without any sort of class associated the width is limited and one button breaks to the next line. Why is this??</p>
  
  <p>My <a href="https://jsfiddle.net/aq9Laaew/212744/" rel="nofollow noreferrer">fiddle</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
  
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  
          &lt;!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --&gt;
          &lt;!-- Leave those next 4 lines if you care about users using IE8 --&gt;
          &lt;!--[if lt IE 9]&gt;
          &lt;script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"&gt;&lt;/script&gt;
          &lt;![endif]--&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="row"&gt;
              &lt;div&gt; &lt;!-- Why does this div tag limit width? --&gt;
                  &lt;button class='col-sm-12 col-md-2'&gt;Cancel&lt;/button&gt;
                  &lt;button class='col-sm-12 col-md-2'&gt;Save&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="row"&gt;
              &lt;button class='col-sm-12 col-md-2'&gt;Cancel&lt;/button&gt;
              &lt;button class='col-sm-12 col-md-2'&gt;Save&lt;/button&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I want to enclose both buttons in a div and have them aligned next to each other. Can someone explain why a div tag would limit width?</p>