title: Bootstrap Button Resizing
body: <p>So I'm currently working on a webpage using Bootstrap 3, and I have 2 columns to the left of a carousel of images, and when I have the page open in full screen on my 15 inch laptop it all looks totally fine, however the moment I start resizing the window the columns and carousel begin to overlap. While the carousel is resizing along with the window, the buttons on the left-hand side do not change size and simply crowd up the canvas. Is there any way to get these buttons to dynamically change size so that the whole window looks as it does in full screen? </p>
  
  <p>Here is the site in full screen: <a href="https://imgur.com/a/iU0uw" rel="nofollow noreferrer">https://imgur.com/a/iU0uw</a></p>
  
  <p>Here is the site in a smaller size: <a href="https://imgur.com/a/RcjPg" rel="nofollow noreferrer">https://imgur.com/a/RcjPg</a></p>
  
  <p>Here is my code at the moment:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;BookSwap Browse&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;style&gt;
      /* Remove the navbar's default margin-bottom and rounded borders */
      .navbar {
        margin-bottom: 0;
        border-radius: 0;
      }
      /* Add a gray background color and some padding to the footer */
      footer {
        background-color: #f2f2f2;
        padding: 25px;
      }
  
    .carousel-inner img {
        margin: auto;
        min-height:200px;
    }
    .carousel {
      width: 100%;
    }
  
    /* Hide the carousel text when the screen is less than 600 pixels wide */
    @media (max-width: 600px) {
      .carousel-caption {
        display: none;
      }
    }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;nav class="navbar navbar-inverse"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;                        
        &lt;/button&gt;
        &lt;a class="navbar-brand" href="#"&gt;Logo&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="collapse navbar-collapse" id="myNavbar"&gt;
        &lt;ul class="nav navbar-nav"&gt;
          &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Projects&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;ul class="nav navbar-nav navbar-right"&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-log-in"&gt;&lt;/span&gt; Login&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  
  
  &lt;div class="row"&gt;
    &lt;div class="col-sm-1"&gt;
  &lt;div class="btn-group-vertical" data-toggle="buttons"&gt;
        &lt;h3&gt;Filter Choices&lt;/h3&gt;
        &lt;label class="btn btn-info"&gt;
          &lt;input type="checkbox" checked autocomplete="off"&gt; Fantasy
        &lt;/label&gt;
        &lt;label class="btn btn-info"&gt;
          &lt;input type="checkbox" checked autocomplete="off"&gt; Science Fiction
        &lt;/label&gt;
        &lt;label class="btn btn-info"&gt;
          &lt;input type="checkbox" checked autocomplete="off"&gt; Fiction
        &lt;/label&gt;
        &lt;label class="btn btn-info"&gt;
          &lt;input type="checkbox" checked autocomplete="off"&gt; Young Adult
        &lt;/label&gt;
        &lt;label class="btn btn-info"&gt;
          &lt;input type="checkbox" checked autocomplete="off"&gt; Nonfiction
        &lt;/label&gt;
        &lt;label class="btn btn-info"&gt;
          &lt;input type="checkbox" checked autocomplete="off"&gt; Horror
        &lt;/label&gt;
        &lt;label class="btn btn-info"&gt;
          &lt;input type="checkbox" checked autocomplete="off"&gt; Satire
        &lt;/label&gt;
        &lt;label class="btn btn-info"&gt;
          &lt;input type="checkbox" checked autocomplete="off"&gt; Mystery
        &lt;/label&gt;
        &lt;label class="btn btn-info"&gt;
          &lt;input type="checkbox" checked autocomplete="off"&gt; Romance
        &lt;/label&gt;
        &lt;label class="btn btn-info"&gt;
          &lt;input type="checkbox" checked autocomplete="off"&gt; Cookbooks
        &lt;/label&gt;
        &lt;label class="btn btn-info"&gt;
          &lt;input type="checkbox" checked autocomplete="off"&gt; Self-Help
        &lt;/label&gt;
        &lt;label class="btn btn-info"&gt;
          &lt;input type="checkbox" checked autocomplete="off"&gt; Religion &amp;amp; Spirituality
        &lt;/label&gt;
        &lt;label class="btn btn-info"&gt;
          &lt;input type="checkbox" checked autocomplete="off"&gt; Poetry
        &lt;/label&gt;
        &lt;label class="btn btn-info"&gt;
          &lt;input type="checkbox" checked autocomplete="off"&gt; Biography
        &lt;/label&gt;
        &lt;label class="btn btn-info"&gt;
          &lt;input type="checkbox" checked autocomplete="off"&gt; Historical Fiction
        &lt;/label&gt;
        &lt;label class="btn btn-info"&gt;
          &lt;input type="checkbox" checked autocomplete="off"&gt; Guide
        &lt;/label&gt;
        &lt;label class="btn btn-info"&gt;
          &lt;input type="checkbox" checked autocomplete="off"&gt; Comics
        &lt;/label&gt;
        &lt;label class="btn btn-info"&gt;
          &lt;input type="checkbox" checked autocomplete="off"&gt; Comedy
        &lt;/label&gt;
        &lt;label class="btn btn-info"&gt;
          &lt;input type="checkbox" checked autocomplete="off"&gt; Fan Fiction lol
        &lt;/label&gt;
        &lt;label class="btn btn-info"&gt;
          &lt;input type="checkbox" checked autocomplete="off"&gt; Manga
        &lt;/label&gt;
        &lt;label class="btn btn-info"&gt;
          &lt;input type="checkbox" checked autocomplete="off"&gt; idk what
        &lt;/label&gt;
        &lt;label class="btn btn-info"&gt;
          &lt;input type="checkbox" checked autocomplete="off"&gt; other genres
        &lt;/label&gt;
        &lt;label class="btn btn-info"&gt;
          &lt;input type="checkbox" checked autocomplete="off"&gt; are there
        &lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="col-sm-1 btn-group-vertical"&gt;
      &lt;h3&gt;Owner Info&lt;/h3&gt;
      &lt;img src="https://i.imgur.com/kDvRIjR.png" style="width:100%" alt="Image"&gt;
      &lt;label class="btn btn-primary"&gt;
          Daho Inoraha
      &lt;/label&gt;
      &lt;p&gt; Location:  &lt;br&gt; UMass Amherst&lt;/p&gt;
  
      &lt;a href="https://www.google.com/maps/place/University+of+Massachusetts+Amherst/@42.3911569,-72.5289008,17z/data=!3m1!4b1!4m5!3m4!1s0x89e6d273e4f0f865:0xa0d6586089148e05!8m2!3d42.3911569!4d-72.5267121" title=""&gt;&lt;img src="https://i.imgur.com/KokzlKU.png" class="img-responsive"&gt; Google Maps&lt;/a&gt;
  
      &lt;br&gt; &lt;br&gt; &lt;br&gt; &lt;br&gt; &lt;br&gt; &lt;br&gt; &lt;br&gt; &lt;br&gt;
  
      &lt;h4&gt;Other Owners&lt;/h4&gt;
  
      &lt;label class="btn btn-primary"&gt;
          Jacob James
      &lt;/label&gt;
      &lt;label class="btn btn-primary"&gt;
          John Jeremies
      &lt;/label&gt;
      &lt;label class="btn btn-primary"&gt;
          Jack Jones
      &lt;/label&gt;
      &lt;label class="btn btn-primary"&gt;
          Jeff Jefferson
      &lt;/label&gt;
      &lt;label class="btn btn-primary"&gt;
          Jedediah Jet
      &lt;/label&gt;
      &lt;label class="btn btn-primary"&gt;
          Bob
      &lt;/label&gt;
  
    &lt;/div&gt;
  
    &lt;div class="col-sm-10"&gt;
      &lt;div class = "container-fluid"&gt;
      &lt;h3&gt; Browse Books!&lt;/h3&gt;
      &lt;div id="myCarousel" class="carousel slide"&gt;
          &lt;!-- Wrapper for slides --&gt;
      &lt;div class="carousel-inner" role="listbox"&gt;
        &lt;div class="item active"&gt;
         &lt;img src="https://i.imgur.com/Itlu1v5.jpg" style="width:35%" alt="Image"&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;h3&gt;&lt;a href="https://i.imgur.com/Itlu1v5.jpg"&gt; Marriage, a History&lt;/a&gt;&lt;/h3&gt;
            &lt;p&gt;Stephanie Coontz&lt;/p&gt;
            &lt;p&gt;(The above link will lead to a page with more info on the book and what the owner is looking for) &lt;/p&gt;
          &lt;/div&gt;      
        &lt;/div&gt;
            &lt;div class="item"&gt;
          &lt;img src="https://i.imgur.com/1D9rPU4.jpg" style="width:35%" alt="Image"&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;h3&gt;&lt;a href="https://i.imgur.com/1D9rPU4.jpg"&gt; The Complete Vegetarian Cookbook &lt;/a&gt;&lt;/h3&gt;
            &lt;p&gt;America's Test Kitchen&lt;/p&gt;
            &lt;p&gt; &lt;/p&gt;
          &lt;/div&gt;      
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Left and right controls --&gt;
      &lt;a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"&gt;
        &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
      &lt;/a&gt;
      &lt;a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"&gt;
        &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Next&lt;/span&gt;
      &lt;/a&gt;
        &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;footer class="container-fluid text-center"&gt;
    &lt;p&gt;WEB Dev Boys Mock UI 2018&lt;/p&gt;
  &lt;/footer&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I've tried messing with the columns or using @media in order to have the buttons not show up if the screen is too small but it didn't seem to fix my issues. I'm very new to bootstrap, css, and html so I'm not certain where to start with figuring out the issues here. I assume the issue is from the way I've set things up into their respective columns but that was the only way I managed to get everything in the right place (at least in full screen). </p>