From the official documentation, I am only able to come up with something like this:
<div class="grid grid-cols-2 gap-3">
<div>1st col</div>
<div>2nd col</div>
</div>
But this gives me 2 columns with an equal width - how do I specify that the first column would be like 20% of the total width (I only need to place there a simple icon) and the rest of the width would be the second column (here would be a text)?
Thank you in advance.
Set grid-cols-5 to the wrapper and col-span-4 to second column. It will cover 4/5 (80%)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" />
<div class="grid grid-cols-5 gap-3">
<div class="bg-blue-100">1st col</div>
<div class="bg-red-100 col-span-4">2nd col</div>
</div>
Another way with grid-flow-col
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" />
<div class="grid grid-flow-col gap-3">
<div class="bg-blue-100 col-span-1">1st col</div>
<div class="bg-red-100 col-span-4">2nd col</div>
</div>
You can define additional utilities by extending the theme in tailwind.config.js:
module.exports = {
theme: {
extend: {
gridTemplateColumns:
{
'20/80': '20% 80%',
'fixed': '40px 260px',
}
}
}
}
<div class="grid grid-cols-20/80 w-full h-64">
<div class="bg-blue-500"></div>
<div class="bg-red-500"></div>
</div>
<div class="grid grid-cols-fixed h-64">
<div class="bg-blue-500"></div>
<div class="bg-red-500"></div>
</div>
Updated for Tailwind CSS 3:
With the introduction of the JIT compiler and the ability to use arbitrary/dynamic values in some utilities, you can now do this without the config:
<div class="grid grid-cols-[20%_80%] w-full h-64">
<div class="grid grid-cols-[40px_260px] w-full h-64">
You can use col-span like below
<div class="grid grid-cols-5 gap-3"> // This will create 5 grids so 20% each
<div class="some-class"></div>
<div class="col-span-4"></div> // This will take 80% of space
</div>
Reference: https://tailwindcss.com/docs/grid-column#class-reference
Simple
<div class="flex flex-wrap">
<div class="w-1/5"> 20% </div>
<div class="w-4/5"> 80% </div>
</div>
https://v1.tailwindcss.com/components/flexbox-grids
further to #horuskol's solution for column templates, % doesn't respect the container dimensions so if you use gap then the grid will overflow it's container
if instead of % you use fr then the grid contents will be styled flexibly and so not overflow the container
eg.
grid-cols-[1fr_2fr] gives 2 cols at 33% / 66%
grid-cols-[1fr_2fr_1fr] gives 3 cols at 25% / 50% / 25%
This question already has answers here:
How can I center elements horizontally or vertically with Twitter Bootstrap?
(12 answers)
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed last year.
I am trying to center my Container in the middle of the page using Bootstrap 4. I have been unsuccessful thus far. Any help would be appreciated.
I have built it at Codepen.io so you guys can play with it and let me know what works as I am about out of ideas...
var currentAuthor = "";
var currentQuote = "";
function randomQuote() {
$.ajax({
url: "https://api.forismatic.com/api/1.0/?",
dataType: "jsonp",
data: "method=getQuote&format=jsonp&lang=en&jsonp=?",
success: function( response ) {
$("#quote-content").html('<h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"> ' + response.quoteText + ' <i class="fa fa-quote-right" aria-hidden="true"></i></h2>');
$("#quote-author").html('<p id="quote-author" class="lead"><em>' + response.quoteAuthor + '</em></p>');
currentAuthor = response.quoteAuthor;
currentQuote = response.quoteText
}
});
}
function openURL(url){
window.open(url,'Share', 'width=550, height=400, toolbar=0, scrollbars=1 ,location=0 ,statusbar=0,menubar=0, resizable=0');
}
function tweetQuote(){
openURL('https://twitter.com/intent/tweet?hashtags=quotes,freecodecamp&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" - ' + currentAuthor));
}
$(document).ready(function () {
randomQuote();
$("#get-another-quote-button").click(function(){
randomQuote();
});
$('#tweet').on('click', function() {
tweetQuote();
});
});
html, body {
background-image: url("https://www.mylinea.com/wp-content/uploads/beautiful-trees-stock-photo-055.jpg");
background-color: #17234E;
margin-bottom: 0;
min-height: 30%;
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
background-size: cover;
}
.btn-new-quote {
color: #0C0C0D;
background-color: transparent;
border-color: #414147;
}
.btn-new-quote:hover {
color: #0C0C0D;
background-color: #9A989E;
border-color: #0C0C0D;
}
#tweet {
color: RGB(100, 100, 100);
}
#tweet:hover {
color: RGB(50, 50, 50);
}
.jumbotron {
position: relative;
top: 50%;
transform: translateY(-50%);
opacity: .85;
border-color: RGB(50, 50, 50);
padding-bottom: 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="container">
<div class="row justify-content-center align-self-center">
<div class="col-sm-6">
<div class="jumbotron vertical-center text-center">
<h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"></i><i class="fa fa-quote-right" aria-hidden="true"></i></h2>
<p id="quote-author" class="lead"><em></em></p>
<hr class="my-2">
<div class="row align-items-center justify-content-between">
<div class="col-sm-1-4 text-left">
<a id="tweet" href="#">
<h2 class="display-4"><i class="fa fa-twitter" aria-hidden="true"></i></h2>
</a>
</div>
<div class="col-sm-1-4 text-right">
<button id="get-another-quote-button" type="button" class="btn btn-outline-secondary btn-new-quote">Don't Quote Me on This...</button>
</div>
</div>
</div>
</div>
</div>
</div>
Important! Vertical center is relative to the height of the parent
If the parent of the element you're trying to center has no defined
height, none of the vertical centering solutions will work!
Now, onto vertical centering...
Bootstrap 5 (Updated 2021)
Bootstrap 5 is still flexbox based so vertical centering works the same way as Bootstrap 4. For example, align-items-center, justify-content-center or auto margins can used on the flexbox parent (row or d-flex).
use align-items-center on a flexbox row parent (row or d-flex)
use justify-content-center on a flexbox column parent (d-flex flex-column)
use my-auto on a flexbox parent
Vertical Center in Bootstrap 5
Bootstrap 4
You can use the new flexbox & size utilities to make the container full-height and display: flex. These options don't require extra CSS (except that the height of the container (ie:html,body) must be 100%).
Option 1 align-self-center on flexbox child
<div class="container d-flex h-100">
<div class="row justify-content-center align-self-center">
I'm vertically centered
</div>
</div>
https://codeply.com/go/fFqaDe5Oey
Option 2 align-items-center on flexbox parent (.row is display:flex; flex-direction:row)
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="jumbotron">
I'm vertically centered
</div>
</div>
</div>
</div>
https://codeply.com/go/BumdFnmLuk
Option 3 justify-content-center on flexbox parent (.card is display:flex;flex-direction:column)
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="card h-100 border-primary justify-content-center">
<div>
...card content...
</div>
</div>
</div>
</div>
</div>
https://codeply.com/go/3gySSEe7nd
More on Bootstrap 4 Vertical Centering
Now that Bootstrap 4 offers flexbox and other utilities, there are many approaches to vertical
alignment. http://www.codeply.com/go/WG15ZWC4lf
1 - Vertical Center Using Auto Margins:
Another way to vertically center is to use my-auto. This will center the element within it's container. For example, h-100 makes the row full height, and my-auto will vertically center the col-sm-12 column.
<div class="row h-100">
<div class="col-sm-12 my-auto">
<div class="card card-block w-25">Card</div>
</div>
</div>
Vertical Center Using Auto Margins Demo
my-auto represents margins on the vertical y-axis and is equivalent to:
margin-top: auto;
margin-bottom: auto;
2 - Vertical Center with Flexbox:
Since Bootstrap 4 .row is now display:flex you can simply use align-self-center on any column to vertically center it...
<div class="row">
<div class="col-6 align-self-center">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
or, use align-items-center on the entire .row to vertically center align all col-* in the row...
<div class="row align-items-center">
<div class="col-6">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
Vertical Center Different Height Columns Demo
See this Q/A to center, but maintain equal height
3 - Vertical Center Using Display Utils:
Bootstrap 4 has display utils that can be used for display:table, display:table-cell, display:inline, etc.. These can be used with the vertical alignment utils to align inline, inline-block or table cell elements.
<div class="row h-50">
<div class="col-sm-12 h-100 d-table">
<div class="card card-block d-table-cell align-middle">
I am centered vertically
</div>
</div>
</div>
Vertical Center Using Display Utils Demo
More examples
Vertical center image in <div>
Vertical center .row in .container
Vertical center and bottom in <div>
Vertical center child inside parent
Vertical center full screen jumbotron
Important! Did I mention height?
Remember vertical centering is relative to the height of the parent element. If you want to center on the entire page, in most cases, this should be your CSS...
body,html {
height: 100%;
}
Or use min-height: 100vh (min-vh-100 in Bootstrap 4.1+) on the parent/container. If you want to center a child element inside the parent. The parent must have a defined height.
Also see:
Vertical alignment in bootstrap 4
Bootstrap Center Vertical and Horizontal Alignment
you can vertically align your container by making the parent container flex and adding align-items:center:
body {
display:flex;
align-items:center;
}
Updated Pen
Using bootstrap version 5 or later, use the code below to center the content horizontally and vertically.
<div class="vh-100 d-flex justify-content-center align-items-center">
<h1>Centered horizontally and vertically!</h1>
</div>
Following bootstrap 4 classes helped me solve this
<div class="col text-center justify-content-center align-self-center">
<img width=3rem src=".." alt="...">
</div>
Because none of the above worked for me, I am adding another answer.
Goal: To vertically and horizontally align a div on a page using bootstrap 4 flexbox classes.
Step 1: Set your outermost div to a height of 100vh. This sets the height to 100% of the Veiwport Height. If you don't do this, nothing else will work. Setting it to a height of 100% is only relative to the parent, so if the parent is not the full height of the viewport, nothing will work. In the example below, I set the Body to 100vh.
Step 2: Set the container div to be the flexbox container with the d-flex class.
Step 3: Center div horizontally with the justify-content-center class.
Step 4: Center div vertically with the align-items-center
Step 5: Run page, view your vertically and horizontally centered div.
Note that there is no special class that needs to be set on the centered div itself (the child div)
<body style="background-color:#f2f2f2; height:100vh;">
<div class="h-100 d-flex justify-content-center align-items-center">
<div style="height:600px; background-color:white; width:600px;">
</div>
</div>
</body>
I did it this way with Bootstrap 4.3.1:
<div class="d-flex vh-100">
<div class="d-flex w-100 justify-content-center align-self-center">
I'm in the middle
</div>
</div>
.jumbotron {
position: relative;
top: 50%;
transform: translateY(-50%);
}
<div class="row">
<div class="col-md-6">
<img src="/assets/images/ebook2.png" alt="" class="img-fluid">
</div>
<div class="col-md-6 my-auto">
<h3>Heading</h3>
<p>Some text.</p>
</div>
</div>
This line is where the magic happens <div class="col-md-6 my-auto">, the my-auto will center the content of the column. This works great with situations like the code sample above where you might have a variable sized image and need to have the text in the column to the right line up with it.
I've tried all the answers herefrom, but found out here is the difference between h-100 and vh-100
Here is my solution:
<div className='container vh-100 d-flex align-items-center col justify-content-center'>
<div className="">
...
</div>
</div >
<div class="col-lg-5 col-sm-5 offset-1 d-flex">
<div class="offer-txt justify-content-center align-self-center">
<span class="inner-title">Our Offer</span>
<h2 class="section-title">Today’s Special </h2>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly.</p>
</div>
</div>
In Bootstrap 4 (beta), use align-middle. Refer to Bootstrap 4 Documentation on Vertical alignment:
Change the alignment of elements with the vertical-alignment
utilities. Please note that vertical-align only affects inline,
inline-block, inline-table, and table cell elements.
Choose from .align-baseline, .align-top, .align-middle, .align-bottom,
.align-text-bottom, and .align-text-top as needed.
<!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/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row align-items-center justify-content-center" style="height:100vh;">
<div>Center Div Here</div>
</div>
</div>
</body>
</html>
Vertical align Using this bootstrap 4 classes:
Method1:
parent: d-table
AND
child: d-table-cell & align-middle & text-center
eg:
<div class="tab-icon-holder d-table bg-light">
<div class="d-table-cell align-middle text-center">
<img src="assets/images/devices/Xl.png" height="30rem">
</div>
</div>
and if you want parent be circle:
<div class="tab-icon-holder d-table bg-light rounded-circle">
<div class="d-table-cell align-middle text-center">
<img src="assets/images/devices/Xl.png" height="30rem">
</div>
</div>
which two custom css classes are as follow:
.tab-icon-holder {
width: 3.5rem;
height: 3.5rem;
}
.rounded-circle {
border-radius: 50% !important
}
Final usage can be like for example:
<div class="col-md-5 mx-auto text-center">
<div class="d-flex justify-content-around">
<div class="tab-icon-holder d-table bg-light rounded-circle">
<div class="d-table-cell align-middle text-center">
<img src="assets/images/devices/Xl.png" height="30rem">
</div>
</div>
<div class="tab-icon-holder d-table bg-light rounded-circle">
<div class="d-table-cell align-middle text-center">
<img src="assets/images/devices/Lg.png" height="30rem">
</div>
</div>
...
</div>
</div>
Method2:
You can use following:
parent: h-100 d-table mx-auto
AND
child: d-table-cell align-middle
Method3:
You can use following:
parent: d-flext align-items-center
also if you want content be center horisontally too:
parent: d-flext align-items-center justify-content-center
bootstrap 5 and blazor web assembly:
<div class="d-flex align-items-center justify-content-center min" style="height: 50vh">
<button class="btn btn-outline-success mx-2">Register</button>
<button class="btn btn-outline-primary mx-2" style="width:123.44px">Login</button></div>
/*You have to add height 100vh */
Center
use .my-auto (bootsrap4) css class on yor div
Place your content within a flexbox container that is 100% high i.e h-100. Then justify the content centrally by using justify-content-center class.
<section class="container h-100 d-flex justify-content-center">
<div class="jumbotron my-auto">
<h1 class="display-3">Hello, Malawi!</h1>
</div>
</section>
in Bootstrap 5 we can do it easily. Below is an example to align card. We just have to set the card width, then the rest setting are using bootstrap 5 class.
<div class="container d-flex vh-100">
<div class="row mx-auto">
<div class="col align-self-center p-4">
<div class="card rounded-3 shadow-sm p-3" style="width:400px">
<div class="card-body">
<h1>I'am centered vertically and horizontally</h1>
</div>
</div>
</div>
</div>
</div>
For all Bootstrap versions 2, 3, 4 and 5 with only two custom classes suitable with any height and width.
.d_tbl{
display:table;
width:100%;
height:200px;
}
.d_tblCel{
vertical-align: middle;
display: table-cell;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<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.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="d_tbl" style="background-color:antiquewhite">
<div class="d_tblCel">
<h3>Centered horizontally and vertically</h3>
<p>for all bootstrap versions with only two custom classes</p>
</div>
</div>
</div>
</body>
</html>
In Bootstrap 4.1.3:
This worked for me when I was trying to center a bootstrap badge inside of a container > row > column next to a h1 title.
What did work was some simple css:
.my-valign-center {
vertical-align: 50%;
}
or
<span class="badge badge-pill" style="vertical-align: 50%;">My Badge</span>
<div class="container p0">
<div class="col-md-12 p0">
<div class="col-md-6 p0">
<div class="imagen"></div>
</div>
<div class="col-md-6 p0">
<div class="text-content"></div>
</div>
</div>
</div>
I do not have a definite css yet, I still think how I can do this
How can I make the image full width inside a container, just like in the example using bootstrap, The black border is the bootstrap container
What I try to do is the content in a container and the image outside of that container,
Just set these properties--
.imagen img{
width: 100%;
max-width: 100%;
}
Here you go with jsfiddle https://jsfiddle.net/9drawa3h/1/.
<div class="container p0">
<div class="col-md-12 p0">
<div class="col-md-6 p0">
<div class="imagen"></div>
</div>
<div class="col-md-6 p0">
<div class="text-content">
<img src="http://a57.foxnews.com/images.foxnews.com/content/fox-news/tech/2013/04/13/how-to-do-free-online-background-check/_jcr_content/par/featured-media/media-1.img.jpg/876/493/1422493303787.jpg?ve=1&tl=1" />
</div>
</div>
</div>
</div>
I know you are looking for text-content in the second column, but I specified something else.
As I not sure whether you are going to use img tag ro background-image in the 1st column, so I have provided both.
1st Column with background-image and 2nd column with img tag.
I want to have variable number of columns using row span, to be specific 3 columns on xs, 2 columns on sm (first 2 columns one above another), and 3 columns on lg. I don't know how to implement responsive rowspan for sm screen.
Here is visual representation:
Here is my code so far:
<div class="container text-center">
<div class="row">
<div class="col-sm-4 col-lg-3 col-lg-push-9">
<div class="alert alert-warning">A</div>
</div>
<div class="col-sm-4 col-lg-3 col-lg-pull-3">
<div class="alert alert-info">B</div>
</div>
<div class="col-sm-8 col-lg-6 col-lg-pull-3">
<div class="alert alert-danger">C</div>
</div>
</div>
</div>
And here is codepen: http://codepen.io/nebitno/pen/ORxjLv
This is quite tricky. Here is the solution I came up with. You will need to use a bit of jQuery to get the desired result.
Here is the html, note how I switched the columns:
<div class="container text-center">
<div class="row">
<div class="col-sm-4 col-lg-3 col-lg-push-9">
<div class="alert alert-warning">A</div>
</div>
<div class="col-sm-8 col-lg-6 col-lg-pull-0 big">
<div class="alert alert-danger">C</div>
</div>
<div class="col-sm-4 col-lg-3 col-lg-pull-9 small">
<div class="alert alert-info">B</div>
</div>
</div>
</div>
And here is the jQuery:
<script>
var $iW = $(window).innerWidth();
if ($iW < 768){
$('.small').insertBefore('.big');
}else{
$('.big').insertBefore('.small');
}
</script>
Note: the downside to this is that the jQuery is not bound to the window resizing. So If you were to resize the window after the document load, you will have pretty bad result. However, this can also be fixed by using $(window).resize(function(){});
However, if you don't want to use JS at all. Here is another solution that will require you to duplicate one of your blocks. If the contents of this block are static and not a lot, I believe this is a good compromise. However, you can also tweak it a bit to fit your needs.
Here is the HTML :
<div class="container text-center">
<div class="row">
<div class="col-sm-4 col-lg-3 col-lg-push-9">
<div class="alert alert-warning">A</div>
</div>
<div class="col-sm-4 small-screen-only">
<div class="alert alert-info">B</div>
</div>
<div class="col-sm-8 col-lg-6 col-lg-pull-0 big">
<div class="alert alert-danger">C</div>
</div>
<div class="col-sm-4 col-lg-3 col-lg-pull-9 small">
<div class="alert alert-info">B</div>
</div>
</div>
</div>
Notice the duplication of block B.
Here is the CSS:
.small-screen-only{
display: none;
}
#media all and (max-width: 767px)
{
.small-screen-only{
display: block
}
.small{
display: none;
}
}
I personally would choose the CSS option as it is more native to the browser. Even if the contents of the blocks were dynamically added, I believe you can still find a way around it.
For a CSS only solution, you can absolute position column C relative to the .row at breakpoint sm and clear column B. Keep your HTML & CSS as is with additional CSS:
#media screen and (min-width: 768px) and (max-width : 1200px) {
.row {
position:relative;
}
.col-sm-4:nth-child(2) {
clear:left;
}
div[class^="col-"]:last-child {
position:absolute;
right:0;
}
}
The disadvantage coming along with this approach is that the .row won't properly clear if the height of Column C surpasses Column A + B's height as explained in Clearfix with absolute positioned elements.
Here is an updated version of your Codepen.
I made some slight changes to your html and added two jQuery ways to achieve the functionality. You can use any method that suits you better.
HTML-
<div class="container text-center">
<div class="row">
<div class="col-sm-4 col-lg-3 col-lg-push-9">
<div class="alert alert-warning">A</div>
</div>
<div class="col-sm-4 col-lg-3 col-lg-pull-3 B">
<div class="alert alert-info">B</div>
</div>
<div class="col-sm-8 col-lg-6 col-lg-pull-3 C">
<div class="alert alert-danger" >C</div>
</div>
</div>
</div>
jQuery(1st way)-
var wH = $(window).innerWidth();
if (wH < 992 && wH>=768){
$('.C:parent').each(function () {
$(this).insertBefore($(this).prev('.B'));
});
}else if(wH<768 || wH>=992)
{
$('.B:parent').each(function () {
$(this).insertBefore($(this).prev('.C'));
});
}
$(window).resize(function() {
wH = $(window).innerWidth();
if (wH < 992 && wH>=768){
$('.C').insertBefore('.B');
}else if(wH<768 || wH>=992)
{
$('.B').insertBefore('.C');
}
})
Check out this fiddle:
http://jsfiddle.net/SkyT/wVVbT/150/
jQuery(2nd way)-
var wH = $(window).innerWidth();
if (wH < 992 && wH>=768){
$('.C').insertBefore('.B');
}else if(wH<768 || wH>=992)
{
$('.B').insertBefore('.C');
}
$(window).resize(function() {
var wH = $(window).innerWidth();
if (wH < 992 && wH>=768){
$('.C:parent').each(function () {
$(this).insertBefore($(this).prev('.B'));
});
}else if(wH<768 || wH>=992)
{
$('.B:parent').each(function () {
$(this).insertBefore($(this).prev('.C'));
});
}
})
Checkout this fiddle:https://jsfiddle.net/SkyT/tst5g7ec/1/
Bootstrap 3.x framework and jQuery 2.x library are been used.
I have four divs in three different rows. I am using jQuery to change the div height when mouse hover.
Use of z-index and absolute position break Bootstrap responsivness.
Using z-index and absolute position with .col-xs-* can provide a working solution. However, the result is not mobile friendly.
$(function() {
console.log(">>> jQuery is ready");
$(".site-box-id-01").mouseenter(function() {
console.log(">>> mouse enter");
$(this).stop(true, false).animate({
height: "500px"
}, {
duration: 100
});
}).mouseleave(function() {
console.log(">>> mouse leave");
$(this).stop(true, false).animate({
height: "300px"
}, {
duration: 100
});
});
});
.site-box {
width: 300px;
height: 300px;
border: 1px solid black;
background-color: white;
}
.row {
border: 1px dashed black;
height: 301px;
/* fix row height*/
}
.site-row-id-01 {
background-color: blanchedalmond;
}
.site-row-id-02 {
background-color: azure;
}
.site-box-id-01 {
position: absolute;
z-index: 1;
}
<body>
<div class="container-fluid">
<div class="row" id="site-row-id-01">
<div class="col-sm-4">
<div class="site-box site-box-id-01">Test Box 01</div>
</div>
<div class="col-sm-4">
<div class="site-box site-box-id-01">Test Box 02</div>
</div>
<div class="col-sm-4">
<div class="site-box site-box-id-01">Test Box 03</div>
</div>
</div>
<div class="row row-class-02" id="site-row-id-02">
<div class="col-sm-4">
<div class="site-box site-box-id-02">Test Box 04</div>
</div>
<div class="col-sm-4">
<div class="site-box site-box-id-02">Test Box 05</div>
</div>
<div class="col-sm-4">
<div class="site-box site-box-id-02">Test Box 06</div>
</div>
</div>
</div>
</body>
The Normal State
For Desktop
For Mobile
The Desired Result
For Desktop
For Mobile
The Current Result
For Desktop
(NOT Using Absolute Positon and z-index )
For Mobile
(Using Absolute Positon and z-index)
I have a solution at http://jsbin.com/fulequ/3/edit that I think meets your needs.
First, your html wasn't really responsive. I modified it as below. class="col-xs-6 col-sm-3" gives 4 columns in desktop mode and 2 columns in mobile view.
<div class="row" >
<div class="col-xs-6 col-sm-3">
<div class="site-box site-box-id-01">Test Box 01</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="site-box site-box-id-01">Test Box 02</div>
</div>
<div class="col-xs-6 col-sm-3" >
<div class="site-box site-box-id-01">Test Box 03</div>
</div>
<div class="col-xs-6 col-sm-3 ">
<div class="site-box site-box-id-01">Test Box 04</div>
</div>
</div>
To expand a block vertically in desktop mode, add the following CSS class to the <div class="site-box site-box-id-01">and remove it on mouseleave() function.
.expand-box{
z-index:1;
height: 150px;
position: absolute;
background-color: yellow;
}
For the mobile view you describe above, the JavaScript has to do the following
Set the height of the "row" div to the actual height that it is.
For each of the position them absolutely to the position that they are currently at.
Add expand-box CSS class to div to enlarge.
On mouseleave, the JavaScript has to undo the above steps.