title: Bootstrap different container width mobile
body: <p>Is it possible with bootstrap to have a different width on mobile then on desktop? My desktop page has a full width of 80% (10% both sides) But on mobile i just want the full width. Here is an example, on desktop it looks like this: <a href="https://i.stack.imgur.com/TWIbR.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/TWIbR.jpg" alt="enter image description here"></a></p>
  
  <p>But on mobile/tablet is looks like this: <a href="https://i.stack.imgur.com/dswHQ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/dswHQ.png" alt="enter image description here"></a></p>
  
  <p>Is it possible on bootstrap to have the mobile version in full width but the desktop like it is in the picture? Here is a JSfiddle  jsfiddle.net/p9nu7r63</p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;title&gt;Servicepunt Detailhandel Groningen | Home&lt;/title&gt;
  &lt;link rel="shortcut icon" href="images/favicon/favicon.png" type="image/png"&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" href="css/style.css?&lt;?php echo date('l jS \of F Y h:i:s A'); ?&gt;"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="javascript/jquery-1.11.3.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="javascript/jssor.slider-21.1.6.mini.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="javascript/script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;body&gt;
  &lt;div class="container-fluid"&gt;
  &lt;!-- NAVIGATIE BALK --&gt;
  &lt;nav class="navbar navbar-default" role="navigation"&gt;
  &lt;!-- logo --&gt;
  &lt;div class="navbar-header"&gt;
    &lt;!--  --&gt;
    &lt;a class="navbar-brand" href="index.php"&gt;
      &lt;!-- &lt;img src="images/logo.png" alt="" style="width: 50px; height: 60px;"&gt; --&gt;
    &lt;/a&gt;
  
    &lt;!-- Inklappbaar ding als je op mobiel zit--&gt;
    &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainnavbar"&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;/div&gt;
  
  &lt;!-- menu eitems  linker kant--&gt;
  &lt;div class="collapse navbar-collapse" id="mainnavbar"&gt;
    &lt;ul class="nav navbar-nav navbar-right"&gt;
  
      &lt;li class="active"&gt;&lt;a href="index.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="paginas/Over/index.php"&gt;Over&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="paginas/Nieuws/index.php"&gt;Nieuws&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="paginas/Contact/index.php"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  
      &lt;!-- Dropdown --&gt;
      &lt;!--
      &lt;li class="dropdown"&gt;
        &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Profiel &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
          &lt;ul class="dropdown-menu"&gt;
            &lt;li&gt;&lt;a href="#"&gt;Profiel&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Instellingen&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      --&gt;
      &lt;!-- &lt;li&gt;&lt;button type="button" class="btn btn-primary btn-lg raised"&gt;Niet beschikbaar&lt;/button&gt;&lt;/li&gt; --&gt;
    &lt;/ul&gt;
  
  &lt;/div&gt;
    &lt;!-- Aan de rechterkant --&gt;
  
  
  &lt;/nav&gt;
  
  &lt;!-- EINDE NAVIAGTIE BALK--&gt;
  
  &lt;div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden; visibility: hidden;"&gt;
  &lt;!-- Loading Screen --&gt;
  &lt;div data-u="loading" style="position: absolute; top: 0px; left: 0px;"&gt;
      &lt;div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"&gt;&lt;/div&gt;
      &lt;div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden;"&gt;
      &lt;div data-p="225.00"&gt;
          &lt;img data-u="image" src="images/red.jpg" /&gt;
          &lt;div style="position: absolute; top: 30px; left: 30px; width: 1000px; height: 120px; font-size: 50px; color: #ffffff; line-height: 60px; font-family:Open Sans;"&gt;Welkom bij Servicepunt Detailhandel Groningen&lt;/div&gt;
          &lt;div style="position: absolute; top: 300px; left: 30px; width: 480px; height: 120px; font-size: 30px; color: #ffffff; line-height: 38px;"&gt;Hier kom dan allemaal tekst, een kleine samenvatting van het bedrijf&lt;/div&gt;
          &lt;!-- &lt;div data-u="caption" data-t="0" style="position: absolute; top: 120px; left: 650px; width: 470px; height: 220px;"&gt;
              &lt;img style="position: absolute; top: 0px; left: 0px; width: 470px; height: 220px;" src="img/c-phone-horizontal.png" /&gt;
              &lt;div style="position: absolute; top: 4px; left: 45px; width: 379px; height: 213px; overflow: hidden;"&gt;
                  &lt;img data-u="caption" data-t="1" style="position: absolute; top: 0px; left: 0px; width: 379px; height: 213px;" src="img/c-slide-1.jpg" /&gt;
                  &lt;img data-u="caption" data-t="2" style="position: absolute; top: 0px; left: 379px; width: 379px; height: 213px;" src="img/c-slide-3.jpg" /&gt;
              &lt;/div&gt;
              &lt;img style="position: absolute; top: 4px; left: 45px; width: 379px; height: 213px;" src="img/c-navigator-horizontal.png" /&gt;
              &lt;img data-u="caption" data-t="3" style="position: absolute; top: 740px; left: 1600px; width: 257px; height: 300px;" src="img/c-finger-pointing.png" /&gt;
          &lt;/div&gt; --&gt;
      &lt;/div&gt;
      &lt;div data-p="225.00" style="display: none;"&gt;
          &lt;img data-u="image" src="images/purple.jpg" /&gt;
      &lt;/div&gt;
      &lt;a data-u="any" href="http://www.jssor.com" style="display:none"&gt;Full Width Slider&lt;/a&gt;
      &lt;div data-p="225.00" data-po="80% 55%" style="display: none;"&gt;
          &lt;img data-u="image" src="images/blue.jpg" /&gt;
      &lt;/div&gt;
      &lt;div data-p="225.00" style="display: none;"&gt;
          &lt;img data-u="image" src="images/green.jpg" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- Bullet Navigator --&gt;
  &lt;div data-u="navigator" class="jssorb05" style="bottom:16px;right:16px;" data-autocenter="1"&gt;
      &lt;!-- bullet navigator item prototype --&gt;
      &lt;div data-u="prototype" style="width:16px;height:16px;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- Arrow Navigator --&gt;
  &lt;span data-u="arrowleft" class="jssora22l" style="top:0px;left:8px;width:40px;height:58px;" data-autocenter="2"&gt;&lt;/span&gt;
  &lt;span data-u="arrowright" class="jssora22r" style="top:0px;right:8px;width:40px;height:58px;" data-autocenter="2"&gt;&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div class="header"&gt;
  &lt;h1&gt;home&lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;div class="" id="footer"&gt;
  footer
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>textarea {
  font-family: "Verdana";
  resize: none;
  width: 400px;
  height: 50px;
  }
  
  label {
  font-weight: normal;
  }
  input {
  font-weight: normal;
  }
  
  h1 {
  margin: 0;
  }
  
  body {
  background-color: grey;
  }
  
  .container-fluid {
  margin: 0;
  padding: 0;
  }
  
  .navbar-default {
  width: 100%;
  background-color: white;
  box-shadow: 20px;
  padding: 15px;
  margin: 0;
  border-radius: 0;
  border: none;
  font-size: 25px;
  -webkit-box-shadow: 0 5px 3px -2px #5b5b5b;
      -moz-box-shadow: 0 5px 3px -2px #5b5b5b;
           box-shadow: 0 5px 3px -2px #5b5b5b;
  }
  
  .navbar-header{
  right: auto;
  }
  
  .navbar-nav &gt; li{
  }
  
  .navbar-default .navbar-brand,
  .navbar-default .navbar-brand:hover,
  .navbar-default .navbar-brand:focus {
    color: black;
    font-size: 30px;
  
  }
  
  .navbar-default .navbar-nav &gt; li &gt; a {
    color: black;
  }
  
  .navbar-default .navbar-nav &gt; li &gt; a:hover,
  .navbar-default .navbar-nav &gt; li &gt; a:focus {
    color: black;
    opacity: 0.5;
  
  }
  
  .navbar-default .navbar-nav &gt; .active &gt; a,
  .navbar-default .navbar-nav &gt; .active &gt; a:hover,
  .navbar-default .navbar-nav &gt; .active &gt; a:focus {
    color: black;
    background-color: transparent;
  }
  
  .navbar-default .navbar-text {
    color: #FFF;
  }
  
  .navbar-default .navbar-toggle {
  border-color: none;
  }
  
  .icon-bar {
  }
  
  .navbar-default .navbar-toggle:hover,
  .navbar-default .navbar-toggle:focus {
    background-color: lightgrey;
  }
  
  .navbar-default .navbar-toggle .icon-bar {
    background-color: blue;
    width: 40px;
    height: 5px;
    border-radius: 20px;
  
  }
  
  .navbar-collapse {
  border: 0px;
  }
  
  .navbar-default .navbar-collapse {
  color: #e7e7e7;
  }
  
  .navbar-default .navbar-collapse, .navbar-default .navbar-form {
  border-color: transparent;
  box-shadow: none;
  }
  
  .navbar-default .navbar-nav &gt; li &gt; a:hover, .navbar-default .navbar-nav &gt; li &gt; a:focus {
  color: blue;
  }
  
  #footer {
  padding: 20px;
  width: auto;
  height: 400px;
  background-color: #efefef;
  }
  
  .header {
   background-color: lightgrey;
   width: auto;
   height: 660px;
  }
  
  /* jssor slider bullet navigator skin 05 css */
  /*
  .jssorb05 div           (normal)
  .jssorb05 div:hover     (normal mouseover)
  .jssorb05 .av           (active)
  .jssorb05 .av:hover     (active mouseover)
  .jssorb05 .dn           (mousedown)
  */
  .jssorb05 {
  position: absolute;
  }
  .jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
  position: absolute;
  /* size of bullet elment */
  width: 16px;
  height: 16px;
  background: url('../images/b05.png') no-repeat;
  overflow: hidden;
  cursor: pointer;
  }
  .jssorb05 div { background-position: -7px -7px; }
  .jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; }
  .jssorb05 .av { background-position: -67px -7px; }
  .jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; }
  
  /* jssor slider arrow navigator skin 22 css */
  /*
  .jssora22l                  (normal)
  .jssora22r                  (normal)
  .jssora22l:hover            (normal mouseover)
  .jssora22r:hover            (normal mouseover)
  .jssora22l.jssora22ldn      (mousedown)
  .jssora22r.jssora22rdn      (mousedown)
  .jssora22l.jssora22lds      (disabled)
  .jssora22r.jssora22rds      (disabled)
  */
  .jssora22l, .jssora22r {
  display: block;
  position: absolute;
  /* size of arrow element */
  width: 40px;
  height: 58px;
  cursor: pointer;
  background: url('../images/a22.png') center center no-repeat;
  overflow: hidden;
  }
  .jssora22l { background-position: -10px -31px; }
  .jssora22r { background-position: -70px -31px; }
  .jssora22l:hover { background-position: -130px -31px; }
  .jssora22r:hover { background-position: -190px -31px; }
  .jssora22l.jssora22ldn { background-position: -250px -31px; }
  .jssora22r.jssora22rdn { background-position: -310px -31px; }
  .jssora22l.jssora22lds { background-position: -10px -31px; opacity: .3; pointer-events: none; }
  .jssora22r.jssora22rds { background-position: -70px -31px; opacity: .3; pointer- events: none; }
  
  @media (max-width: 1200px) {
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }
  .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-fixed-top {
      top: 0;
      border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
      display: none!important;
  }
  .navbar-nav {
      float: none!important;
      margin-top: 7.5px;
  }
  .navbar-nav&gt;li {
      float: none;
  }
  .navbar-nav&gt;li&gt;a {
      padding-top: 10px;
      padding-bottom: 10px;
  }
  .collapse.in{
      display:block !important;
  }
  }
  
  
  
  Thank you in advance.
  </code></pre>