bootstrap column will not extend to the bottom of the page - css
I would like to know how I can get the sidebar on this bootstrap page to extend all the way to the bottom like the main column on the right. height:vh doesn't seem to work. Neither does height:100%.
Is this a bug in Bootstrap? I have never encountered this problem before. The sidebar has less content than the main sections, but I need for it to extend all the way to the bottom of the page.
<!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">
<title>Column Test</title>
<link href="bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" style="border:2px solid red; margin:20px 0 20px 0; height:100%">
<div class="row" style="border:2px solid black; height:100%">
<!-- left-side (sidebar) -->
<div class="col-xs-3" style="background-color: orange; height:100vh;">
<div class="sidebar-container" style="border: 1px solid blue;">
<h5 class="grey">TITLE 1</h5>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<hr>
</ul>
<h5>TITLE 2</h5>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<hr>
</ul>
<h5>TITLE 3</h5>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
</ul>
</div>
</div>
<!-- /leftside (sidebar) -->
<!--right side (content)-->
<div class="col-xs-9" style="background-color:pink; height:100%;">
<div class=" row advertisement-container">
<div class="col-md-1" ></div>
<div class="col-md-10">
<h4>advertisement</h4>
<div class="advertisement"></div>
</div>
<div class="col-md-1"></div>
</div>
<div class="row">
<h3 class="col-md-12">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</h3>
<div class="cme">
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-1">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-2">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-3">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-4">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Stroke Systems of Care: Improving Outcomes</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-5">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Stroke Systems of Care: Improving Outcomes</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-6">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Stroke Systems of Care: Improving Outcomes</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-7">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Stroke Systems of Care: Improving Outcomes</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-8">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Stroke Systems of Care: Improving Outcomes</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-9">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Stroke Systems of Care: Improving Outcomes</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-10">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-11">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-12">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-13">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-14">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-15">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-16">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-17">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-18">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
</div>
</div>
<div class=" row advertisement-container margin-bottom-20">
<div class="col-md-1" ></div>
<div class="col-md-10">
<h4>advertisement</h4>
<div class="advertisement"></div>
</div>
<div class="col-md-1"></div>
</div>
</div>
<!--/right side-->
</div>
</div>
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>**strong text**
Related
bootstrap nth:child css property not working
i have bunch of cards over here i just want that each first and third card in the row gets margin top of 50px but it is not working with bootstrap but using css it is working?is there any class in bootstrap through which i can do this? i know i can do it manually by doing .mt class but i have a php code which dynamically generate this so it fails over there please have a look at this codepen and help me with this.
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, hic.</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, hic.</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, hic.</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, hic.</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, hic.</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, hic.</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, hic.</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, hic.</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, hic.</div>
</div>
</div>
</div>
</div>
<style>
.card{
margin:30px 20px;
padding:20px;
}
</style>
.card is a child of col-sm-4 so you have to add CSS like below
.col-sm-4:nth-child(odd) .card{
margin: 50px 0 0 0;
background: red;
}
Bootstrap Grid and Flexbox, one column with horizontal and vertical scroll
I have a two-column layout page and I want it to meet these requirements:
The right column can contain a large data grid of content and the user should be able to scroll that vertically and horizontally. It's way too much to show it all on the page at once.
The left column, which has a slim width and short height, should always appear on the page for xl screen size.
The left column has two buttons that must appear at the bottom of the page for xl screen size.
The page should be responsive for tablet screen sizes. On tablet, the right column should slide below the left column and should itself still be horizontally scrollable. It's acceptable (though not optimal) for it to retain a vertical scroll bar itself too.
I have this working except for making the right column horizontally scrollable. How can I get a horizontal scroll for the right column?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/site.css" />
</head>
<body>
<div class="container-fluid h-100">
<div class="p-2 h-100">
<div class="row d-flex h-100">
<div class="col-xl-3 col-sm-12 d-flex flex-column h-100 align-items-start">
<h2>Left Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="mt-auto">
<button href="javascript:void(0)">Button 1</button>
<button href="javascript:void(0)">Button 2</button>
</div>
</div>
<div class="col-xl-9 col-sm-12 d-flex flex-column h-100" align="center">
<h2>Right Column</h2>
<div class="limited mb-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>
<script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
CSS:
html, body {
height: 100%
}
.limited {
flex-basis: 0px;
flex-grow: 1;
overflow-y: auto;
}
If I follow you correctly, adding white-space: nowrap; to that column should let it scroll horizontally and not wrap the text.
Image pushed/float to the edge
unfortunately I have a problem moving the image to the edge of the screen. <section class="hero-main"> <div class="container"> <div class="row"> <div class="col-lg-6"> <div class="hero-main__container"> <div class="hero-main__header"> <h1>Lorem ipsum dolor sit amet<br> amet amet amet</h1> </div> <div class="hero-main__text"> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.</p> </div> </div> </div> <div class="col-lg-6"> <img src="images/map-flag.png" style="margin-left: 107px" class="" alt=""> </div> </div> </div> The effect I want to achieve is presented in the screenshot. Unfortunately, my code does not fit the photo to the edge, if I push it it is not responsive.
May be it will help v2:
<img src="images/map-flag.png" style="max-width: calc(100% - 107px); margin-left:107px; " class="" alt="">
or may be
<section class="hero-main" style="background-image: url('images/map-flag.png'); background-position: 100% 0; background-size: 50%; background-repeat: no-repeat;" >
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="hero-main__container">
<div class="hero-main__header">
<h1>Lorem ipsum dolor sit amet<br> amet amet amet</h1>
</div>
<div class="hero-main__text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.</p>
</div>
</div>
</div>
<div class="col-lg-6">
</div>
</div>
</div>
</section>
Rows are not equal sizes in bootstrap 4
I'm using Bootstrap 4 and trying to have columns which are the same height (which I thought Bootstrap did by default).
This is my markup:
<div class="row">
<div class="col-md-4">
<div class="table-heading">
Lorem ipsum dolor sit amet
</div>
<div class="table-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
</div>
</div>
<div class="col-md-4">
<div class="table-heading">
Lorem ipsum dolor sit amet, consectetur adipiscing
</div>
<div class="table-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur
</div>
</div>
<div class="col-md-4">
<div class="table-heading">
Lorem ipsum dolor
</div>
<div class="table-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
</div>
</div>
</div>
And the result is this:
I'd like the purple headings to align, as well as the columns themselves.
Here is the CSS I'm using:
.table-heading {
text-align: center;
font-weight: bold;
vertical-align: middle;
color:white;
background-color: #7b2265;
padding:10px;
}
.table-text {
padding:10px;
background-color: white !important;
}
Here's a Pen: https://codepen.io/anon/pen/ZxeLpO
Edit:
Since you want both, the titles AND the body text parts to be the same height while also making sure that they are responsive, you can use the re-ordering classes in combination with the h-100 class (height:100%) to achieve the desired effect:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.table-heading {
text-align: center;
font-weight: bold;
vertical-align: middle;
color:white;
background-color: #7b2265;
padding:10px;
}
</style>
<div class="container bg-light p-3">
<div class="row">
<div class="col-md-4">
<div class="table-heading h-100">
Title1 Lorem ipsum dolor sit amet
</div>
</div>
<div class="col-md-4 order-md-1">
<div class="bg-white h-100 px-3">
Body1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
</div>
</div>
<div class="col-md-4">
<div class="table-heading h-100">
Title2 Long, long, veeery long! Lorem ipsum dolor sit amet
</div>
</div>
<div class="col-md-4 order-md-2">
<div class="bg-white h-100 px-3">
Body2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore. Body2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
</div>
</div>
<div class="col-md-4">
<div class="table-heading h-100">
Title3 Short Lorem
</div>
</div>
<div class="col-md-4 order-md-3">
<div class="bg-white h-100 px-3">
Body3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
</div>
</div>
</div>
</div>
The classes like order-md-1 etc. only kick in on screens that are medium (md) or larger. In this case here, it has the effect of the body part columns being pushed what looks like the next row. While on smaller screens, no re-ordering happens and therefore, on smaller screens, the columns appear in the same order as they are in the HTML.
If you add h-100 as a class to the divs with col-md-4 as a class then it will behave as you expect. h-100 is the bootstrap4 utility class to set the height to 100%, which will make all the columns have a height equal to the row they all reside in. <div class="col-md-4 h-100"> ... </div> Update, you can add height: 100% to the css class .table-text to fill the empty space.
Slick Slider slide overflow issue
I am trying to scale my slides on hover. But if i enable the overflow of the wrapper, it overflows in x-axis as well, i only want it to overflow vertically.
Please see the codepen: http://codepen.io/faranali9/pen/qRPXGq
HTML:
<div class="wrapper">
<div class="container slider">
<div class="slide">
<img src="http://www.lorempixel.com/400/200/" alt="" />
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div>
</div>
<div class="slide">
<img src="http://www.lorempixel.com/400/200/" alt="" />
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div>
</div>
<div class="slide">
<img src="http://www.lorempixel.com/400/200/" alt="" />
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div>
</div>
<div class="slide">
<img src="http://www.lorempixel.com/400/200/" alt="" />
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div>
</div>
<div class="slide">
<img src="http://www.lorempixel.com/400/200/" alt="" />
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div>
</div>
<div class="slide">
<img src="http://www.lorempixel.com/400/200/" alt="" />
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div>
</div>
<div class="slide">
<img src="http://www.lorempixel.com/400/200/" alt="" />
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div>
</div>
<div class="slide">
<img src="http://www.lorempixel.com/400/200/" alt="" />
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div>
</div>
<div class="slide">
<img src="http://www.lorempixel.com/400/200/" alt="" />
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div>
</div>
<div class="slide">
<img src="http://www.lorempixel.com/400/200/" alt="" />
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div>
</div>
</div>
</div>
CSS:
.wrapper{
padding:0 30px;
}
img{
max-width:100%;
}
.slide{
transition:all 0.3s;
transform-origin:center;
}
.slide:hover{
transform:scale(1.3);
}
.description{
display:none;
}
.slide:hover .description{
display:block;
}
JS:
$('.slider').slick(
{
slidesToShow:5,
arrows:true
});
I think you should be scaling the img instead of the .slide. I also added some padding to the .slide to accommodate the top overflow. https://codepen.io/anon/pen/egGyKw