Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Alinhar elementos abaixo e a direita

Referente ao curso Bootstrap: criação de uma single-page responsiva, no capítulo Introdução e atividade Apresentação do curso

por Marylia
| 90.6k xp | 95 posts
Desenvolvedor/Design Front End

Boa tarde, eu tenho uma estrutura de formulários onde preciso que duas colunas fiquem a esquerda e um card a direita, mas não estou conseguindo, segue a imagem, e o código, pra poder explicar o jeito que deveria ficar.

Original Loan Value
Original Loan Term
Loan Amount
Loan Period
Loan Type

link imagem: https://imgur.com/a/lkTuC

4 respostas
por Joel Spinelli
| 620.9k xp | 630 posts
Desenvolvedor Node e Front End

Oi Marylia, tenta colocar o código dentro do INSERIR CÓDIGO, pois não é possível ver o código que colocou aqui.

por Marylia
| 90.6k xp | 95 posts
Desenvolvedor/Design Front End 
     <ul class="nav nav-tabs">
                        <li class="active"><a data-toggle="tab" href="#menu8">Loan Data</a></li>
                        <li><a data-toggle="tab" href="#menu9">Credit Data</a></li>
                        <li><a data-toggle="tab" href="#menu10">ACH/Credit Info</a></li>
                    </ul>
                    <div class="tab-content">
                        <div id="menu8" class="tab-pane fade in active">
                            <div class="clear"></div>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>Original Loan Value</label>
                                        <input type="text" class="form-control" id="">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>Original Loan Term</label>
                                        <input type="text" class="form-control" id="">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="card">
                                        <div class="card-status bg-orange"></div>
                                        <div class="card-body">
                                            <div class="form-group">
                                                <label>Loan Amount</label>
                                                <input type="text" class="form-control" id="">
                                            </div>
                                            <div class="form-group">
                                                <label>Loan Period</label>
                                                <input type="text" class="form-control" id="">
                                            </div>
                                            <div class="form-group">
                                                <label>Loan Type</label>
                                                <select class="form-control"><option></option></select>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-md-12">
                                                    <button type="submit" class="btn btn-primary orange btn-pay">Calculate Payment</button>
                                                </div>
                                            </div>
                                            <div class="clear"></div>
                                            <div class="form-group">
                                                <div class="col-md-12">
                                                    <button type="submit" class="btn btn-primary orange btn-pay">Request New Loan</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>Loan Start Date:</label>
                                        <input type="text" class="form-control" id="">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>Loan End Date:</label>
                                        <input type="text" class="form-control" id="">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>Pay off as of today:</label>
                                        <input type="text" class="form-control" id="">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>Type of Loan:</label>
                                        <input type="text" class="form-control" id="">
                                    </div>
                                </div>
                            </div>
solução!
por Joel Spinelli
| 620.9k xp | 630 posts
Desenvolvedor Node e Front End

Oi Marylia, eu ainda estou pegando o jeito com o bootstrap, já usei ele bastante, mas ainda não fiz o curso dele aqui do Alura, seria até uma boa dar uma olhada... mas eu fiz algumas modificações, vê se é isso que você precisa

    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#menu8">Loan Data</a></li>
        <li><a data-toggle="tab" href="#menu9">Credit Data</a></li>
        <li><a data-toggle="tab" href="#menu10">ACH/Credit Info</a></li>
    </ul>
    <div class="tab-content">
    <div id="menu8" class="tab-pane fade in active">
    <div class="clear"></div>

    <div class="row">
        <div class="col-md-8">
            <div class="col-md-6">
                <div class="form-group">
                    <label>Original Loan Value</label>
                    <input type="text" class="form-control" id="">
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label>Original Loan Term</label>
                    <input type="text" class="form-control" id="">
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label>Loan Start Date:</label>
                    <input type="text" class="form-control" id="">
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label>Loan End Date:</label>
                    <input type="text" class="form-control" id="">
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label>Pay off as of today:</label>
                    <input type="text" class="form-control" id="">
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label>Type of Loan:</label>
                    <input type="text" class="form-control" id="">
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card">
            <div class="card-status bg-orange"></div>
            <div class="card-body">
                <div class="form-group">
                    <label>Loan Amount</label>
                    <input type="text" class="form-control" id="">
                </div>
                <div class="form-group">
                    <label>Loan Period</label>
                    <input type="text" class="form-control" id="">
                </div>
                <div class="form-group">
                    <label>Loan Type</label>
                    <select class="form-control"><option></option></select>
                </div>
                <div class="form-group">
                    <div class="col-md-12">
                        <button type="submit" class="btn btn-primary orange btn-pay">Calculate Payment</button>
                    </div>
                </div>
                <div class="clear"></div>
                <div class="form-group">
                    <div class="col-md-12">
                        <button type="submit" class="btn btn-primary orange btn-pay">Request New Loan</button>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
por Marylia
| 90.6k xp | 95 posts
Desenvolvedor/Design Front End

Oi Joel!! era isso mesmo!! Muito obrigadaaaa!! Eu não estava sabendo fazer a estrutura correta, a parte da esquerda vc envolveu numa col 8 e a parte da direita uma col 4 e tinha que ser declarada após as outras, legal!! Me ajudou muito!! =D

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software