I am having trouble with a bootstrap accordion. I would like the accordion to open a specific section and then close all other sections so to leave the focus only ever on one accordion box. I have a nested accordion also which I am thinking is causing some problems.
HTML
<div class="panel panel-group" id="accordion">
<div class="panel panel-default">
<div class="brown panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#col_1">
Accordion #1
</a>
</h4>
</div>
<div id="col_1" class="panel-collapse collapse in">
<div class="panel-body">
<div class="panel panel-default">
<div class="pink panel-heading">
<h4 class="panel-title" style="font-size: 14px;">
<a class="accordion-toggle2" data-toggle="collapse" data-parent="#col_2" href="#col_2">
Accordion #sub1
</a>
</h4>
</div>
<div id="col_2" class="panel-collapse collapse">
<div class="panel-body">
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="pink panel-heading">
<h4 class="panel-title" style="font-size: 14px;">
<a class="accordion-toggle2" data-toggle="collapse" data-parent="#col_3" href="#col_3">
Accordion #sub2
</a>
</h4>
</div>
<div id="col_3" class="panel-collapse collapse">
<div class="panel-body">
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="pink panel-heading">
<h4 class="panel-title" style="font-size: 14px;">
<a class="accordion-toggle2" data-toggle="collapse" data-parent="#col_4" href="#col_4">
Accordion #sub3
</a>
</h4>
</div>
<div id="col_4" class="panel-collapse collapse">
<div class="panel-body">
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="brown panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#col_7">
Accordion #2
</a>
</h4>
</div>
<div id="col_7" class="panel-collapse collapse">
<div class="panel-body">
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="brown panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#col_8">
Accordion #3
</a>
</h4>
</div>
<div id="col_8" class="panel-collapse collapse">
<div class="panel-body">
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
</div>
</div>
</div>
Your child Accordion items aren't collapsing because you're setting data-parent to their own individual boxes. If you apply an ID of accordion-sub to .panel-body and then change your data-parent to match you'll achieve something functional.
http://www.bootply.com/fceay0SjKE
In your markup, div elements are not closing properly. And 2nd data-parent attribute of inner accordion is also incorrect. I've closed them properly and accordion is working.
Read more about Bootstrap Accordion Example and apply it carefully.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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 class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="brown panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#col_1">
Accordion #1
</a>
</h4>
</div>
<div id="col_1" class="panel-collapse collapse in">
<div class="panel-body">
<div class="panel-group" id="accordion-inner" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="pink panel-heading">
<h4 class="panel-title" style="font-size: 14px;">
<a class="accordion-toggle2" data-toggle="collapse" data-parent="#accordion-inner" href="#col_2">
Accordion #sub1
</a>
</h4>
</div>
<div id="col_2" class="panel-collapse collapse">
<div class="panel-body">
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="pink panel-heading">
<h4 class="panel-title" style="font-size: 14px;">
<a class="accordion-toggle2" data-toggle="collapse" data-parent="#accordion-inner" href="#col_3">
Accordion #sub2
</a>
</h4>
</div>
<div id="col_3" class="panel-collapse collapse">
<div class="panel-body">
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="pink panel-heading">
<h4 class="panel-title" style="font-size: 14px;">
<a class="accordion-toggle2" data-toggle="collapse" data-parent="#accordion-inner" href="#col_4">
Accordion #sub3
</a>
</h4>
</div>
<div id="col_4" class="panel-collapse collapse">
<div class="panel-body">
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="brown panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#col_7">
Accordion #2
</a>
</h4>
</div>
<div id="col_7" class="panel-collapse collapse">
<div class="panel-body">
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="brown panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#col_8">
Accordion #3
</a>
</h4>
</div>
<div id="col_8" class="panel-collapse collapse">
<div class="panel-body">
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
</div>
</div>
</div>
</div>
Do you have the following scripts and styles in your code?
Put these in the of your HTML or add wherever you need to and it should work like a charm. I tested on my local by having all that code, the bootstrap code really helps it along!
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
$( function() {
$( "#accordion" ).accordion();
} );
</script>
Related
I try to build a landing page using bootstrap.
I created a section with icon and tags.
but the text in p and h3 tags look like this
here is code for section:
<section id="process" class="process">
<div class="container-fluid container-fluid-max">
<div class="row text-center py-5 ">
<div class="col-12 pb-4">
<h2 class="text-red">Lorem, ipsum dolor.</h2>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="col-12 col-sm-6 col-lg-3 pl-12 pr-12 ml-13 mr-13">
<span class="fa-stack fa-2x">
<i class="fas fa-book"></i>
</span>
<h3 class="mt-3 text-red h4">Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="col-12 col-sm-6 col-lg-3">
<span class="fa-stack fa-2x">
<i class="fas fa-school"></i>
</span>
<h3 class="mt-3 text-red h4">Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="col-12 col-sm-6 col-lg-3">
<span class="fa-stack fa-2x">
<i class="fas fa-school"></i>
</span>
<h3 class="mt-3 text-red h4">Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="col-12 col-sm-6 col-lg-3">
<span class="fa-stack fa-2x">
<i class="fas fa-school"></i>
</span>
<h3 class="mt-3 text-red h4">Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
</div>
</div>
</section>
i want to mage text be in one or 2 lines.
Correct you code, you have doubles of blocks width class="col-12 col-sm-6 col-lg-3", do like this
<section id="process" class="process">
<div class="container-fluid container-fluid-max">
<div class="row text-center py-5 ">
<div class="col-12 pb-4">
<h2 class="text-red">Lorem, ipsum dolor.</h2>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<span class="fa-stack fa-2x">
<i class="fas fa-book"></i>
</span>
<h3 class="mt-3 text-red h4">Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<span class="fa-stack fa-2x">
<i class="fas fa-school"></i>
</span>
<h3 class="mt-3 text-red h4">Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<span class="fa-stack fa-2x">
<i class="fas fa-school"></i>
</span>
<h3 class="mt-3 text-red h4">Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<span class="fa-stack fa-2x">
<i class="fas fa-school"></i>
</span>
<h3 class="mt-3 text-red h4">Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
</div>
</section>
This is because you have declared columns inside columns.
<div class="col-12 col-sm-6 col-lg-3">
<div class="col-12 col-sm-6 col-lg-3">
----
</div>
</div>
In the above code, 2nd div will be taking 3 columns space of 1st div in large screens(col-lg-3) and 6 columns space in small screens(col-sm-6). It won't take complete column width of 1st div
Can't figure out how to align this item like on photo
Making a web design from my prototype, but stacked here, tried many variations, couldn't figure out, this is what I've got.
If you can help somehow, it is would great.[this is how it should look like1.
<div class="container-fluid bg-light">
<div class="container">
<div class="row">
<div class="col">
<h1 class="text-center pqetitle">¿Por qué elegirnos?</h1>
<h3 class="text-center pqetxt">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
</div>
</div>
<div class="row">
<div class="col">
<h1 class="text-left pqesbtitle">Garantizar </h1>
<img class="text-right pqeicn" src="./img/quienes_somos/Garantizar_icon.png" alt="">
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.</p>
</div>
<div class="col">
<h1 class="text-left pqesbtitle">Soporte</h1>
<img class="text-right pqeicn" src="./img/quienes_somos/Soporte_Tecnico_icon.png" alt="">
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.</p>
</div>
</div>
<div class="row">
<div class="col text-center">
<img class="pqeimg"src="./img/quienes_somos/pic_por_que_elegirnos.png" alt="">
</div>
</div>
<div class="row">
<div class="col">
<h1 class="text-left pqesbtitle">Instalación</h1>
<img class="text-right pqeicn" src="./img/quienes_somos/Instalacion_icon.png" alt="">
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.</p>
</div>
<div class="col">
<h1 class="text-left pqesbtitle">Innovaciones</h1>
<img class="text-right pqeicn" src="./img/quienes_somos/Innovations_icon.png" alt="">
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
I guess you are using Bootstrap.
Have a look, maybe this is what you are looking for :)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid bg-light">
<div class="container">
<div class="row">
<div class="col" style="text-align: center;">
<h1 class="text-center pqetitle">¿Por qué elegirnos?</h1>
<h3 class="text-center pqetxt">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="row">
<div class="col-xs-12">
<div class="mini-box">
<h1 class="text-left pqesbtitle">Garantizar </h1>
<img class="text-right pqeicn" src="./img/quienes_somos/Garantizar_icon.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="col-xs-12">
<div class="mini-box">
<h1 class="text-left pqesbtitle">Soporte</h1>
<img class="text-right pqeicn" src="./img/quienes_somos/Soporte_Tecnico_icon.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="big-box text-center">
<img class="pqeimg" src="./img/quienes_somos/pic_por_que_elegirnos.png" alt="">
</div>
</div>
<div class="col-xs-4">
<div class="row">
<div class="col-xs-12">
<div class="mini-box">
<h1 class="text-left pqesbtitle">Instalación</h1>
<img class="text-right pqeicn" src="./img/quienes_somos/Instalacion_icon.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="col-xs-12">
<div class="mini-box">
<h1 class="text-left pqesbtitle">Innovaciones</h1>
<img class="text-right pqeicn" src="./img/quienes_somos/Innovations_icon.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<div class="container-fluid">
<div class="row justify-content-md-center text-center">
<div class="col-md-12">
<h1>Odaberi Paket</h1>
</div>
<div class="col-12">
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="col-xl-3 cl-md-3">
<div class="pricing-table">
<div class="panel panel-primary">
<div class="controle-header panel-heading panel-heading-landing">
<span class="price-value">150<span class="currency">EUR</span></span>
<h3 class="panel-title panel-title-landing">Pocetni Paket</h3>
</div>
<div class="panel-body panel-body-landing">
<table class="table">
<p>Lorem ipsum dolor <br>sit amet, consectetur adipiscing elit.</p>
</table>
</div>
<div class="panel-footer panel-footer-landing">
Odaberi
</div>
</div>
</div>
<img class="saksijica" src="np-assets/images/saksijica.png">
</div>
<div class="col-xl-3 cl-md-3">
<img class="cat" src="np-assets/images/maca.png">
<div class="pricing-table">
<div class="panel panel-primary">
<div class="controle-header panel-heading panel-heading-landing">
<span class="price-value">150<span class="currency">EUR+DODACI</span></span>
<h3 class="panel-title panel-title-landing">Pro Paket</h3>
</div>
<div class="panel-body panel-body-landing">
<table class="table">
<p>Lorem ipsum dolor <br>sit amet, consectetur adipiscing elit.</p>
</table>
</div>
<div class="panel-footer panel-footer-landing">
Odaberi
</div>
</div>
</div>
</div>
</div>
</div>
Newbie here.
I have a problem aligning pricing tables and centering them, and on top of all that there should be a picture on the down left corner of left pricing table and on the top of the right should be also a picture.
Here is my code someone help me to mension there should be no padding between them.
I have a Bootstrap 4 grid that has one column that is 9 units and one column that is 3 units but the 9 unit column is not taking up 3/4 of the page width as it should.
The html looks like this:
.features-image2 {
max-width: 140px;
min-width: 140px;
width: 140px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="services" class="container-fluid text-center">
<div class="row text-center">
<div class="col-sm-9 ">
<div class="row">
<div class="col-sm-3">
<span class="glyphicon glyphicon-off logo-small"></span>
<h4>POWER</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-heart logo-small"></span>
<h4>LOVE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-lock logo-small"></span>
<h4>JOB DONE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
<br><br>
<div class="row">
<div class="col-sm-3">
<span class="glyphicon glyphicon-leaf logo-small"></span>
<h4>GREEN</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-certificate logo-small"></span>
<h4>CERTIFIED</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-wrench logo-small"></span>
<h4 style="color:#303030;">HARD WORK</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
</div>
<div class="col-sm-3 ">
<img class="col-sm-3 features-image2" src="http://placehold.it/140x140">
</div>
</div>
</div>
The screen looks like this (the table should take up 9 columns 3/4 of screen width but it doesn't):
The effect I am trying to achieve is to centre both the table and the image both vertically and horizontally in the col-3
There are a few issues with your layout...
Use 3 col-sm-4 to consume 1/3 of the col-sm-9
Dont use the col-sm-12 class on the image
Use flexbox and min-height on the container to center vertically
Change col-sm-9 to col-sm-8 offset-sm-1 to center horizontally (optional)
Demo http://www.codeply.com/go/DbV50b96vz
<div id="services" class="container-fluid text-center d-flex">
<div class="row text-center w-100 align-items-center">
<div class="col-sm-8 offset-sm-1">
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-off logo-small"></span>
<h4>POWER</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-heart logo-small"></span>
<h4>LOVE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-lock logo-small"></span>
<h4>JOB DONE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
<br><br>
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-leaf logo-small"></span>
<h4>GREEN</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-certificate logo-small"></span>
<h4>CERTIFIED</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-wrench logo-small"></span>
<h4 style="color:#303030;">HARD WORK</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
</div>
<div class="col-sm-2 text-center">
<img class="features-image2" src="//placehold.it/500x800">
</div>
</div>
</div>
There is a few issues with your implementation:
1st: why did you put those tags? they are unnecessary
2nd: I
think it is better to make image a background image of the block, not
just put it inside.
#import 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css';
.features-image2 {
/*max-width: 140px;
min-width: 140px;
width: 140px;*/
}
.block-left{
height: 500px;
background: red;
}
.block-right{
height: 500px;
background: blue;
background-image: url("https://images-na.ssl-images-amazon.com/images/M/MV5BMjMxMzg3MDI5NV5BMl5BanBnXkFtZTcwOTAxODc0Ng##._V1_UY317_CR31,0,214,317_AL_.jpg");
background-repeat: no-repeat;
background-size: cover;
}
<div id="services" class="container-fluid text-center">
<div class="row text-center">
<div class="col-sm-9 block-left">
<div class="row">
<div class="col-sm-3">
<span class="glyphicon glyphicon-off logo-small"></span>
<h4>POWER</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-heart logo-small"></span>
<h4>LOVE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-lock logo-small"></span>
<h4>JOB DONE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<span class="glyphicon glyphicon-leaf logo-small"></span>
<h4>GREEN</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-certificate logo-small"></span>
<h4>CERTIFIED</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-wrench logo-small"></span>
<h4 style="color:#303030;">HARD WORK</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
</div>
<div class="col-sm-3 block-right">
</div>
Can Anyone help making this list layout responsive for different screen-size, using media query? Currently, it is a fluid layout that is adjusting as per screen size. I need suggestion on using media query with it.
My original code is at https://jsfiddle.net/7qsp1k0o/2/
.item.list-group-item {
float: none;
width: 100%;
background-color: #fff;
margin-bottom: 10px;
}
.item.list-group-item .list-group-image {
margin-right: 10px;
}
.item.list-group-item .thumbnail {
margin-bottom: 0px;
}
.item.list-group-item .caption {
padding: 9px 9px 0px 9px;
}
.item.list-group-item:before,
.item.list-group-item:after {
display: table;
content: " ";
}
.item.list-group-item img {
float: left;
}
.item.list-group-item:after {
clear: both;
}
.list-group-item-text {
margin: 0 0 11px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div id="products" class="row list-group ">
<div class="item col-xs-4 col-lg-4 list-group-item">
<div class="thumbnail">
<img class="group list-group-image" src="http://placehold.it/400X250/000/fff" alt="" />
<div class="caption">
<h4 class="group inner list-group-item-heading">
Activity title</h4>
<p class="group inner list-group-item-text">
Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Charge : $21.000</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-success" href="#">Apply Now</a>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-lg-4 list-group-item">
<div class="thumbnail">
<img class="group list-group-image" src="http://placehold.it/400X250/000/fff" alt="" />
<div class="caption">
<h4 class="group inner list-group-item-heading">
Activity title</h4>
<p class="group inner list-group-item-text">
Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Charge : $21.000</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-success" href="#">Apply Now</a>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-lg-4 list-group-item">
<div class="thumbnail">
<img class="group list-group-image" src="http://placehold.it/400X250/000/fff" alt="" />
<div class="caption">
<h4 class="group inner list-group-item-heading">
Activity title</h4>
<p class="group inner list-group-item-text">
Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Charge : $21.000</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-success" href="#">Apply Now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Edit: Added desired result.
I want that text should not flow below the image, Rather the whole thing (image and box) should scale down to fit the screen size.
Styling is based on the creativity, however this might help you..
<div class="container">
<div class="row">
<!-- BEGIN PRODUCTS -->
<div class="col-md-3 col-sm-6 col-xs-12">
<span class="thumbnail">
<img src="http://placehold.it/500x400" alt="...">
<h4>Product Tittle</h4>
<div class="ratings">
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<hr class="line">
<div class="row">
<div class="col-md-6 col-sm-6">
<p class="price">$29,90</p>
</div>
<div class="col-md-6 col-sm-6">
<button class="btn btn-success right" > BUY ITEM</button>
</div>
</div>
</span>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<span class="thumbnail">
<img src="http://placehold.it/500x400" alt="...">
<h4>Product Tittle</h4>
<div class="ratings">
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<hr class="line">
<div class="row">
<div class="col-md-6 col-sm-6">
<p class="price">$29,90</p>
</div>
<div class="col-md-6 col-sm-6">
<button class="btn btn-success right" > BUY ITEM</button>
</div>
</div>
</span>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<span class="thumbnail">
<img src="http://placehold.it/500x400" alt="...">
<h4>Product Tittle</h4>
<div class="ratings">
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<hr class="line">
<div class="row">
<div class="col-md-6 col-sm-6">
<p class="price">$29,90</p>
</div>
<div class="col-md-6 col-sm-6">
<button class="btn btn-success right" > BUY ITEM</button>
</div>
</div>
</span>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<span class="thumbnail">
<img src="http://placehold.it/500x400" alt="...">
<h4>Product Tittle</h4>
<div class="ratings">
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<hr class="line">
<div class="row">
<div class="col-md-6 col-sm-6">
<p class="price">$29,90</p>
</div>
<div class="col-md-6 col-sm-6">
<button class="btn btn-success right" > BUY ITEM</button>
</div>
</div>
</span>
</div>
<!-- END PRODUCTS -->
</div>
</div>
And the css code
h4{
font-weight: 600;
}
p{
font-size: 12px;
margin-top: 5px;
}
.price{
font-size: 30px;
margin: 0 auto;
color: #333;
}
.right{
float:right;
border-bottom: 2px solid #4B8E4B;
}
.thumbnail{
opacity:0.70;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.thumbnail:hover{
opacity:1.00;
box-shadow: 0px 0px 10px #4bc6ff;
}
.line{
margin-bottom: 5px;
}
#media screen and (max-width: 770px) {
.right{
float:left;
width: 100%;
}
}