Place side-by-side css / html / bootstrap elements

Question

Place side-by-side css / html / bootstrap elements

Navigation

#1 by (0 votes)
#2 by (-1 votes)

0

I need to put these two elements side by side, how can I do this? Using html / css / bootstrap.

My code:

Html:

<divclass="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;
}

html css twitter-bootstrap

asked by anonymous 01.06.2018 / 23:08

2 answers

Facebook Plugin - PhoneGap SQLite being accessed by GCM

score 0 · Answer 1

You can do this only by 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, it will not do anything wrong with the code below.

The bootstrap has a system of rows and columns. All you have to do is create a row and split this row into two columns. That is, one part of the filter is in the left column and the other part in the one on the right.

In practice, the bootstrap has 12 columns inside a container, so instead of reserving one left and one right, we will reserve 6 columns for the left filter (col-md-6) and 6 columns for the filter (col-md-6) and put those 12 columns inside a 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

score -1 · Answer 2

-1

<div class="row">
    <div class="col-md-4">elemento 1</div>
    <div class="col-md-4">elemento 2</div>    
</div>

01.06.2018 / 23:50