I'm trying to create a div which contains a text box with 3 columns with text and images below them. like in the first image I have attached. Including the lines that divide the and if possible the small question marks as well!
Currently this is where I am in image 2,
I have attached a JSFiddle file however it does not contain the images as they are not online:
https://jsfiddle.net/5xzg78je/
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="box">
<img src="iphone.png">
<div class="row">
<div class="column">How many would you like to insure <img src="10.png" class="textimage">
<br> Total value when new <img src="10000.png" class="textimage"><br> Would you like instant replacement <img src="replacement.png" class="textimage">
</div>
</div>
</div>
</div>
img.textimage
{
height:20px;
left:8rem;
position: absolute;
font-family: 'Raleway', sans-serif;
}
.images {
display: inline;
margin: 0px;
padding: 0px;
vertical-align:middle;
width:200px;
}
#content {
display: block;
margin: 0px;
padding: 0px;
position: relative;
top: 90px;
height: auto;
max-width: auto;
overflow-y: hidden;
overflow-x:auto;
word-wrap:normal;
white-space:nowrap;
height: 50px;
}
img.column {
height: 40px;
width: 100%;
position: relative;
padding: 0px;
margin: 0px;
}
img.row
{height:60px;
}
Try below one.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<style>
.box p i {position: absolute;padding-left: 5px;}
.box img {margin:0 auto;}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12 text-center">
<div class="box">
<i class="fa fa-address-book" aria-hidden="true"></i>
<h4>How many would you like to insure </h4>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
<h4>Total value when new</h4>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
<p>Would you like instant replacement <i class="fa fa-question-circle"></i></p>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 text-center">
<div class="box">
<i class="fa fa-address-book" aria-hidden="true"></i>
<h4>How many would you like to insure </h4>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
<h4>Total value when new</h4>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
<p>Would you like instant replacement <i class="fa fa-question-circle"></i></p>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 text-center">
<div class="box">
<i class="fa fa-address-book" aria-hidden="true"></i>
<h4>How many would you like to insure </h4>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
<h4>Total value when new</h4>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
<p>Would you like instant replacement <i class="fa fa-question-circle"></i></p>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
</div>
</div>
</div>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
I know this post is old, but here is a better solution.
Html:
<table>
<tr class="v-line">
//Content
</tr>
<tr class="v-line">
//Content
</tr>
<tr>
//Content
</tr>
</table>
CSS:
.v-line {
padding-right: 2em;
border-right: 1px solid rgb(185, 185, 185);
}
The v-line class is a bit dirty, but this is easy and basic HTML code.
Related
I'm building a website in Bootstrap but when I switch my website to a mobile responsive view some elements are bumping into each other like this.
That's how site looks in the large version.
I'm tried to add some media queries.
#media (max-width: 992px) {
/*Intro*/
.title {
font-size: 30px;
}
.title-text {
font-size: 12px;
}
.title-btn button {
padding: 10px 35px !important;
}
}
But elements still are bumping into each other when I switch to mobile responsive view.
My HTML code:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Intro -->
<section class="intro" id="intro">
<div class="container">
<div class="row">
<div class="col-lg-6 order-1 order-lg-2">
<img class="img-fluid" src="Img/Intro/Phone.png" alt="">
</div>
<div class=" col-lg-6 order-2 order-lg-1 title-block">
<div class="pre-title">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-award" viewBox="0 0 16 16">
<path d="M9.669.864L8 0 6.331.864l-1.858.282-.842 1.68-1.337 1.32L2.6 6l-.306 1.854 1.337 1.32.842 1.68 1.858.282L8 12l1.669-.864 1.858-.282.842-1.68 1.337-1.32L13.4 6l.306-1.854-1.337-1.32-.842-1.68L9.669.864zm1.196 1.193l.684 1.365 1.086 1.072L12.387 6l.248 1.506-1.086 1.072-.684 1.365-1.51.229L8 10.874l-1.355-.702-1.51-.229-.684-1.365-1.086-1.072L3.614 6l-.25-1.506 1.087-1.072.684-1.365 1.51-.229L8 1.126l1.356.702 1.509.229z"/>
<path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1 4 11.794z"/>
</svg>
<p>#1 Editiors Choice App of 2020</p>
</div>
<h1 class="title">
Best app for your
modern lifestyle
</h1>
<p class="title-text">
Increase productivity with a simple to-do app. app for
managing your personal budgets.
</p>
<div class="title-btn">
<button type="button" class="btn btn-primary">
Try for free
</button>
Watch demo video
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section class="features" id="features">
<div class="container">
<div class="companies">
<p class="companies-text">Trusted by companies like</p>
</div>
<div class="row companies-logos">
<div class="col-sm">
<img src="Img/Companies/SouthWest.png " class="img-fluid" alt="">
</div>
<div class="col-sm">
<img src="Img/Companies/Anubis.png" class="img-fluid" alt="">
</div>
<div class="col-sm">
<img src="Img/Companies/Alonzo.png" class="img-fluid" alt="">
</div>
<div class="col-sm">
<img src="Img/Companies/Express.png" class="img-fluid" alt="">
</div>
<div class="col-sm">
<img src="Img/Companies/Maniac.png" class="img-fluid" alt="">
</div>
</div>
</div>
</section>
The problem is that looks like structure of HTML in your footer section. Initializing the row div, you should have used "col" feature as you used. Your code looks like the same what I explain. However, there is a little bit difference compare to what i mention. In order to make it clear for you, i have build up this snippet for you. You need to use "col" feature on element that you want to layout . In your code, you used for container of image tags which is not the element you want to make it responsive. That is why you got bumping into each other. I wish that yoou figure it out. Cheers!
.box{
background-color: red;
width: 200px;
height: 200px;
display: inline-block;
}
.box-1{
background-color: yellow;
}
.box-2{
background-color: purple;
}
.box-3{
background-color: blue;
}
.box-4{
background-color: green;
}
.box-5{
background-color: lightpink;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"
rel="stylesheet"
/>
<title>stackover</title>
</head>
<body>
<section class="features" id="features">
<div class="container">
<div class="companies">
<p class="companies-text">Trusted by companies like</p>
</div>
<div class="row companies-logos">
<div class="col-lg-4 col-md-3 col-sm-6 box box-1">Logo-1</div>
<div class="col-lg-4 col-md-3 col-sm-6 box box-2">Logo-2</div>
<div class="col-lg-4 col-md-3 col-sm-6 box box-3">Logo-3</div>
<div class="col-lg-4 col-md-3 col-sm-6 box box-4">Logo-4</div>
<div class="col-lg-4 col-md-3 col-sm-6 box box-5">Logo-5</div>
</div>
</div>
</section>
</body>
</html>
I already tried different solutions posted here to get two columns with the same height, but unfortunately I can't get this to work. The Problem is, that I have three images, one on the left in "portrait mode" and two on the right in "landscape mode". I want both images together on the right to have the same height as the image on the left.
I think that this could be a solution, but I didn't get this to work: The two items on the right could each have a height of 50% of the div on the left. The images inside the item then should fill the height and have an auto width.
Like this:
Here is what my basic code looks so far: https://jsfiddle.net/qg7t976L/
.padding-0 {
padding: 0;
}
img {
width: 100%;
}
img {
border: 1px white solid;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="work" class="content">
<div class="container-fluid work-body">
<div class="row">
<div class="padding-0 col-sm-6">
<div class="work-inner">
<div class="work-item">
<img src="http://placehold.it/500x750" alt="work1">
</div>
<!--/.work-item-->
</div>
<!--/.work-inner-->
</div>
<div class="padding-0 col-sm-6">
<div class="padding-0 work-inner col-sm-12">
<div class="work-item">
<img src="https://placehold.it/450x250" alt="work2">
</div>
<!--/.work-item-->
</div>
<div class="padding-0 work-inner col-sm-12">
<div class="work-item">
<img src="https://placehold.it/500x250" alt="work3">
</div>
<!--/.work-item-->
</div>
</div>
</div>
</div>
<!--/.container-->
</div>
<!--/work-->
You can try with these code.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row row--equal">
<div class="col-md-6 no-padding">
<div class="item item--full-height">
<img src="https://i.stack.imgur.com/WS7U5.png" alt="">
</div>
</div>
<div class="col-md-6 item--half-height no-padding">
<div class="item ">
<img src="https://i.stack.imgur.com/cslWU.png" alt="">
</div>
<div class="item item--half-height">
<img src="https://i.stack.imgur.com/niAPD.png" alt="">
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
.row--equal{
display: flex;
}
.no-padding{
padding-left: 0px !important;
padding-right: 0px !important;
}
.item{
margin-right: 1px;
margin-bottom: 1px;
}
.item img{
width: 100%;
height: 100%;
}
.item--full-height{
height: 100%;
}
.item--half-height{
height: 50%;
}
I have a page where I'd like to have a row of circular images with text on them that can serve as links. I've figured out how to get this to work for the general case of a full sized webpage, but when I resize the width of the page, the text doesn't scale with the image because I have to use absolute positions. Here's the html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<a class= href="">
<img src="http://placehold.it/500x500" class="align-center img-responsive img-circle button-pic" />
<div class="button-caption">Button</div>
</a>
</div>
<div class="col-md-3">
<a class= href="">
<img src="http://placehold.it/500x500" class="align-center img-responsive img-circle button-pic" />
<div class="button-caption">Button</div>
</a>
</div>
<div class="col-md-3">
<a class= href="">
<img src="http://placehold.it/500x500" class="align-center img-responsive img-circle button-pic" />
<div class="button-caption">Button</div>
</a>
</div>
<div class="col-md-3">
<a class= href="">
<img src="http://placehold.it/500x500" class="align-center img-responsive img-circle button-pic" />
<div class="button-caption">Button</div>
</a>
</div>
</div>
</div>
</body>
</html>
Here's the main.css page...
body {
max-width: 900px;
margin: 0 auto;
}
.container {
width: 100%;
}
.button-pic {
opacity: 0.4;
position: relative;
}
.button-caption {
text-align: center;
position: absolute;
top: 87px;
left: 85px;
}
I'd like to find a way to not have to set the top and left positions of the button-caption since not all of my labels will be the same length. Anyone have advice to offer?
If you want your text position to remain consistent to the image you'll need to use percentages instead of setting a fixed amount of pixels for the position since the images are responsive.
See working Snippet.
.content {
max-width: 900px;
margin: auto;
}
.button-pic {
opacity: 0.4;
position: relative;
margin: auto;
}
.button-caption {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<a href="#">
<img src="http://placehold.it/500x500" class="img-responsive img-circle button-pic" />
<span class="button-caption">Just a Button</span>
</a>
</div>
<div class="col-md-3">
<a href="#">
<img src="http://placehold.it/500x500" class="img-responsive img-circle button-pic" />
<span class="button-caption">Button</span>
</a>
</div>
<div class="col-md-3">
<a href="#">
<img src="http://placehold.it/500x500" class="img-responsive img-circle button-pic" />
<span class="button-caption">Just a Really Very Pretty Long Label for a Button</span>
</a>
</div>
<div class="col-md-3">
<a href="#">
<img src="http://placehold.it/500x500" class="img-responsive img-circle button-pic" />
<span class="button-caption">A Button</span>
</a>
</div>
</div>
</div>
</div>
Following the TutsPlus Power Up Your Portfolio With Bootstrap tutorial.
Trying to implement a 3 column portfolio with Bootstrap 3's col-sm-4 class , to get something like:
Instead, here is what I get:
And here is what I get when I zoom out:
HTML code:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<nav class="navbar">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Red Beluga</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid text-center">
<div class="jumbotron">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<h1>Hello, welcome to Red Beluga's lab.</h1>
<p class="lead">
We build simple web apps.
</p>
</div>
</div>
</div>
</div>
<div class="container-fluid filterable-portfolio">
<div class="row">
<div class="col-md-12">
<ul class="nav nav-pills">
<li class="portfolio-title">Filter by:</li>
<li role="presentation" class="active">All</li>
<li role="presentation">Animation</li>
<li role="presentation">Design</li>
<li role="presentation">Photography</li>
<li role="presentation">Web</li>
</ul>
</div>
</div>
<div class="row portfolio-items">
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/700/400" class="img-responsive">
</a>
</figure>
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/701/400" class="img-responsive">
</a>
</figure>
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/700/400" class="img-responsive">
</a>
</figure>
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/701/400" class="img-responsive">
</a>
</figure>
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/700/400" class="img-responsive">
</a>
</figure>
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/701/400" class="img-responsive">
</a>
</figure>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
</body>
</html>
CSS code:
#import 'main.css';
#import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700);
#import url(http://fonts.googleapis.com/css?family=Abril+Fatface);
html{
background: #222 url(../img/abstract-bg.svg) bottom right no-repeat;
height: 100%;
background-attachment: fixed;
overflow-y: scroll;
}
body{
background: none;
line-height: 1.5;
color: #F5F5F5;
font-family: 'Source Sans Pro', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Abril Fatface', cursive;
margin-top: 0;
}
p {
margin-bottom: 1rem;
}
.navbar-brand, .navbar-nav>li>a{
color: #F5F5F5;
font-weight: bold;
}
.navbar-brand:hover, .navbar-nav>li>a:hover{
color: #F5F5F5;
font-weight: bold;
background: none;
}
.navbar-nav>li>a:after{
content: '/';
margin-left: 30px;
}
.navbar-nav>li:last-child>a:after{
content: '';
}
.navbar-toggle{
background: #111;
}
.navbar-toggle .icon-bar{
background: #F5F5F5;
}
#media (max-width: 768px) {
.navbar-nav>li>a:after{
content: '';
}
.navbar-nav>li>a{
background: #111;
border-radius: 4px;
margin-bottom: 3px;
}
}
.container .jumbotron, .container-fluid .jumbotron{
padding-left: 0;
padding-right: 0;
}
.jumbotron{
background: none;
margin-top: 75px;
margin-bottom: 75px;
}
.jumbotron h1 {
font-size: 120px;
}
.jumbotron .lead {
font-size: 32px;
}
#media (max-width: 992px) {
.jumbotron h1{
font-size: 72px;
}
}
#media (max-width: 768px) {
.jumbotron h1{
font-size: 40px;
}
.jumbotron .lead {
font-size: 20px;
}
}
.portfolio-title{
padding: 10px 15px 10px 0px;
font-weight: bold;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
color: #F5F5F5;
background: #111;
}
.nav-pills a {
color: #F5F5F5;
margin-bottom: 1rem;
}
.nav>li>a:focus, .nav>li>a:hover{
background: none;
}
.portfolio-item {
margin-bottom: 1rem;
}
.portfolio-item img{
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
border-radius: 4px;
}
.portfolio-item:hover img{
-webkit-filter: grayscale(50%);
filter: grayscale(50%);
}
.filterable-portfolio{
margin-bottom: 3rem;
}
Any idea what I am doing wrong?
Your problem lies in the styling being applied to the figure tag element by the normalize.css (some additional margins in the variety of 1em for margin-top and 40px for margin-right, causing your content to be wider than Bootstrap's 33.3% width for the col-sm-4 divs). Either switch your figure elements to divs or provide a superseding value to the figure tags that eliminates the behavior applied by normalize. Here's what I mean:
[Edit]
For a better view of the gif, check it out in a different tab. I captured it at a higher resolution than looks good here.
Here's the link to the plnkr I generated from the above code.
The reason AngularJR's answer works is because he didn't just use a CDN of Bootstrap, he also shuffled the order the CSS loads in, by placing Bootstrap's CSS after the normalize.css, making it inherit Bootstrap's last (and superseding).
[/Edit]
you need to wrap col-sm-4 in rows,
change this part and use rows every 3 col-sm-4 as wrappers;
the grid uses as 12th system column, check bootstrap grid
<div class="row portfolio-items">
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/700/400" class="img-responsive">
</a>
</figure>
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/701/400" class="img-responsive">
</a>
</figure>
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/700/400" class="img-responsive">
</a>
</figure>
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/701/400" class="img-responsive">
</a>
</figure>
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/700/400" class="img-responsive">
</a>
</figure>
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/701/400" class="img-responsive">
</a>
</figure>
</div>
to:
<div class="row portfolio-items">
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/700/400" class="img-responsive">
</a>
</figure>
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/701/400" class="img-responsive">
</a>
</figure>
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/700/400" class="img-responsive">
</a>
</figure>
</div><!-- closing first row -->
<div class="row portfolio-items">
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/701/400" class="img-responsive">
</a>
</figure>
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/700/400" class="img-responsive">
</a>
</figure>
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/701/400" class="img-responsive">
</a>
</figure>
</div><!-- closing sec row -->
</div>
you need to set your col-sm-4 div's into another col-md-12 div otherwise it will be setting 33.3% of your total page width and make everything look goofy.
The markup for a 3 column layout is:
<div class="row>
<div class="col-md-4">...cat1...</div>
<div class="col-md-4">...cat2...</div>
<div class="col-md-4">...cat3...</div>
</div>
<div class="row>
<div class="col-md-4">...professor puddinpop...</div>
<div class="col-md-4">...colonel snazzypants...</div>
<div class="col-md-4">...the good king snugglewumps...</div>
</div>
<div class="row">
...
</div>
This will ensure you have 3 columns before stacking when the screen becomes small enough.
See the bootstrap docs on grids for more info.
Thibaud Clement, It looks like you may have a issue coming from your custom css.
When I added a cdn Bootstrap css to your code it works fine.
Take a look here at the Fiddle.
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
Added to this
It looked like your issue may have come from the normalize.cssgoing by another post. Which I thought was onto the right track here. I added a cdn for normalize.cssbut your code still works fine.
As you will see in this updated Fiddle.
I'm trying to list some images, and for each image I want to have a caption, with some details, let's say the title, the problem right now is that the width of the caption is relative to the parent div which is normal, but I want it to be relative to the image width, but since I have the class img-responsive on the img I don't know how to achive this. Maybe you guys can help me out.
Here is a live example: http://jsbin.com/cudugize/1/edit?html,css,output
Here is the code
HTML
<div class="col-sm-3 col-xs-6 col-md-2 col-lg-3">
<div class="thumbnail">
<img width="139" height="161" src="http://lorempixel.com/139/161/nightlife/" class="img-responsive" alt="...">
<div class="caption img-responsive">
<h4 class="text-center">Nice title</h4>
<p class="text-center"><span class="glyphicon glyphicon-globe"></span> usa</p>
</div>
</div>
<div class="thumbnail">
<img width="139" height="161" src="http://lorempixel.com/139/161/nightlife/" class="img-responsive" alt="...">
<div class="caption img-responsive">
<h4 class="text-center">Nice title</h4>
<p class="text-center"><span class="glyphicon glyphicon-globe"></span> usa</p>
</div>
</div>
</div>
CSS
Aditional bootstrap core css
.thumbnail{
position: relative;
width: 100%;
border: none !important;
}
.thumbnail .caption{
position: absolute;
bottom: 0px;
background: rgba(0,0,0,0.50);
width: 100%;
padding: 0px !important;
}
http://jsbin.com/cudugize/7
please see my demo code, it archived your demand.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.tc {
text-align:center;
}
.thumbnail {
position: relative;
display:inline-block;
*display:inline;
*zoom:1;
border: none;
margin:0 auto;
padding:0;
}
.thumbnail .caption {
position: absolute;
bottom: 0px;
background: rgba(0, 0, 0, 0.50);
width: 100%;
padding: 0px !important;
}
</style>
</head>
<body>
<div class="col-sm-3 col-xs-6 col-md-2 col-lg-3">
<div class="tc">
<div class="thumbnail">
<a href="url">
<img width="139" height="161" src="http://lorempixel.com/139/161/nightlife/" class="img-responsive" alt="...">
</a>
<div class="caption img-responsive">
<h4 class="text-center">Nice title
</h4>
<p class="text-center">
<a href="#" class="homepage city text-uppercase">
<span class="glyphicon glyphicon-globe"></span>usa</a>
</p>
</div>
</div>
</div>
<div class="tc">
<div class="thumbnail">
<a href="url">
<img width="139" height="161" src="http://lorempixel.com/139/161/nightlife/" class="img-responsive" alt="...">
</a>
<div class="caption img-responsive">
<h4 class="text-center">Nice title
</h4>
<p class="text-center">
<a href="#" class="homepage city text-uppercase">
<span class="glyphicon glyphicon-globe"></span>usa</a>
</p>
</div>
</div>
</div>
</div>
</body>
</html>
This CSS should do the trick:
.thumbnail {
display: inline-block;
position: relative;
border: none !important;
padding: 0;
}
.thumbnail .caption{
position: absolute;
bottom: 0px;
background: rgba(0,0,0,0.50);
width: 100%;
padding: 0px !important;
}