Lucas.Fradusco
Lucas.Fradusco

Reputation: 39

Not Able to correctly align image with bootstrap

I'm having this problem when trying to display images. I tried everything but I can't get it the propper way. Here's what it looks like. I'd like the second row of data to be right under the first one, and the image right next to it. https://postimg.org/image/634nny3b9/

here's some of my code for that page

Datos personales

        <div class="col-xs-3">
          <label for="ex1">Nombre</label>
          <input class="form-control" id="ex1" type="text" value="<?= $clientes->nombre ?>" disabled="disabled">
        </div>
            <div class="col-xs-3">
              <label for="ex1">Apellido</label>
              <input class="form-control" id="ex1" type="text" value="" disabled="disabled">
            </div>
                <div class="col-xs-3">
                  <label for="ex1">Fecha de Nacimiento</label>
                  <input class="form-control" id="ex1" type="date" value="" disabled="disabled">
                </div>
                <div class="col-xs-3">

                 <img src="route/to/image" alt="" class="img-thumbnail">
        </div>
                <div class="col-xs-3">
                          <label for="ex1">Dirección</label>
                          <input class="form-control" id="ex1" type="text" value="" disabled="disabled">
                        </div>  
                    <div class="col-xs-3">
                      <label for="ex2">DNI</label>
                      <input class="form-control" id="ex2" type="int" value="" disabled="disabled">
                    </div>                  

                        <div class="col-xs-3">
                          <label for="ex2">Telefono</label>
                          <input class="form-control" id="ex2" type="text" value="" disabled="disabled">
                        </div>  


                            <div class="col-xs-3">
                              <label for="ex2">E-mail</label>
                              <input class="form-control" id="ex2" type="text" value="" disabled="disabled">
                            </div>
                                <div class="col-xs-3">
                                  <label for="ex2">Sexo</label>
                                  <input class="form-control" id="ex2" type="text" value="" disabled="disabled">
                                </div>

         </fieldset>

<hr>

Blockquote

Upvotes: 0

Views: 40

Answers (1)

Ilker Mutlu
Ilker Mutlu

Reputation: 754

What you can do basically is:

<div class="row>
    <div class="col-xs-9>
        <div class="row">
            <div class="col-xs-4">
            <!-- labels and inputs go here -->
            </div>
            <div class="col-xs-4">
            <!-- labels and inputs go here -->
            </div>
            <div class="col-xs-4">
            <!-- labels and inputs go here -->
            </div>
        </div>
    </div>
    <div class="col-xs-3>
        <!-- image goes here -->
    </div>
</div>

Edit: And BTW, the question is totally unrelated to php. Consider removing the php tag.

Upvotes: 1

Related Questions