Ir para conteúdo
leandrosv

Alinhamento de imagens com css e bootstrap

Recommended Posts

Boa tarde pessoal!

Novato em programação, estou tentando a dias alinhar essas imagens com css e bootstrap mas não esta funcionando,  como esta no arquivo .png. Será que vocês conseguem me dar alguma dica de como alinhar essas imagens? 

Quero fazer tipo um álbum  de fotos para mim aprender, depois vou aprender o js e ficar testando.

Obrigado!

 

**As imagens não estão no mesmo tamanho, fiz meio rápido no fw sem observar os detalhes.

**Aos administradores do fórum, se eu estiver postando no lugar errado, me desculpem.

teste.fw.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

Boas, com Bootstrap (v3.3.7) basicamente é isso:

<div class="container">
  <div class="row">

    <div class="col-lg-3 col-md-4 col-xs-6 thumb">
      <img class="img-responsive" src="http://placehold.it/400x267">
    </div>
  
  </div>
</div>

E para cada nova imagem, utilize esse conjunto dentro da div "row" como acima:

<div class="col-lg-3 col-md-4 col-xs-6 thumb">
  <img class="img-responsive" src="http://placehold.it/400x267">
</div>

Fica exatamente como quer.

Se estiver utilizando a versão mais recente (v4.0) avisa aí pq esse não serve.

Att.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eu não gosto da utilização do bootstrap então fiz sem para você estudar um pouco:

 

Ta bem cru pois dependendo da onde você usar, você tem que adaptar.

 

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	body {
		background: #c1c1c1;
	}
	.linha img{
		width: 100px;
		height: 100px;
		padding: 5px;
	}
</style>
<body>
<content>
	<div class="linha">
		<img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg">
		<img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg">
		<img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg">
		<img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg">
	</div>
	<div class="linha">
		<img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg">
		<img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg">
		<img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg">
		<img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg">
	</div>
	<div class="linha">
		<img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg">
		<img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg">
		<img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg">
		<img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg">
	</div>
	<div class="linha">
		<img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg">
		<img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg">
		<img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg">
		<img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg">
	</div>
</content>
</body>
</html>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
5 minutos atrás, leandrosv disse:

estou usando a nova versão do bootstrap, vou procurar sobre a versao 3, ai talvez fique melhor de fazer

Não faça isso. As diferenças de uso são sutis. Além disso com o exemplo do @Public2004 já deveria funcionar para você na v4.

Na versão 4 você também pode usar flexbox para isso: https://getbootstrap.com/docs/4.0/utilities/flex/

 

Mas no seu caso, eu ainda faria o layout sem nenhuma ferramenta, com o intuito de estudar HTML/CSS puros. Depois você volta para o Bootstrap.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.