txomin txomin - 27 days ago 21
CSS Question

Bootstrap layout for small devices

i'm trying to implement Bootstrap correctly in my proyect, but im getting stuck. What i want to do is to have different layouts for my app in case it is accessed by a small device.

I created a Plunkr to make it easier. What i want to do is to place the Red div between the grey and orange one.

EDIT I tried to create a row with the business-header and the login div and i can see the result i want for small devices but not for large ones.

Here you have two images, the first one is how i want it to look like in large devices and the second one is for smalls.

Large device layout:

enter image description here

Small device layout:

enter image description here

<header class="business-header">
<div class="container-fluid">
<div class="row">
<div class="col-lg-9 col-sm-9">
<h1><a class="tagline hipervinculo green" ui-sref="home" translate>titulo.alergenos</a></h1>
</div>

<div class="login col-lg-3 col-sm-3" ng-controller="LoginController">
<div class="panelLogin">
<label for="usuario" translate>input.usuario</label>
<input type="text" class="form-control" id="usuario" ng-model="loginUsuario">
<label for="contrasena" translate>input.contrasena</label>
<input type="password" class="form-control" id="contrasena" ng-model="loginPassword">
<button type="button" class="btn btn-default" ng-click="login()" translate>input.autenticar</button>
</div>
</div>
</div>
</div>
</header>


<div class="container orange">
<legend translate>Welcome</legend>

<div class="row">
<div class="col-sm-12">
<ul>
<li ng-repeat="descripcion in texto">{{descripcion}}</li>
</ul>
</div>
</div>

<hr>

<div class="row">
<div class="col-sm-12">
<h2 translate>home.titulo.queHacemos</h2>
<p translate>home.descripcion.queHacemos</p>
<p>
<a class="btn btn-default btn-lg" href="#">Call to Action &raquo;</a>
</p>
</div>
</div>
<hr>
</div>


thanks in advance.

Answer

Try this plunk

Here's the relevant bit:

            <div class="login col-lg-3 col-sm-3 hidden-xs" ng-controller="LoginController">
                <div class="panelLogin">
                      <label for="usuario" translate>input.usuario</label>
                      <input type="text" class="form-control" id="usuario" ng-model="loginUsuario">
                      <label for="contrasena" translate>input.contrasena</label>
                      <input type="password" class="form-control" id="contrasena" ng-model="loginPassword">
                      <button type="button" class="btn btn-default" ng-click="login()" translate>input.autenticar</button>
                </div>
            </div>
        </div>
    </div>
</header>

            <div class="login col-xs-12 hidden-sm hidden-md hidden-lg" ng-controller="LoginController">
                <div class="panelLogin">
                      <label for="usuario" translate>input.usuario</label>
                      <input type="text" class="form-control" id="usuario" ng-model="loginUsuario">
                      <label for="contrasena" translate>input.contrasena</label>
                      <input type="password" class="form-control" id="contrasena" ng-model="loginPassword">
                      <button type="button" class="btn btn-default" ng-click="login()" translate>input.autenticar</button>
                </div>
            </div>

I've duplicated the form so it's both in and out of the grey wrapper. Then using bootstrap's show/hide classes I've hidden one for small screens "hidden-xs" and hidden the other for larger screens "hidden-sm hidden-md hidden-lg".

Comments