How to make the caption of a Twitter Bootstrap thumbnail be placed to the right of the image instead of below? Preferably in CSS. So far I am just using existing tags as my css knowledge is very limited.
<ul class="thumbnails">
<li class="span2">
<div class="thumbnail span4">
<div class="span2">
<img src="http://placehold.it/120x160" alt="">
</div>
<div class="caption">
<h5>Thumbnail label </h5>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget. Eget metus</p>
<p>Action Action</p>
</div>
</div>
</li>
</ul>
With a slight modification of your HTML, and the addition of a new class (right-caption), a few CSS rules should cover you.
HTML
<div class="thumbnail right-caption span4">
<img src="http://placehold.it/120x160" alt="">
<div class="caption">
<h5>Thumbnail label</h5>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget. Eget metus</p>
<p>Action Action</p>
</div>
</div>
Note: I'm taking the <img> out of the <div> you originally wrapped it in.
CSS
.thumbnail.right-caption > img {
float: left;
margin-right: 9px;
}
.thumbnail.right-caption {
float: left;
}
.thumbnail.right-caption > .caption {
padding: 4px;
}
Note: The margin and padding are just stylistic; floating is the key.
JSFiddle
No additional css. Change a/span tags to div if needed
<a href="..." class="thumbnail clearfix">
<img src="..." class="pull-left">
<span class="caption pull-right">
Lorem ipsum
</span>
</a>
Related
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>
Re: Bootstrap 3.3.5 in Wordpress
I have not seen this issue before. All I want to do is align 3 x .col-md-4 .wells inside a row, but they just won't align. The first div is always a bit higher; see screenshot.
This is the code:
<div class="row">
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-4 col-md-offset-0 col-lg-4 col-lg-offset-0 text-center">
<a class="page-scroll" href="#how-to"><div class="home-plans well">
<br/>
<h2>1.</h2>
<p class="lead text-left">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.p>
</div> <!-- /well --></a>
</div> <!-- /col-md-4 -->
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-4 col-md-offset-0 col-lg-4 col-lg-offset-0 text-center">
<div class="home-plans well">
<br />
<h2>2.</h2>
<p class="lead text-left">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.p>
</div> <!-- /well -->
</div> <!-- /col-md-4 -->
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-4 col-md-offset-0 col-lg-4 col-lg-offset-0 text-center">
<div class="home-plans well">
<br />
<h2>3.</h2>
<p class="lead text-left">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.</p>
</div> <!-- /well -->
</div> <!-- /col-md-4 -->
</div>
Using f12 tools in explorer, the issue seems to be the below CSS code styling the row:
/*media all*/
.btn-group-vertical > .btn-group::after, .btn-group-vertical > .btn-group::before, .btn-toolbar::after, .btn-toolbar::before, .clearfix::after, .clearfix::before, .container-fluid::after, .container-fluid::before, .container::after, .container::before, .dl-horizontal dd::after, .dl-horizontal dd::before, .form-horizontal .form-group::after, .form-horizontal .form-group::before, .modal-footer::after, .modal-footer::before, .nav::after, .nav::before, .navbar-collapse::after, .navbar-collapse::before, .navbar-header::after, .navbar-header::before, .navbar::after, .navbar::before, .pager::after, .pager::before, .panel-body::after, .panel-body::before, .row::after, .row::before {
display: table;
content: " ";
}
This page is in Wordpress. I have tried the same code in a normal HTML page and the .well .col-md-4s align OK.
To get the cols to align I can just remove the row, but I want to use rows.
This has been killing me for nearly one day now. I have done loads of research and tried using clearfix and clear: both all over without joy. Can anyone shed some light on this please?
Edit: I also note that the two rows in the footer section are causing the page footer to have a scroll bar? So, I have had to remove those rows too. It seems that I can't use rows in Wordpress with Bootstrap anymore for some reason.
Hmm, it's really tricky to say without seeing more of the CSS but have you tried reformatting your first div as follows:
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-4 col-md-offset-0 col-lg-4 col-lg-offset-0 text-center">
<div class="home-plans well">
<a class="page-scroll" href="#how-to">
<br/>
<h2>1.</h2>
<p class="lead text-left">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.p>
</a>
</div> <!-- /well -->
</div> <!-- /col-md-4 -->
Then styling the inner anchor element as follows:
CSS:
.well > a {
display: block;
}
I'd guess that it's something to do with the anchor element wrapping around the .well div?
I have a section of a website that has 2 rows inside a container, both rows have 3 columns of class col-sm-4 and col-md-4. Both rows have 1 image in each column. All images are exactly the same size at 300px wide. The top row displays accurately, the bottom row condenses the 3 columns and leave a big area of wide space on the right side. When using the inspector, The top row columns are appearing as class col-md-4, but the buttom row columns are showing as col-sm-4. I'm not sure if this is whats causing it. I should mention also that the top row columns have paragraphs below each image. When adding the exact same paragraph content to the bottom row in just 1 column, the issue is resolved, but I don't want paragraphs here. I checked out the bootstrap CSS and my own to try and find some sore of style on <p> that could be causing this but couldn't find anything. Each row, and column have the exact same CSS. The code is below:
HTML:
<div class="wrapper">
<div class="row customer-options">
<div class="button-container">
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="images/button-icon-map2.png" alt="">
<h2>Title 1</h2>
<p>These marketing boxes are a great place to put some information. These can contain summaries of what the company does, promotional information, or anything else that is relevant to the company. These will usually be below-the-fold.</p>
</div>
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="images/button-icon-pref2.png" alt="">
<h2>Title 2</h2>
<p>The images are set to be circular and responsive. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
</div>
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="images/button-icon-add2.png" alt="">
<h2>Title 3</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
</div>
</div>
</div><!-- /.row -->
</div><!--wrapper-->
<hr>
<div class="wrapper">
<div class="row tap">
<div class="tap-container">
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="images/beer-tap.png" alt="">
<h2>About</h2>
</div>
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="images/beer-tap.png" alt="">
<h2>Services</h2>
</div>
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="images/beer-tap.png" alt="">
<h2>Contact</h2>
</div>
</div>
</div><!-- /.row -->
</div><!--wrapper-->
CSS:
.wrapper {
display: table;
}
.button-container {
padding-right: 15px;
padding-left: 15px;
}
.customer-options {
background-color: #848487;
padding-top: 20px;
height:100vh;
display: table-cell;
vertical-align: middle;
}
.tap {
background-color: #848487;
padding-top: 20px;
height:100vh;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.tap-container {
padding-right: 15px;
padding-left: 15px;
}
.customer-options h2 {
text-align: center;
}
The display table and table-cell are taking precedence over the responsive image. Tables fit their content then the img-responsive will fill the new width. You can probably find a work around to achieve vertical alignment but I recommend dropping the table system and properly use bootstrap's grid system. Then you can use flexboxes to get vertical alignment.
http://jsfiddle.net/28qq8fm3/
<style>
.customer-options {
background-color: #848487;
padding-top: 20px;
vertical-align: middle;
}
.tap {
background-color: #848487;
padding-top: 20px;
vertical-align: middle;
text-align: center;
}
.customer-options h2 {
text-align: center;
}
</style>
<div>
<div class="row customer-options">
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="https://beccasheppard.files.wordpress.com/2011/09/football.jpg" alt="">
<h2>Title 1</h2>
<p>These marketing boxes are a great place to put some information. These can contain summaries of what the company does, promotional information, or anything else that is relevant to the company. These will usually be below-the-fold.</p>
</div>
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="https://beccasheppard.files.wordpress.com/2011/09/football.jpg" alt="">
<h2>Title 2</h2>
<p>The images are set to be circular and responsive. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
</div>
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="https://beccasheppard.files.wordpress.com/2011/09/football.jpg" alt="">
<h2>Title 3</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
</div>
</div>
<!-- /.row -->
</div>
<!--wrapper-->
<hr>
<div>
<div class="row tap">
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="http://www.cozadschools.net/wp-content/uploads/2015/02/football.png" alt="">
<h2>About</h2>
</div>
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="http://www.cozadschools.net/wp-content/uploads/2015/02/football.png" alt="">
<h2>Services</h2>
</div>
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="http://www.cozadschools.net/wp-content/uploads/2015/02/football.png" alt="">
<h2>Contact</h2>
</div>
</div>
<!-- /.row -->
</div>
<!--wrapper-->
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..
Hi I am trying to make a carousel on my wordpress website with bootstrap. I would like to put four block links next to it. I have the blocks there and the images are scrolling fine, However I believe the carousel is changing the height of the image.
I have images (640 x 360) and I made the 4 blocks 90 pixels high. I did this so the blocks would be flush with the bottom of the carousel. Except the blocks are too big. I don't understand what the problem could be. And I have searched through all of the CSS.
Here is my code:
<!--==========================================-->
<!-- Carousel -->
<!--==========================================-->
<div>
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<!--Carousel item 1-->
<div class="item active">
<img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/ej-manuel.png" alt="buffalo-skyline" width="640" height="360" />
<div class="carousel-caption">
<h4>First Thumbnail label</h4>
<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>
<!--Carousel item 2-->
<div class="item">
<img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/image3.jpg" width="640" height="360" />
<div class="carousel-caption">
<h4>Second Thumbnail label</h4>
<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>
<!--Carousel item 3-->
<div class="item">
<img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/images.jpg" alt="the-buzz-img3" width="640" height="360" >
<div class="carousel-caption">
<h4>Third Thumbnail label</h4>
<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>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
<!--==========================================-->
<!-- Side Buttons -->
<!--==========================================-->
<div>
<ul class="nav nav-tabs nav-stacked">
<li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 1</a></li>
<li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 1</a></li>
<li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 4</a></li>
<li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 5</a></li>
</ul>
</div>
The reason why your image is resizing which is because it is fluid. You have two ways to do it:
Either give a fixed dimension to your image using CSS like:
.carousel-inner > .item > img {
width:640px;
height:360px;
}
A second way to can do this:
.carousel {
width:640px;
height:360px;
}
add this to your css:
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
width: 100%;
}
Put the following code in your CSS, this works with Bootstrap 4:
.w-100 {
width: 100% !important;
height: 75vh;
}
I had the same problem. You have to use all the images with same height and width. you can simply change it using paint application from windows using the resize option in the home section and then use CSS to resize the image. Maybe this problem occurs because the the width and height attribute inside the tag is not responding.
Put the following code into head section in your web page programming.
<head>
<style>.carousel-inner > .item > img { width:100%; height:570px; } </style>
</head>
replace your image tag with
<img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/images.jpg" alt="the-buzz-img3" style="width:640px;height:360px" />
use style attribute and make sure there is no css class for image which set image height and width
Use this code to set height of the image slider to the full screen / upto 100 view port height. This will helpful when using bootstrap carousel theme slider.
I face some issue with height the i use following classes to set image width 100% & height 100vh.
<img class="d-block w-100" src="" alt="" > use this class in image tags & write following css code in style tags or style.css file
.carousel-inner > .carousel-item > img {
height: 100vh;
}
Give class img-fluid to your div carousel-item.Finally it will be:
<div class="carousel-item active img-fluid">
<img class="d-block w-100" src="path to image" alt="First slide">
</div>
This worked for me, max-height allows the images to auto adjust instead of cropping them
<div class="carousel-item">
<img src="image-link" class="d-block w-100" alt="image" style="max-height:100vh;">
</div>
Had the same problem and none of the CSS solutions presented here worked.
What worked for me was setting up a height="360" without setting any width. My photos aren't the same size and like this they have room to adjust their with but keep the height fixed.
This css is work for me # Bootstrap 5 (You can change width & height)
.carousel-inner > .carousel-item > img {
width:640px;
height:360px;
}
i had this issue years back..but I got this. All you need to do is set the width and the height of the image to whatever you want..what i mean is your image in your carousel inner ...don't add the style attribut like "style:"(no not this) but something like this and make sure your codes ar correct its gonna work...Good luck