I have a classic bootstrap layout like: http://uppix.com/f-Now5351398300161b58.png
and I want no vertical gap between items: http://uppix.com/f-Iwant5351394f00161b56.png
Thanks for any answers.
<div class="col-xs-12 col-sm-9">
<div class="row">
<div class="col-6 col-sm-6 col-lg-4">
<div class="item">
300 EUR
<img class="img-responsive" src="http://wbpreview.com/previews/WB03K48SB/assets/img/h-3.jpg">
<div class="caption">
<h3>Bulharsko, Primorsko</h3>
<h4>Penzión SIM
<i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star blank-star"></i><i class="fa fa-star blank-star"></i>
</h4>
<p class="info">Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus.</p>
<p><i class="fa fa-calendar"></i> 21.06.- 18.06. (8 dní)</p>
<p><i class="fa fa-cutlery"></i> All inclusive <span class="transport">Bratislava <i class="fa fa-plane"></i></span></p>
</div>
</div>
</div><!--/span-->
.
.
.
</div>
</div>
You could assign the image a unique class and give it a negative top margin for example
.MoveImageUp {
margin-top: -150px;
}
Related
I am trying to create a responsive cards set using bootstrap. The code of the cards is as follows:
<div class="col-xl-4 col-md-6 col-sm-6 p-2">
<div class="card shadow" style="width: 16rem;">
<div class="inner">
<img class="card-img-top" src="images/1.jpeg" alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title">Location 1</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Beatae maxime eaque eligendi fugit dolores odit. Corrupti repellat aperiam.
</p>
<div class="justify-content-between">
<!-- Learn more -->
<div class="ml-2">
<i class="fas fa-video fa-lg"></i>
<i class="fas fa-restroom fa-lg ml-2"></i>
<span class="ml-5">
<i class="fas fa-bolt text-warning fa-lg">10</i>
<i class="fas fa-bolt text-success fa-lg ml-2">8</i>
</span>
</div>
</div>
</div>
</div>
</div>
The extra css applied to this is:
.inner {
overflow:hidden;
}
.inner img {
transition: all 1.5s ease;
}
.inner img:hover{
transform:scale(1.5);
}
.card-img-top {
width: 100%;
height: 25vh;
object-fit: cover;
}
What I am trying to achieve is, whenever hovered over image inside the card, it will scale up.
This works fine but whenever I go on reducing the window size, one card goes below the other.
I cannot understand why this is happening.
Card overlaps another card. so apply z-idex:1000. its work.
.card{
z-index: 1000;
}
.inner {
overflow: hidden;
}
.inner img {
transition: all 1.5s ease;
}
.inner img:hover {
transform: scale(1.5);
}
.card-img-top {
width: 100%;
height: 25vh;
object-fit: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
<div class="row">
<div class="col-xl-4 col-md-4 col-sm-6 p-2">
<div class="card shadow" style="width: 16rem;">
<div class="inner">
<img class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRQ6mhz8QnD2r1COMuWG4RZnrAzrgFwQHvC7QbIC3cSL6pbYUpL&usqp=CAU" alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title">Location 1</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Beatae maxime eaque eligendi fugit dolores odit. Corrupti repellat aperiam.
</p>
<div class="justify-content-between">
<!-- Learn more -->
<div class="ml-2">
<i class="fas fa-video fa-lg"></i>
<i class="fas fa-restroom fa-lg ml-2"></i>
<span class="ml-5">
<i class="fas fa-bolt text-warning fa-lg">10</i>
<i class="fas fa-bolt text-success fa-lg ml-2">8</i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-md-4 col-sm-6 p-2">
<div class="card shadow" style="width: 16rem;">
<div class="inner">
<img class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRQ6mhz8QnD2r1COMuWG4RZnrAzrgFwQHvC7QbIC3cSL6pbYUpL&usqp=CAU" alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title">Location 1</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Beatae maxime eaque eligendi fugit dolores odit. Corrupti repellat aperiam.
</p>
<div class="justify-content-between">
<!-- Learn more -->
<div class="ml-2">
<i class="fas fa-video fa-lg"></i>
<i class="fas fa-restroom fa-lg ml-2"></i>
<span class="ml-5">
<i class="fas fa-bolt text-warning fa-lg">10</i>
<i class="fas fa-bolt text-success fa-lg ml-2">8</i>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
I can't colorize the Font Awesome 5 icons using these codes. I tried fill css property for setting color but it didn't work.
HTML Code:
<div class="container mt200 icons">
<div class="col-md-3">
<div class="bggray2 text-center">
<i class="fas fa-microphone fa-5x"></i>
<div class="title">LOREM</div>
<div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</div>
</div>
</div>
<div class="col-md-3">
<div class="bggray2 text-center">
<i class="far fa-edit fa-5x"></i>
<div class="title">LOREM</div>
<div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
</div>
</div>
</div>
</div>
CSS Code:
.icons i {
color: #2759AE;
}
Font Awesome 5 uses svg for icons and path inside are set with fill:currentColor so simply change color of svg:
.icons svg {
color:#2759AE;
}
<script defer src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
<div class="container mt200 icons">
<div class="col-md-3">
<div class="bggray2 text-center">
<i class="fas fa-microphone fa-5x"></i>
<div class="title">LOREM</div>
<div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</div>
</div>
</div>
<div class="col-md-3">
<div class="bggray2 text-center">
<i class="far fa-edit fa-5x"></i>
<div class="title">LOREM</div>
<div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
</div>
</div>
</div>
</div>
As you can see in the code, the i are replaced with svg when you load the JS version:
You can apply color to i in case you are using the CSS version.
.icons i {
color:#2759AE;
}
<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet"><div class="container mt200 icons">
<div class="col-md-3">
<div class="bggray2 text-center">
<i class="fas fa-microphone fa-5x"></i>
<div class="title">LOREM</div>
<div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</div>
</div>
</div>
<div class="col-md-3">
<div class="bggray2 text-center">
<i class="far fa-edit fa-5x"></i>
<div class="title">LOREM</div>
<div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
</div>
</div>
</div>
</div>
So to make sure it will work in all the cases simply use both selector:
.icons i,
.icons svg {
color: #2759AE;
}
If you're using the svg-with-js version of Font Awesome 5 it takes everything in the <i></i> and preprocesses it into an <svg>. It specifies that the path has fill="currentColor" So, you have to set currentColor to the colour you want somehow. One option is:
svg {color: blue;}
The official docs recommend inline style:
<i class="far fa-edit fa-5x" style="color:blue"></i>
Or, set currentColor in one of the outer elements. For example:
<div class="bggray2 text-center" style="color: blue;">
<i class="far fa-edit fa-5x"></i>
</div>
And to move it to the CSS file, you could:
div .bggray2 {
color: blue;
}
If you are using Bootstrap 4 you can use and of the text-'color' settings in the parent of the tag.
<div class="bggray2 text-danger">
<i class="far fa-edit fa-5x"></i>
</div>
I can't colorize the Font Awesome 5 icons using these codes. I tried fill css property for setting color but it didn't work.
HTML Code:
<div class="container mt200 icons">
<div class="col-md-3">
<div class="bggray2 text-center">
<i class="fas fa-microphone fa-5x"></i>
<div class="title">LOREM</div>
<div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</div>
</div>
</div>
<div class="col-md-3">
<div class="bggray2 text-center">
<i class="far fa-edit fa-5x"></i>
<div class="title">LOREM</div>
<div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
</div>
</div>
</div>
</div>
CSS Code:
.icons i {
color: #2759AE;
}
Font Awesome 5 uses svg for icons and path inside are set with fill:currentColor so simply change color of svg:
.icons svg {
color:#2759AE;
}
<script defer src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
<div class="container mt200 icons">
<div class="col-md-3">
<div class="bggray2 text-center">
<i class="fas fa-microphone fa-5x"></i>
<div class="title">LOREM</div>
<div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</div>
</div>
</div>
<div class="col-md-3">
<div class="bggray2 text-center">
<i class="far fa-edit fa-5x"></i>
<div class="title">LOREM</div>
<div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
</div>
</div>
</div>
</div>
As you can see in the code, the i are replaced with svg when you load the JS version:
You can apply color to i in case you are using the CSS version.
.icons i {
color:#2759AE;
}
<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet"><div class="container mt200 icons">
<div class="col-md-3">
<div class="bggray2 text-center">
<i class="fas fa-microphone fa-5x"></i>
<div class="title">LOREM</div>
<div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</div>
</div>
</div>
<div class="col-md-3">
<div class="bggray2 text-center">
<i class="far fa-edit fa-5x"></i>
<div class="title">LOREM</div>
<div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
</div>
</div>
</div>
</div>
So to make sure it will work in all the cases simply use both selector:
.icons i,
.icons svg {
color: #2759AE;
}
If you're using the svg-with-js version of Font Awesome 5 it takes everything in the <i></i> and preprocesses it into an <svg>. It specifies that the path has fill="currentColor" So, you have to set currentColor to the colour you want somehow. One option is:
svg {color: blue;}
The official docs recommend inline style:
<i class="far fa-edit fa-5x" style="color:blue"></i>
Or, set currentColor in one of the outer elements. For example:
<div class="bggray2 text-center" style="color: blue;">
<i class="far fa-edit fa-5x"></i>
</div>
And to move it to the CSS file, you could:
div .bggray2 {
color: blue;
}
If you are using Bootstrap 4 you can use and of the text-'color' settings in the parent of the tag.
<div class="bggray2 text-danger">
<i class="far fa-edit fa-5x"></i>
</div>
like this showing in the picture i am trying but nothing is happening what should i do?
slider
i am here
<div class="carousel-inner" role="listbox">
<div class="item active pic">
<div class="container1 container">
<h1>A WORLD OF TOMORROW </h1>
<h2>SEEKING INSPIRATION AND EQUILIBRIUM IAGE</h2>
<p>Bringing together members of the public with leaders and experts from around the globe to discuss emerging issues and envision a brighter future together</p>
</div>
<img src="img/SOT_banner1.jpg" >
</div>
<div class="item pic">
<div class="container1 container">
<h1>A WORLD OF TOMORROW </h1>
<h2>SEEKING INSPIRATION AND EQUILIBRIUM IN A NEW AGE</h2>
<p>11-12 March, 2017</p>
</div>
<img src="img/SOT_banner2.jpg" >
</div>
<div class="item pic">
<div class="container1 container">
<h1>A WORLD OF TOMORROW </h1>
<h2>SEEKING INSPIRATION AND EQUILIBRIUM IN A NEW AGE</h2>
<p>Pak-China Friendship Centre</p>
</div>
<img src="img/SOT_banner3.jpg" >
</div>
<div class="item pic">
<div class="container1 container">
<h1>A WORLD OF TOMORROW </h1>
<h2>SEEKING INSPIRATION AND EQUILIBRIUM IN A NEW AGE</h2>
<p>More than 40 panel discussions, debates, interactive workshops, performances and much, much more</p>
</div>
<img src="img/SOT_banner4.jpg" >
</div>
</div>
</div>
</div>
<!-- slider-->
css here
.container1{
position:absolute;
width:40%;
height:auto;
margin-top:150px;
text-align:center;}
.pic{
width:100%;
position:relative;}
.upper{
position:relative;
width:30%;
height:500px;
background-color:#F00;
float:right;}
The website you're trying to copy from is built on Joomla. So they're probably using Dj-imageslider as a slider along with Gk_university template. In order for this theme and plugin to work you need to install Joomla or find an alternative solution with another CMS (if you're after CMS).
The code you have provided is clearly lacking additional explanation.
If you're after just the slider have a look on Bootstrap carousel example. Here is the sample code to compliment the external link:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="http://cdn.images.express.co.uk/img/dynamic/128/590x/kittens-615454.jpg" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="http://cdn.images.express.co.uk/img/dynamic/128/590x/kittens-615454.jpg" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="item">
<img class="third-slide" src="http://cdn.images.express.co.uk/img/dynamic/128/590x/kittens-615454.jpg" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
</div>
</div>
i have a little big problem with a project in Bootstrap. I have two files with the same code: ctr+a to select all the code from the original file, ctrl+c to copy it then ctrl+v to paste it in the second file.
I'm currently using Bootstrap 3.
The result is this:
The original file is the one in the bottom half of the image and the copy is the one in the upper half.
Both files are in the same directory. The code is this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- <link rel="shortcut icon" href="../../assets/ico/favicon.png"> -->
<title>Navbar Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/mainhardt.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<!-- Static navbar -->
<div class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Associació d'Amics de Mainhardt</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Inici</li>
<li class="dropdown">
Publicacions <b class="caret"></b>
<ul class="dropdown-menu">
<li>Revistes</li>
<li>Llibres</li>
</ul>
</li>
<li>Intercanvi</li>
<li class="dropdown">
Jornades d'Estudis Gaspatxers <b class="caret"></b>
<ul class="dropdown-menu">
<li>I Jornades "El Carlisme a les nostres terres"</li>
<li>II Jornades "Memòries al voltant d'una guerra"</li>
<li>III Jornades "Retalls de cultura popular"</li>
</ul>
</li>
<li class="dropdown">
Gent d'ací <b class="caret"></b>
<ul class="dropdown-menu">
<li>Carme Vidal</li>
<li>Jorge Julve</li>
<li>Mar de fons</li>
</ul>
</li>
<li class="dropdown">
Exposicions <b class="caret"></b>
<ul class="dropdown-menu">
<li>Eclipse 1905</li>
<li>Cara a cara (Carme Vidal & Joan Sanz)</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron" style="background-color: #E3F6CE;">
<img class="img-responsive" src="img/LOGO GRANDE.png"/>
</div>
<!-- Carousel -->
<!-- consult Bootstrap docs at
http://twitter.github.com/bootstrap/javascript.html#carousel -->
<div id="this-carousel-id" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<a href="http://hubblesite.org/gallery/album/entire/pr2006046a/xlarge_web/npp/128/">
<img class="imagen-slider" src="img/slider/desembre2009.jpg" alt="Antennae Galaxies" />
</a>
<div class="carousel-caption">
<p>The Antennae Galaxies</p>
<p>Hubblesite.org »</p>
</div>
</div>
<div class="item">
<a href="http://hubblesite.org/gallery/album/entire/pr2007016e/xlarge_web/npp/128/">
<img class="imagen-slider" src="img/slider/abril2010.jpg" alt="Carina Caterpillar" />
</a>
<div class="carousel-caption">
<p>Carina Nebula: The Caterpillar</p>
<p>Hubblesite.org »</p>
</div>
</div>
<div class="item">
<a href="http://hubblesite.org/gallery/album/entire/pr2003010i/npp/128/">
<img class="imagen-slider" src="img/slider/cartelljornadesgaspatxeres2.jpg" alt="Light Echo" />
</a>
<div class="carousel-caption">
<p>Light Echo From Star V838 Monocerotis</p>
<p>Hubblesite.org »</p>
</div>
</div>
<div class="item">
<a href="http://hubblesite.org/gallery/album/entire/pr2006024a/xlarge_web/npp/128/">
<img src="img/ngc5866.jpg" alt="Galaxy NGC5866" />
</a>
<div class="carousel-caption">
<p>Galaxy NGC 5866</p>
<p>Hubblesite.org »</p>
</div>
</div>
</div><!-- .carousel-inner -->
<!-- next and previous controls here
href values must reference the id for this carousel -->
<a class="carousel-control left" href="#this-carousel-id" data-slide="prev">‹</a>
<a class="carousel-control right" href="#this-carousel-id" data-slide="next">›</a>
</div><!-- .carousel -->
<!-- end carousel -->
<div class="separador"></div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<div class="thumbnail">
<img class="img_small" src="img/Main%20trans.png" alt="...">
<div class="caption">
<ul class="nav nav-tabs">
<li class="active"><h2>Quí som?</h2></li>
</ul>
<br>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<div class="thumbnail">
<img class="img_small" src="img/Main%20trans.png" alt="...">
<div class="caption">
<ul class="nav nav-tabs">
<li class="active"><h2>Publicacions</h2></li>
</ul>
<br>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<div class="thumbnail">
<img class="img_small" src="img/Main%20trans.png" alt="...">
<div class="caption">
<ul class="nav nav-tabs">
<li class="active"><h2>Intercanvi</h2></li>
</ul>
<br>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
</div>
<div class="separador"></div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<div class="thumbnail">
<img class="img_small" src="img/Main%20trans.png" alt="...">
<div class="caption">
<ul class="nav nav-tabs">
<li class="active"><h3>Jornades d'estudis Gaspatxers</h3></li>
</ul>
<br>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<div class="thumbnail">
<img class="img_small" src="img/Main%20trans.png" alt="...">
<div class="caption">
<ul class="nav nav-tabs">
<li class="active"><h2>Gent d'ací</h2></li>
</ul>
<br>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<div class="thumbnail">
<img class="img_small" src="img/Main%20trans.png" alt="...">
<div class="caption">
<ul class="nav nav-tabs">
<li class="active"><h2>Exposicions</h2></li>
</ul>
<br>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
</div>
<div class="separador_grande"></div>
<div class="jumbotron" style="background-color: #333333;">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-3 contacte">
<h4>Contacte</h4>
<p class="contacte_info">
<img src="img/contacte.ico"> Associació d'amics de Mainhardt<br>
<img src="img/mail.ico"> correu#1and1.es<br>
<img src="img/tlf.ico"> tlf contacte<br>
</p>
</div>
<!-- Formulari Contacte
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 contacte">
<h2>Formulari de contacte</h2>
<form role="form">
<div class="form-group input-group-sm">
<label for="inputEmail1">Direcció e-mail</label>
<input type="email" class="form-control" id="inputEmail1" placeholder="e-mail">
</div>
<div class="form-group">
<label for="inputName">Nom</label>
<input type="text" class="form-control" id="inputName" placeholder="Nom">
</div>
<div class="form-group">
<label for="inputText">Missatge</label>
<textarea class="form-control" rows="3" id="inputText" placeholder="Missatge"></textarea>
</div>
<button type="submit" class="btn btn-default">Envia</button>
</form>
</div>
Fi Formulari Contacte -->
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 contacte">
<ul class="nav navbar-nav contacte_info menu_abajo">
<li><h4>Inici</h4></li>
<li>
<h4>Publicacions</h4>
<ul>
<li>Revistes</li>
<li>Llibres</li>
</ul>
</li>
<li><h4>Intercanvi</h4></li>
<li>
<h4>Jornades Gaspatxeres</h4>
<ul>
<li>I Jornades</li>
<li>II Jornades</li>
<li>II Jornades</li>
</ul>
</li>
<li>
<h4>Gent d'aci</h4>
<ul>
<li>Carme Vidal</li>
<li>Jorge Julve</li>
<li>Mar de fons</li>
</ul>
</li>
<li>
<h4>Exposicions</h4>
<ul>
<li>Eclipse 1905</li>
<li>Cara a Cara</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="separador_grande"></div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 contacte">
<p class="contacte_info copyright">Avís legal. Copyright </p>
</div>
</div>
</div>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script>
$(document).ready(function(){
$('.carousel').carousel({
interval: 4000
});
});
</script>
</body>
</html>
And this is the css with some modifications i made (mainhardt.css)
body
{
font-family: arial,helvetica,sans-serif;
background-color: rgb(255, 252, 229);
}
.container
{
background-color: #E3F6CE;
}
p{
text-align: justify;
}
.img_small
{
max-height: 100px;
max-width: 175px;
}
.contacte
{
color: #999;
}
.contacte_info
{
font-size: 12px;
}
.copyright
{
text-align: center;
}
.menu_abajo li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
.menu_abajo > li > ul > li
{
display: block;
}
.separador
{
margin-top: 30px;
margin-bottom: 30px;
}
.separador_grande
{
margin: 60px 0 60px 0;
}
.carousel-caption {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 10px 15px 5px;
background: #333333;
background: rgba(0, 0, 0, 0.75);
}
.carousel-caption h4,
.carousel-caption p {
color: #ffffff;
}
.imagen-slider
{
margin: 0 auto 0;
}
.carousel-inner
{
background-image: url(../img/glyphicons-halflings-white.png);
}
See the address bar in the second picture. You have zoomed out in the second picture...
Zooming in will solve your problem..