Positioning of boostrap panels

Navigation
1

I am currently working on an application with Bootstrap 3 in Dreamweaver and I am using panels to separate some data and functions in a menu.

As I know, when using grids on the page the page is divided into 12 possible columns, giving the programmer the possibility of separating the width of the body of the page up to those 12 columns. The problem is that I am using panels with a width of 6 and it does not separate them properly.

I hope you can help me or give me an alternative. I leave the code of my project. 

    <div class="container">
    <h1 class="text-center">Perfil de usuario</h1>
    <hr>
    <div class="row col-lg-6 col-md-6 col-sm-6 col-xs-12">
    <div class="panel panel-info">
        <div class="panel-heading text-center">Datos personales</div>
        <div class="panel-body">
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <img class="img-responsive center-block" src="images/icons/id-card-1.png" width="150" height="150" alt=""/>
            <hr>
            </div>
          <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12 text-center">
            <p class="text-muted"><strong>Nombre(s): </strong></p>
            <p>Alex</p>
            <p class="text-muted"><strong>Apellidos: </strong></p>
            <p>Apellidos</p>
            <p class="text-muted"><strong>Fecha de nacimiento: </strong></p>
            <p>22/11/1999</p>
            </div>
        </div>
    </div>
    </div>
    <div class="row col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="panel panel-success">
        <div class="panel-heading text-center">Configuracion de la cuenta</div>
        <div class="panel-body">
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <img class="img-responsive center-block" src="images/icons/switch-5.png" width="150" height="150" alt=""/>
            <hr>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 text-center">
            <p></p>
            <div class="btn-group-vertical">
            <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-lock"></span> Cambiar contraseña</button><br>
            <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-user"></span> Editar foto de perfil</button><br>
            <button type="button" class="btn btn-info"><span class="glyphicon glyphicon-info-sign"></span> Editar estado</button><br>
            </div>
            <p></p>
            </div>
        </div>
    </div>
    </div>
</div>

I show you in the following image.

    
asked by alexchvrches 14.06.2017 в 02:01
source

1 answer

1

I think it's because of this: you're creating a row each time you use this line: 

<div class="row col-lg-6 col-md-6 col-sm-6 col-xs-12">

when in fact what you have to do is create a row and within it use the columns: 

<div class="container">
    <h1 class="text-center">Perfil de usuario</h1>
    <hr />
    <div class="row"> <!-- Aquí -->
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
            <div class="panel panel-info">
                <div class="panel-heading text-center">Datos personales</div>
                <div class="panel-body">
                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                        <img class="img-responsive center-block" src="images/icons/id-card-1.png" width="150" height="150" alt=""/>
                        <hr />
                    </div>
                    <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12 text-center">
                        <p class="text-muted"><strong>Nombre(s): </strong></p>
                        <p>Alex</p>
                        <p class="text-muted"><strong>Apellidos: </strong></p>
                        <p>Apellidos</p>
                        <p class="text-muted"><strong>Fecha de nacimiento: </strong></p>
                        <p>22/11/1999</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
            <div class="panel panel-success">
                <div class="panel-heading text-center">Configuracion de la cuenta</div>
                <div class="panel-body">
                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                        <img class="img-responsive center-block" src="images/icons/switch-5.png" width="150" height="150" alt=""/>
                        <hr />
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 text-center">
                        <p></p>
                        <div class="btn-group-vertical">
                            <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-lock"></span> Cambiar contraseña</button><br>
                            <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-user"></span> Editar foto de perfil</button><br>
                            <button type="button" class="btn btn-info"><span class="glyphicon glyphicon-info-sign"></span> Editar estado</button><br>
                        </div>
                        <p></p>
                    </div>
                </div>
            </div>
        </div>
    </div> <!-- Aquí acaba el primer "row" -->
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6>
            ...
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6>
            ...
        </div>
    </div>
</div>

I hope this helps you.

    
answered by 14.06.2017 / 02:30
source
Bootstrap 4 Buttons on the bottom of Cards regardless of height I can not insert a cell with JavaScript (insertCell is not a function)