Bootstrap different container width mobile
<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>