Reduce spacing Thumbnails, page-header in bootstrap Css

1

I am designing the Home of a site. With thumbnail for article. The truth is that I'm very cool in Css, but I imagine that some kind of bootstrap.css is what is generating spaces but I could not 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>
					

I leave 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;
}
    
asked by Cidius 20.09.2016 в 16:37
source

1 answer

0

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

.img-thumbnail {
padding: 2px;
}

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

    
answered by 22.09.2016 / 02:05
source