2

Preciso fazer algo conforme a imagem, utilizando bootstrap.

Alguém ja passou por isso? Tem alguma idéia de como fazer?

inserir a descrição da imagem aqui

2 Respostas 2

1

Existem algumas formas de fazer isso. A que usei, foi criar um contêiner geral com a class container-fluid o que faz com que a div ocupe todo o espaço da tela. Nas partes que a linha não deve seve ser full-width usei um col-md-10 [por exemplo] com offset de 1.

No Plunker.

Obs1: Usando Bootstrap 4, porém a solução para outras versões é facilmente adaptada.

Obs2: A visualização pode ser aberta no modo responsivo, pode mexer a vontade para ver o comportamento, principalmente com a página 'completa'.

2
  • Entendi, só que dessa forma o conteúdo não respeita o container principal né? Commented 22/08/2017 às 12:48
  • Se não entendi errado o que você quis dizer, o conteúdo irá respeitar suas respectivas rows e divs. O conteiner é apenas uma "embalagem" para o conteúdo. Commented 22/08/2017 às 13:01
0

Você já usou Materialize? Acho ele melhor para criar esse tipos de blocos...

Porem no Bootstrap você consegue distribuindo as células que deseja dentro do contêiner do tamanho que deseja. Exemplo:

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

Depois e só estilizar com o CSS.

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 .