Bootstrap blocks

Asked

Viewed 1,214 times

0

Goodnight!

I wanted some tips, help, anyway, I wanted to create some style blocks that image below using bootstrap, but I have no idea where to start, someone can give me a light?

Thank you!

inserir a descrição da imagem aqui

  • What exactly can’t you do? Create one block? Place the blocks side by side? The question is too wide...

  • Create the blocks and place them side by side, sorry.

  • You have to give us some starting point, or else there’s a "I want something like this image, will someone do it for me?" request. Ever had a try at least started? You’ve worked with CSS?

  • I’m starting out, I really wanted the image equal, I don’t want anyone to do, I just don’t know where to start.

1 answer

3


Come on. bootstrap works with a grid of 12 cells, so create a line, where each cell(div) will be of col-[Xs or Md or lg size, is your criterion]-3. example:

<div class="row">
    <div class="col-xs-3"></div>
    <div class="col-xs-3"></div>
    <div class="col-xs-3"></div>
    <div class="col-xs-3"></div>
</div>

See the example below:

  
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
	<div class="row">
		<div class="col-xs-3">
			<div class="well well-sm">
				<dl>
				  <dt>Titulo </dt>
				  <dd>descricao </dd>
				  <dt>Titulo </dt>
				  <dd>descricao </dd>			 
				</dl>		
			</div>		
		</div>
		<div class="col-xs-3">
			<div class="well well-sm">
				<dl>
				  <dt>Titulo </dt>
				  <dd>descricao </dd>
				  <dt>Titulo </dt>
				  <dd>descricao </dd>			 
				</dl>		
			</div>		
		</div>
		<div class="col-xs-3">
			<div class="well well-sm">
				<dl>
				  <dt>Titulo </dt>
				  <dd>descricao </dd>
				  <dt>Titulo </dt>
				  <dd>descricao </dd>			 
				</dl>		
			</div>		
		</div>							
		<div class="col-xs-3">
			<div class="well well-sm">
				<dl>
				  <dt>Titulo </dt>
				  <dd>descricao </dd>
				  <dt>Titulo </dt>
				  <dd>descricao </dd>			 
				</dl>		
			</div>		
		</div>		
	</div>	
</div>

  • 1

    if the above text is not satisfactory, say here I try to improve the answer..

  • God, you’ve helped me so much, now I just have to go applying the css and testing until I get it right hahaha

  • Good! Anything is anything!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.