I have a spacing problem, how can I prevent Title from intersecting with the number? When the column are forced closer together they overlap. I am using Tailwind CSS. Here is my code:
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.17/tailwind.min.css" rel="stylesheet"/>
<div class="flex flex-col w-full pt-28 px-56">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-12 lg:gap-24 xl:gap-36 pt-5">
<div class="flex flex-wrap flex-row">
<div class="flex-col w-1/12">
<h4 class="text-xl font-bold">01</h4>
</div>
<div class="flex-col w-11/12">
<h4 class="text-3xl">Title</h4>
<p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
</div>
</div>
<div class="flex flex-wrap flex-row">
<div class="flex-col w-1/12">
<h4 class="text-xl font-bold">02</h4>
</div>
<div class="flex-col w-11/12">
<h4 class="text-3xl">Title</h4>
<p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
</div>
</div>
<div class="flex flex-wrap flex-row">
<div class="flex-col w-1/12">
<h4 class="text-xl font-bold">03</h4>
</div>
<div class="flex-col w-11/12">
<h4 class="text-3xl">Title</h4>
<p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
</div>
</div>
<div class="flex flex-wrap flex-row">
<div class="flex-col w-1/12">
<h4 class="text-xl font-bold">04</h4>
</div>
<div class="flex-col w-11/12">
<h4 class="text-3xl">Title</h4>
<p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
</div>
</div>
<div class="flex flex-wrap flex-row">
<div class="flex-col w-1/12">
<h4 class="text-xl font-bold">09</h4>
</div>
<div class="flex-col w-11/12">
<h4 class="text-3xl">Title</h4>
<p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
</div>
</div>
</div>
</div>
Adding margin to the columns makes the text overflow to the next row as Jesper's answer. If the width of the columns need not be fixed, one way to resolve this issue would be to change the width of the second column from w-11/12 to say w-10/12 and add a mr-2 to the first column
<div class="flex flex-wrap flex-row">
<div class="flex-col w-1/12 mr-2">
<h4 class="text-xl font-bold">01</h4>
</div>
<div class="flex-col w-10/12">
<h4 class="text-3xl">Title</h4>
<p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
</div>
</div>
Here is how it looks when you add the above changes:
In the future you should post your CSS. The texts have just a little bit of overlap but adding some margin forces them to be apart. This makes your title overflow to the next row, because it can fit the texts, but not the texts and 2 pixels of margin. That can be fixed by giving the div more room to work with.
.flex-col {
margin-right: 2px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.17/tailwind.min.css" rel="stylesheet"/>
<div class="flex flex-col w-full pt-28 px-56">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-12 lg:gap-24 xl:gap-36 pt-5">
<div class="flex flex-wrap flex-row">
<div class="flex-col w-1/12">
<h4 class="text-xl font-bold">01</h4>
</div>
<div class="flex-col w-11/12">
<h4 class="text-3xl">Title</h4>
<p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
</div>
</div>
<div class="flex flex-wrap flex-row">
<div class="flex-col w-1/12">
<h4 class="text-xl font-bold">02</h4>
</div>
<div class="flex-col w-11/12">
<h4 class="text-3xl">Title</h4>
<p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
</div>
</div>
<div class="flex flex-wrap flex-row">
<div class="flex-col w-1/12">
<h4 class="text-xl font-bold">03</h4>
</div>
<div class="flex-col w-11/12">
<h4 class="text-3xl">Title</h4>
<p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
</div>
</div>
<div class="flex flex-wrap flex-row">
<div class="flex-col w-1/12">
<h4 class="text-xl font-bold">04</h4>
</div>
<div class="flex-col w-11/12">
<h4 class="text-3xl">Title</h4>
<p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
</div>
</div>
<div class="flex flex-wrap flex-row">
<div class="flex-col w-1/12">
<h4 class="text-xl font-bold">09</h4>
</div>
<div class="flex-col w-11/12">
<h4 class="text-3xl">Title</h4>
<p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
</div>
</div>
</div>
</div>
Related
I've an HTML like below
<div id="PanelLevel" class="panel-body">
<div class="container">
<div class="row">
<div class="col-md-3">
Very Important
<div id="maindiv1" class="ui-widget-vi">
<div class='column'>
<div class='portlet' >
<div class='portlet-header'>Energy_Efficiency</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet' >
<div class='portlet-header'>Maintenance_Ease</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet' >
<div class='portlet-header'>Cold_Weather_Operation</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
Important
<div id="maindiv2" class="ui-widget-i">
<div class='column'>
<div class='portlet'>
<div class='portlet-header'>First_Cost</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Operating_Cost</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Footprint</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Height</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Sound</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Corrosion_Resistance</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
Somewhat Important
<div id="maindiv3" class="ui-widget-si">
<div class='column'>
<div class='portlet'>
<div class='portlet-header'>Weight</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Installation_Ease</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Redundancy</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
Not Important
<div id="maindiv4" class="ui-widget-ni">
<div class='column'>
<div class='portlet'>
<div class='portlet-header'>Indor_Ducted_Installation</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Water_Usage</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
My desired output is that I need to extract all 'Portlet-header' class contents only from 4 divs like "maindiv1", "maindiv2", "maindiv3", "maindiv4" as below
"maindiv1" - Energy_Efficiency,Maintenance_Ease, Cold_Weather_Operation
"maindiv2" - First_Cost, Operating_cost, Footprint, Height, Corrosion_Resistance
"maindiv3" - Weight, Installation-Ease, Redundancy
"maindiv4" - Indor_Ducted_Installation, Water_Usage
I've tried the below code but not getting the desired result:
$(document).ready(function() {
$('div').each(function () {
var i = $(this).attr('id');
alert(i);
});
var text = $( '.portlet-header' ).map(function() {
return $( this ).text();
})
.get()
.join( ',' );
});
You can use map() to build an array of the output you require:
let output = $('.col-md-3 > div').map((i, c) => ({
[c.id]: $(c).find('.portlet-header').map((i, p) => $(p).text()).get()
})).get();
console.log(output);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="PanelLevel" class="panel-body">
<div class="container">
<div class="row">
<div class="col-md-3">
Very Important
<div id="maindiv1" class="ui-widget-vi">
<div class='column'>
<div class='portlet'>
<div class='portlet-header'>Energy_Efficiency</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Maintenance_Ease</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Cold_Weather_Operation</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
Important
<div id="maindiv2" class="ui-widget-i">
<div class='column'>
<div class='portlet'>
<div class='portlet-header'>First_Cost</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Operating_Cost</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Footprint</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Height</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Sound</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Corrosion_Resistance</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
Somewhat Important
<div id="maindiv3" class="ui-widget-si">
<div class='column'>
<div class='portlet'>
<div class='portlet-header'>Weight</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Installation_Ease</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Redundancy</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
Not Important
<div id="maindiv4" class="ui-widget-ni">
<div class='column'>
<div class='portlet'>
<div class='portlet-header'>Indor_Ducted_Installation</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Water_Usage</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Note that the .col-md-3 > div isn't a very robust selector, but it will work in the example HTML. I'd suggest adding another specific common class to all those #maindivN elements to make the selection of them more accurate and reliable.
The following may be easier to convert to json format.
$(document).ready(function() {
var result = {};
$('[id^=maindiv]').each(function () {
var key = $(this).attr('id');
result[key] = $(this).find('.portlet-header').map(function() {
return $( this ).text();
})
.get()
.join( ',' );
});
console.log(result);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="PanelLevel" class="panel-body">
<div class="container">
<div class="row">
<div class="col-md-3">
Very Important
<div id="maindiv1" class="ui-widget-vi">
<div class='column'>
<div class='portlet' >
<div class='portlet-header'>Energy_Efficiency</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet' >
<div class='portlet-header'>Maintenance_Ease</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet' >
<div class='portlet-header'>Cold_Weather_Operation</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
Important
<div id="maindiv2" class="ui-widget-i">
<div class='column'>
<div class='portlet'>
<div class='portlet-header'>First_Cost</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Operating_Cost</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Footprint</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Height</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Sound</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Corrosion_Resistance</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
Somewhat Important
<div id="maindiv3" class="ui-widget-si">
<div class='column'>
<div class='portlet'>
<div class='portlet-header'>Weight</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Installation_Ease</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Redundancy</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
Not Important
<div id="maindiv4" class="ui-widget-ni">
<div class='column'>
<div class='portlet'>
<div class='portlet-header'>Indor_Ducted_Installation</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Water_Usage</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I want to select only the last element with class "feature" without adding extra classes, only with pseudo selectors like :last-child but since the elements with class "feature" are not siblings it's not working at all. Can someone help me to solve this little problem.
Here is the HTML:
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-4">
<article class="feature">
<i class="fas fa-search-location fa-3x mb-3"></i>
<h3 class="heading-tertiary mb-5">Great location</h3>
<p class="feature__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam illo nam quis sit
unde?
</p>
</article>
</div>
<div class="col-sm-6 col-md-6 col-lg-4">
<article class="feature">
<i class="fas fa-utensils fa-3x mb-3"></i>
<h3 class="heading-tertiary mb-5">Free meals</h3>
<p class="feature__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam illo nam quis sit
unde?
</p>
</article>
</div>
<div class="col-sm-12 col-lg-4">
<article class="feature">
<i class="fas fa-dumbbell fa-3x mb-3"></i>
<h3 class="heading-tertiary mb-5">Fitness room</h3>
<p class="feature__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam illo nam quis sit
unde?
</p>
</article>
</div>
</div>
:last-child only works when the element in question is the last child of the container, not the last of a specific type of element. For that, you want :last-of-type
.col-lg-4:last-of-type article.feature {
background-color:red
}
With the given markup you could use this selector
.row > div:last-child .feature {
...
}
this will match the .feature element inside the last div which is a direct child of .row.
try to make it like this way.
.col-lg-4:last-child article.feature {
border-bottom: 1px solid #000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-grid.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-4">
<article class="feature">
<i class="fas fa-search-location fa-3x mb-3"></i>
<h3 class="heading-tertiary mb-5">Great location</h3>
<p class="feature__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam illo nam quis sit
unde?
</p>
</article>
</div>
<div class="col-sm-6 col-md-6 col-lg-4">
<article class="feature">
<i class="fas fa-utensils fa-3x mb-3"></i>
<h3 class="heading-tertiary mb-5">Free meals</h3>
<p class="feature__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam illo nam quis sit
unde?
</p>
</article>
</div>
<div class="col-sm-12 col-lg-4">
<article class="feature">
<i class="fas fa-dumbbell fa-3x mb-3"></i>
<h3 class="heading-tertiary mb-5">Fitness room</h3>
<p class="feature__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam illo nam quis sit
unde?
</p>
</article>
</div>
</div>
</div>
</body>
</html>
I hope this will works for you.
Thank you...
I am trying to replicate the following column on the right:
But keeps setting the last two boxes into another row:
Been looking at their documentation but it does not clear to me or I might be missing something.
This is the code I have so far:
<div class="col-xs-12 col-md-2">
<!-- Card -->
<div class="card card-body">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
</div>
<div class="col-xs-12 col-md-2">
<!-- Card -->
<div class="card card-body">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
</div>
<div class="w-100"></div>
<div class="col-xs-12 col-md-2">
<!-- Card -->
<div class="card card-body">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
</div>
<div class="col-xs-12 col-md-2">
<!-- Card -->
<div class="card card-body">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
</div>
</div><!-- .end Second row -->
</div>
Try this
Note: instead of col-xs-12, you can mention col-12.
Check Demo Here
HTML
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-3 mb-3">
<!-- Card -->
<div class="card card-body h-100">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
</div>
<div class="col-xs-12 col-sm-3 mb-3">
<!-- Card -->
<div class="card card-body h-100">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
</div>
<div class="col-xs-12 col-sm-6 mb-3">
<div class="row">
<div class="col-xs-12 col-sm-6 mb-3">
<!-- Card -->
<div class="card card-body">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
</div>
<div class="col-xs-12 col-sm-6 mb-3">
<!-- Card -->
<div class="card card-body">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
</div>
<div class="col-xs-12 col-sm-6 mb-3 mb-sm-0">
<!-- Card -->
<div class="card card-body">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
</div>
<div class="col-xs-12 col-sm-6 mb-3 mb-sm-0">
<!-- Card -->
<div class="card card-body">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
This is the image I want:
How can I make a fixed bootstrap panel height for all my panels?
<div class="col-md-3 padding-0">
<div class="panel panel-default">
<div class="panel-body" style="min-height: 10px; max-height: 10px;">
<img class="img-responsive" src="images/artgram.png" alt="">
<p>Have you ever been in a company’s reception area that is so impressively stylish that your concept of their professionalism or importance changed for the better? Have you ever been in a company’s reception area that is so impressively stylish that
your concept of their professionalism or importance changed for the better?</p>
</div>
</div>
</div>
<div class="col-md-3 padding-0">
<div class="panel panel-default">
<div class="panel-body" style="min-height: 10px; max-height: 10px;">
<img class="img-responsive" src="images/artgram.png" alt="">
<p>Have you ever been in a company’s reception area that is so impressively stylish that your concept of their professionalism or importance changed for the better?</p>
</div>
</div>
</div>
Either use fixed height with hidden overflow
.panel-body {
height: 100px; // or whatever
overflow: hidden;
}
or assign max rendered height to all panels dynamically using JS after load. See my answer for a quite similar question here. The snippet is copied below
var panels = document.getElementsByClassName('panel-body');
var maxHeight = Array.prototype.map.call(panels, function(panel) {
return parseInt(getComputedStyle(panel).height, 10);
})
.reduce(function(a, b) {
return Math.max(a, b);
});
for (var i = panels.length; i-- > 0;) {
panels[i].style.height = maxHeight + 'px';
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default col">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
I have this html5 issue. currently the courses are displaying in 2 different rows. i need for it to be in one like no matter how many i add it keeps going to the left and but yes only 2 at a time.
something like this
1-------2
3-------4
5-------6
the current situation is like
1-------4
2-------5
3-------6
hope you could understand my point? here is the code
<!-- courses Start -->
<section class="section-space-padding">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="section-title">
<h1>Lorem ipsum</h1>
<div class="divider dark"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="courses">
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="courses">
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- courses End -->
Slightly modified structure to fix order of items and added some CSS rules to get rid of space between columns:
.row {
padding-left: 15px !important;
padding-right: 15px !important;
}
.row .col-md-6,
.row .col-sm-6,
.row .col-xs-6,
.row .col-sm-12 {
padding-left: 0px !important;
padding-right: 0px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- courses Start -->
<section class="section-space-padding">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="section-title">
<h1>Lorem ipsum</h1>
<div class="divider dark"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
</div>
<div class="row">
<div class="courses">
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum 1</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum 2</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum 3</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum 4</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum 5</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="courses-item">
<div class="courses-circle">
<i class="icon-book-open"></i>
<p>Lorem ipsum 6</p>
</div>
<div class="courses-content courses-color-blue">
<h4>Lorem ipsum</h4>
<h6>Lorem ipsum</h6>
<p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- courses End -->
<div class="container">
<div class="row">
<div class="col-md-6">1</div>
<div class="col-md-6">2</div>
<div class="col-md-6">3</div>
<div class="col-md-6">4</div>
<div class="col-md-6">5</div>
<div class="col-md-6">6</div>
</div>
</div>
http://www.bootply.com/NVUPZtxxOy