Sidebar

Nesta videoaula, continuaremos o desenvolvimento do nosso blog, com a construção da estrutura do conteúdo principal com foco na barra lateral, chamada de sidebar.

Para criar a estrutura do conteúdo e da barra lateral, utilizaremos o sistema de grid do Bootstrap. A estrutura básica deve ser da seguinte forma:

<div class="container">
  <div class="row">
    <div class="col-md-8"></div>
    <div class="col-md-4"></div>
  </div>
</div>

Card de busca

No sidebar, adicionaremos uma área para o usuário buscar algum conteúdo no blog. Para isso, utilizaremos o componente Card do Bootstrap. O componente final ficou com seguinte código:

<div class="card mb-4">
  <div class="card-header">
    Busca
  </div>
  <div class="card-body">
    <div class="input-group">
      <input class="form-control" type="text" placeholder="Digite aqui...">
      <button class="btn btn-secondary ml-2">Buscar</button>
    </div>
  </div>
</div>

Card de categorias

Além do componente de busca, adicionaremos ao sidebar uma listagem das categorias do blog. Acompanhe o código-fonte gerado:

<div class="card mb-4">
  <div class="card-header">
    Categorias
  </div>
  <div class="card-body">
    <dib class="row">
      <div class="col-lg-6">
        <ul class="list-unstyled">
          <li><a href="#">Web Design</a></li>
          <li><a href="#">Javascript</a></li>
          <li><a href="#">CSS</a></li>
        </ul>
      </div>
      <div class="col-lg-6">
        <ul class="list-unstyled">
          <li><a href="#">Web Design</a></li>
          <li><a href="#">Javascript</a></li>
          <li><a href="#">CSS</a></li>
        </ul>
      </div>
    </dib>
  </div>
</div>

Card do autor

Por fim, adicionaremos ao sidebar um card com informações do autor. Para isso, será utilizado um componente card do Bootstrap e algumas classes utilitárias para estilização da foto e espaçamentos. Acompanhe na videoaula e veja abaixo o resultado final alcançado:

<div class="card mb-4">
  <div class="card-header">
    Autor
  </div>
  <div class="card-body">
    <div class="text-center">
      <img src="imgs/avatar.jpg" class="rounded-circle" alt="">
    </div>
    <p class="py-3">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex, sit architecto
      tenetur, odit impedit quam corporis a libero assumenda suscipit fugiat in nesciunt labore
      pariatur dolor ipsam sed ducimus nemo.</p>
  </div>
</div>

Perceba o uso da classe do Bootstrap "rounded-circle" que tem o objetivo de tornar a imagem com aparência circular.

Download do exemplo

Clique aqui para download