I have a simple two column Bootstrap 4 layout, as follows:
<main>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<p>Left column</p>
<p>Left column</p>
<p>Left column</p>
</div>
<div class="col-md-9">
<p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
<p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
<p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
<p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
<p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
</div>
</div>
</div>
</main>
How do I make the right column always end at the bottom of the screen, and be vertically scrollable? In some cases, the right content will be only a few lines and will fit on a single screen. Other times it will have dozens of paragraphs.
EDIT: A couple of additional points:
In case it is not clear from the question itself, I want the right column to stretch to the bottom of the view port
There are other elements above the main, including a nav, and their height may vary dynamically
You can add two css properties, so your right column will always stretch till the full length of your available page size. And when the data will try to go beyond you visible page space, a vertical scroll will appear.
Sample code:
<div class="col-md-9" style="height: 100vh; overflow-y: auto;">
Here is the working sandbox: https://codesandbox.io/s/bootstrap-4-scroll-example-stackoverflow-0gdht
The question isn't entirely clear on what's expected on mobile. I'm assuming that you want the right column scrollable independent of the body so the nav remains at the top. I'm also assuming that you want the left sidebar to be scrollable as needed (independent of the body).
Therefore, I think you just need to make position:absolute responsive:
/* 768 is the medium breakpoint */
#media (min-width: 768px) {
.position-md-absolute {
position: absolute;
}
}
and, the remainder is possible using Bootstrap utility classes:
<body class="d-flex flex-column min-vh-100">
<nav class="navbar">
...
</nav>
<main class="d-flex flex-column flex-fill">
<div class="container-fluid d-flex flex-column flex-fill">
<div class="row flex-fill flex-column flex-md-row">
<div class="col-md-3 overflow-auto">
<div class="position-md-absolute">
..
</div>
</div>
<div class="col-md-9 overflow-auto flex-fill">
<div class="position-md-absolute">
..
</div>
</div>
</div>
</div>
</main>
</body>
/* 768 is the medium breakpoint */
#media (min-width: 768px) {
.position-md-absolute {
position: absolute;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<body class="d-flex flex-column min-vh-100">
<nav class="navbar navbar-light bg-info">
<a class="navbar-brand" href="#">Nav</a>
</nav>
<main class="d-flex flex-column flex-fill">
<div class="container-fluid d-flex flex-column flex-fill">
<div class="row flex-fill flex-column flex-md-row">
<div class="col-md-3 overflow-auto">
<div class="position-md-absolute">
<p>Left column</p>
<p>Left column</p>
<p>Left column</p>
<p>Left column</p>
<p>Left column last</p>
</div>
</div>
<div class="col-md-9 bg-info overflow-auto flex-fill">
<div class="position-md-absolute">
<p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
<p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
<p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
<p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
<p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
<p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
<p>Right column last... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
</div>
</div>
</div>
</div>
</main>
</body>
Demo: https://codeply.com/p/93751rK5WQ
If you want only one tag occupy full width without disturbing other tags, then you need to make that tag absolute
<div class="col-md-9" style="position:absolute;bottom:0;right:0;top:0;overflow-y: auto">
so that other tags are not disturbed
Related
I cannot align an image to the bottom of the page. Even though, the column is the same height it just doesn't align all the way to the bottom.
Codepen: https://codepen.io/monsmado/pen/WNvmdOL
<div class="container">
<div class="row">
<div class="col-sm">
<img src="https://via.placeholder.com/557x347" class="img-fluid">
<h2>Lorum Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="d-sm-flex align-self-end">
<a href="#">
<img src="https://via.placeholder.com/31x36">
</a>
</div>
</div>
<div class="col-sm">
<img src="https://via.placeholder.com/557x347" class="img-fluid">
<h2>Lorem ipsum dolor sit amet consectetur</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="d-sm-flex align-self-end">
<a href="#">
<img src="https://via.placeholder.com/31x36">
</a>
</div>
</div>
<div class="col-sm">
<img src="https://via.placeholder.com/557x347" class="img-fluid">
<h2>Lorem ipsum dolor sit amet consectetur</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="d-sm-flex align-self-end">
<a href="#">
<img src="https://via.placeholder.com/31x36"">
</a>
</div>
</div>
</div>
</div>
You can add display: flex and flex-direction: column to the .col-sm and margin-top: auto to the div contain your bottom item:
CodePen
If you are using bootstrap 4, you can use class d-flex flex-column for .col-sm div and mt-auto for the bottom item div:
CodePen
I had to make div table, because I didn't see a way to do it with a bootstrap table element.
Here is image:
Here is the code:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row border-top bg-primary pt-3 pb-0 mt-5">
<div class="col-12">
<p class="text-white"><b>Lorem ipsum</b></p>
</div>
</div>
<div class="row border-left border-right text-center">
<div class="col-8 pt-3 pb-0 border-right">
<p>Lorem ipsum</p>
</div>
<div class="col-4 pt-3 pb-0">
<p>Lorem ipsum</p>
</div>
</div>
<div class="row border text-center">
<div class="col-10">
<div class="row">
<div class="col pt-3 pb-0 border-right">
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
<div class="col pt-3 pb-0 border-right">
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
<div class="col pt-3 pb-0 border-right">
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
<div class="col pt-3 pb-0 border-right">
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
<div class="col pt-3 pb-0 border-right">
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
</div>
<div class="row border-top">
<div class="col bg-primary-dark pt-3 pb-0" style="width: 80%; flex-basis: unset;">
<p class="text-white"><b>Lorem ipsum</b></p>
<p class="text-white">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
</p>
</div>
<div class="col border-right" style="width: 20%; flex-basis: unset;"></div>
</div>
<div class="row border-top">
<div class="col border-right" style="width: 20%; flex-basis: unset;"></div>
<div class="col bg-info-dark pt-3 pb-0 border-right" style="width: 80%; flex-basis: unset;">
<p class="text-white"><b>Lorem ipsum</b></p>
<p class="text-white">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
</p>
</div>
</div>
</div>
<div class="col-2 pt-3">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
</p>
</div>
</div>
Now I want this to be responsive. Horizontal scroll, or any other way, any suggestions would be greatly appreciated
The class col in bootstrap will divide the row into amount of col elements you added.To make it responsive specify width of element for each screen type, using such classes as col-sm-12 (full width on small devices), col-md-6 (two column grid for medium screens) etc. Don't forget, bootstrap is mobile first.
I am trying to create this grid with bootstrap:
I can easily create the first row no problem using cols. It would be simple enough to create a second row, however, the entire grid has a drop shadow, so even when I create a second row and just bump it up, I cant create a drop shadow under the entire grid.
I have tried nesting other cols inside the row but it doesn't work well since the columns are not the same width above and below.
Here is what I have so far: https://jsfiddle.net/5nk28tm0/
Using
display: flex;
padding-top:120px
padding-bottom:100px;
to keep the columns all the same height. Just need to add another row without losing the drop shadow ability. Not sure what to try from here. Any suggestions?
The problem is because the columns each have a varying height, hence the elements are not in proper order. If you use the CSS below, you can restrict the minimum height and all the elements will align accordingly.
.row > div {
min-height: 50px;
}
.home-testimonial {
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
box-shadow: 15px 10px 50px #e3e3e3;
align-content: center;
vertical-align: middle;
}
.col-sm-2 {
align-content: center;
vertical-align: middle;
padding-top: 120px;
padding-bottom: 100px;
}
.col-sm-4 {
padding-top: 50px;
color: #333e48;
}
.testimonial-body {
padding-left: 40px;
padding-right: 40px;
}
}
.row > div {
min-height: 50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="home-testimonial">
<div class="row">
<div class="col-xs-2 bg-success">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-4">
<p class="testimonial-body">
Placeholder text here. Lorem ipsum dolor sit amet.
</p>
</div>
<div class="col-xs-2">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-4">
Placeholder text here. Lorem ipsum dolor sit amet.
</div>
<div class="col-xs-4">
<p class="testimonial-body">
Placeholder text here. Lorem ipsum dolor sit amet.
</p>
</div>
<div class="col-xs-2">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-4">
Placeholder text here. Lorem ipsum dolor sit amet.
</div>
<div class="col-xs-2">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-2 bg-success">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-4">
<p class="testimonial-body">
Placeholder text here. Lorem ipsum dolor sit amet.
</p>
</div>
<div class="col-xs-2">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-4">
Placeholder text here. Lorem ipsum dolor sit amet.
</div>
<div class="col-xs-4">
<p class="testimonial-body">
Placeholder text here. Lorem ipsum dolor sit amet.
</p>
</div>
<div class="col-xs-2">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-4">
Placeholder text here. Lorem ipsum dolor sit amet.
</div>
<div class="col-xs-2">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-2 bg-success">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-4">
<p class="testimonial-body">
Placeholder text here. Lorem ipsum dolor sit amet.
</p>
</div>
<div class="col-xs-2">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-4">
Placeholder text here. Lorem ipsum dolor sit amet.
</div>
<div class="col-xs-4">
<p class="testimonial-body">
Placeholder text here. Lorem ipsum dolor sit amet.
</p>
</div>
<div class="col-xs-2">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-4">
Placeholder text here. Lorem ipsum dolor sit amet.
</div>
<div class="col-xs-2">
<img src="http://via.placeholder.com/140x44">
</div>
</div>
</div>
It might be worth checking out CSS Grid for this layout.
Hi I'm developing a page's div part as like in below image.
I heard about offset but I didn't use the offset. I've tried with some code given below.
<div class="row">
<div class="col-lg-offset-4 col-md-offset-4 col-sm-offset-4"></div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="text-center service-text">
<h1>our best services</h1>
<h2>business valuation</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus leo orci.</p>
<img src="images/ser_icon_1.png">
</div>
</div>
<div class="col-lg-offset-4 col-md-offset-4 col-sm-offset-4"></div>
</div>
But it results the div was aligned to the left.
How can I make empty space between the left and right side?. Thanks in advance.
<div class="row">
<div class="col-lg-offset-4 col-lg-4 col-md-offset-4 col-md-4 col-sm-offset-4 col-sm-4 col-xs-12">
<div class="text-center service-text">
<h1>our best services</h1>
<h2>business valuation</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus leo orci.</p>
<img src="images/ser_icon_1.png">
</div>
</div>
</div>
This should do it, Here's a snippet with this code working with bootstrap.
Your two divs around the main one are useless, if you want to give a div an offset, give it both the col-md-offset-x and col-md-x classes.
I am beginner of Bootstrap framework and i got the problem when i layout my design. I want to divide 4 column inside of a row-fluid so i write the code as below:
But it is not appear to what i expected, the text in first Lorem ipsum encroached to the second one and not fixed to 4 column
<div class="row-fluid">
<div class="span2"></div>
<div class="span8">
<div class="row-fluid">
<div class="span3">Lorem ipsum dolor sit amet</div>
<div class="span3">Lorem ipsum dolor sit amet</div>
<div class="span3">Lorem ipsum dolor sit amet</div>
<div class="span3">Lorem ipsum dolor sit amet</div>
</div>
</div>
<div class="span2"></div>
Please anyone can help me,thanks in advance
Try wrapping the html in div.container-fluid and closing the div tag for the row:
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">First</div>
<div class="span8">
<div class="row-fluid">
<div class="span3">Lorem ipsum dolor sit amet</div>
<div class="span3">Lorem ipsum dolor sit amet</div>
<div class="span3">Lorem ipsum dolor sit amet</div>
<div class="span3">Lorem ipsum dolor sit amet</div>
</div>
</div>
<div class="span2">Last</div>
</div>
</div>