Place elements side by side css/html/bootstrap

Question

Need to put these two elements together, how can I do it? Using html/css/bootstrap.

My code:

Html:

    <div class="container">
<div class="pesquisa">
<form id="filter">
<label>Filtre tickets pelo nome: </label>
<input class="form-control" type="text" [(ngModel)]="termo" name="termo" />
<br>
</form>
</div>

  <div class="row">
    <div class="span12">
       <div class="page-header">
        <h3>Filtros Adicionais</h3>

        <div class="dropdown">
           <a href="#" class="btn opcoes" data-toggle="dropdown">Opções<span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
              <li><a class="btn ultimos15" (click)="getUltimos15Dia()">Últimos 15 Dias</a></li>
              <li><a class="btn ultimos30" (click)="getUltimos30Dia()">Últimos 30 Dias</a></li>
              <li><a class="btn ultimos60" (click)="getUltimos60Dia()">Últimos 60 Dias</a></li>
              <li><a class="btn visualizartodos" (click)="getTickets()">Visualizar todos os Tickets</a></li>
              <li>  <a class="btn limpaTicketsFechados" (click)="getLimpaTicketsFechados()">Limpar Tickets Fechados
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
              </a></li>
              <li> <a class="btn visualizaFechados" align="center" (click)="getTicketsLimpados()">Visualizar Tickets Limpados
                <span class="glyphicon glyphicon-ban-circle" aria-hidden="true" ></span>
              </a></li>
          </ul>
        </div>
      </div>
    </div>

    </div>

    </div>

Css:

.pesquisa{
  width: 300px;
  display: inline-block;
}

Answer 1

You can do this using Bootstrap, without additional css. I took into consideration that you are using version 3.3.7 of Bootstrap, but I believe that unless you are using some version > 4, there will be nothing wrong with the code below.

The bootstrap has a row system (Rows) and columns (Columns). All you need to do is create a row and split that row into two columns. That is, one part of the filter is in the left column and the other part in the right.

In practice, the bootstrap has 12 columns inside a container, so instead of reserving one to the left and one to the right, let’s reserve 6 columns for the left filter (col-Md-6) and 6 columns for the right filter (col-Md-6) and place these 12 columns inside a row (Row).

<div class="container">
  <div class="row">
    <div class="col-md-6">

      <form id="filter">
        <label>Filtre tickets pelo nome: </label>
        <input class="form-control" type="text" [(ngModel)]="termo" name="termo" />
      </form>

    </div>
    <div class="col-md-6">
      <label>Filtros adicionais</label>
      <div class="dropdown">

        <a href="#" class="btn opcoes">
          Opções <span class="caret"></span>
        </a>

        <ul>
        </ul>

      </div>
    </div>
  </div>
</div>

Jsfiddle