Home / Questions / 24434
Accepted
Cidius
Asked: 2020-09-21 06:37:31 +0800 CST 2020-09-21 06:37:31 +0800 CST

Reduce Thumbnails spacing, page-header in bootstrap Css

  • 772

I am designing the Home of a site. With thumbnail for article. The truth is that I am very fresh in Css, but I imagine that some class of bootstrap.css is the one that is generating the spaces for me but I have not been able to find it

<div class="contenido">
		<section class="row">
			<div class="page-header">
  					
			</div>
			<h3><span class="label label-primary">Ultimas Novedades</span></h3>
				<article class=" col-xs-12 col-sm-6 col-md-9">			
					<div class="row">
					<div class="col-xs-12 col-sm-3 col-md-8">
						<div class="col-xs-12">
						    <a href="#" class="thumbnail">
						      <img src="/img/carousel/imagen-2.jpg" alt="...">
						      	<div class="caption">
        							<h3>Titulo del Articulo</h3>
        							<p>Resumen...</p>
        						</div>
						    </a>
						  </div>
					</div>
					<div class="col-xs-12 col-sm-3 col-md-4">
						<div class="row">
						  <div class="col-xs-12">
						    <a href="#" class="thumbnail">
						      <img src="/img/carousel/imagen-1.jpg" alt="...">
						      <div class="caption">
        							<p>Titulo</p>
        						</div>
						    </a>
						  </div>
						</div>
						<div class="row">
						  <div class="col-xs-12">
						    <a href="#" class="thumbnail">
						      <img src="/img/carousel/imagen-3.jpg" alt="...">
						      <div class="caption">
        							<p>Titulo</p>
        						</div>
						    </a>
						  </div>
						</div>
					</div>
					</div>
					<div class="row">
						<div class="page-header">
	  							<h4><span class="label label-primary">Lo mas visto</span></h4>
						</div>
						<!-- articulos por categoria -->
							@include('front.template.partials.art-cat')
					</div>
					<div class="row">
						<div class="page-header">
	  							<h4><span class="label label-primary">Atletismo</span></h4>
						</div>
						<!-- articulos por categoria -->
						@include('front.template.partials.art-cat')
					</div>
					<div class="row">
						<div class="page-header">
							<h4><span class="label label-primary">De nosotros</span></h4>
						</div>
						<!-- articulos por categoria -->
						@include('front.template.partials.art-cat')
					</div>
				</article>

				<aside class="visible-lg visible-md col-xs-12 col-sm-3 col-md-3">

					<div class="panel panel-default">
						  <div class="panel-body">
						  		<h4>Proximos Eventos<small> . <a href="#">Ver todos</a></small></h4>
						  		<p>
									Aca habra por renglon una fecha con el proximo evento. 
									Ademas presionandolo, se abrira con una pagina con el detalle Completo
								</p>

								<p>	Maraton de la Salud - Entre Rios | 19/9</p>
								<p>	Maraton de la Salud - Entre Rios | 19/9</p>
								<p>	Maraton de la Salud - Entre Rios | 19/9</p>
								<p>	Maraton de la Salud - Entre Rios | 19/9</p>
								<p>	Maraton de la Salud - Entre Rios | 19/9</p>
								<p>	Maraton de la Salud - Entre Rios | 19/9</p>
								<p>	Maraton de la Salud - Entre Rios | 19/9</p>
								<p>	Maraton de la Salud - Entre Rios | 19/9</p>
								<p>	Maraton de la Salud - Entre Rios | 19/9</p>
						  </div>
						   <div class="panel-footer">
						   		<a href="#">Calendario Completo <span class="badge">42</span></a>

						   </div>
					</div>

					<div class="panel panel-default">
						  <div class="panel-body">
						  		<h4>Ranking:???</h4>

						  </div>
					</div>
					<div class="panel panel-default">
						  <div class="panel-body">
						  		<h4>Publicidades</h4>

						  </div>
					</div>
					<div class="panel panel-default">
						  <div class="panel-body">
						  		<b> &copy Lisandro Parera . 1toMany</b>

						  </div>
					</div>

					
					
				</aside>		
		</section>	
	</div>

Here is my style sheet:

body 
{ 
	padding-top: 50px;
	background-color: #f5f8fa;
}
.navbar{
	background-color: #FFFFFF !important;
	border-color: #95d6f0;
	color: #95d6f0 !important;
}

aside
{
  	width: 100%;
 	margin: 0 auto;
}

.contenido
{
	width: 95%;
 	margin: 0 auto;
}
.panel-body{
	padding: 10px;
	width: 100%;
	margin: 0 auto;
}

html5

1 Answers

  1. Best Answer

    If you mean the img-thumbnail class which adds like a small frame to the photos and then a border, you just have to modify the css of said img-thumbnail class

    .img-thumbnail {
padding: 2px;
}

    with 2px we leave it in the middle, bootstrap has a series padding of 4px Then call your css file after the bootstrap css call to override the style

    • 0