1

Estou com um problema ao posicionar a search bar, quero encostrá-la á direita mas não estou a conseguir, já tirei o padding e a margin toda e continua na mesma. (As cores são para demonstrar o que está a falhar)

<div class="row rowa bg-danger">
                        <div class="col-4 px-0 justify-content-left"> 
                           <h3 class="display-4 ml-0 pl-0">Candidates</h3>
                        </div>
                        <div class="col-6 bg-success"> <!--Search bar-->
                            <div class="searchbar text-center bg-primary">
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Search this blog">
                                    <div class="input-group-append">
                                        <button class="btn btn-secondary" type="button">
                                            <i class="fa fa-search"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

*inserir a descrição da imagem aqui*

1 Resposta 1

1

Seu grid está meio estranho pq ele tem que totalizar 12, mas vc está usando 4 na primeira col e 6 na segunda, totalizando 10... De qq forma, basta que na col-6 com o Search vc coloque ml-auto, isso vai deixa-la a direita, e para tirar o espaço interno, vc coloca pr-0 para retirar o padding da direita dessa col

inserir a descrição da imagem aqui

Resumindo sua col com o Searsh ficaria assim:

<div class="col-6 bg-success ml-auto pr-0"> <!--Search bar-->

Veja:

<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />

    
<div class="container">
    <div class="row rowa bg-danger">
            <div class="col-4 px-0 justify-content-left"> 
               <h3 class="display-4 ml-0 pl-0">Candidates</h3>
            </div>
            <div class="col-6 bg-success ml-auto pr-0"> <!--Search bar-->
                <div class="searchbar text-center bg-primary">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search this blog">
                        <div class="input-group-append">
                            <button class="btn btn-secondary" type="button">
                                <i class="fa fa-search"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>

2
  • Olá Hugo, mais um vez, muito obrigado por me ajudar, estou com erros no código que nem sei como fiz mas muito obrigado na mesma :)
    – Afonso
    Commented 10/04/2019 às 14:01
  • @Afonso sem problemas meu caro, depois se vc achar que a resposta resolveu lembre-se de marca-la, assim sua pergunta não fica aberta mesmo já tendo sido resolvida. E se vc tiver mais alguma dúvida comenta ai que tento te ajudar
    – hugocsl
    Commented 10/04/2019 às 14:04

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .