I have a page with multiple columns, a header, and a footer. I want a column to scroll with the user, but not overlap the footer:
<html>
<head></head>
<body>
<div id="wrap">
<div id="main" class="clear-top">
<div class="col-lg-12">
<div class="row pl-4 justify-content-between pb-4">
<div class="col-lg-1 col-md-12 col-sm-12 ">
</div>
<div class="col-lg-7 col-md-12 col-sm-12 ">
... Main Content ...
</div>
<div class="col-lg-4 col-md-12 col-sm-12 p-4 sidebar-container">
... Content I want to Scroll with User ...
</div>
</div>
</div>
</div>
</div>
</body>
<footer class="footer">
<div class="container">
</div>
</footer>
</html>
CSS:
// General Styling
html, body{
height: 100%;
}
#wrap {
min-height: 100%;
}
#main {
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}
.footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
width: 100%;
bottom: 0;
}
I'm using Bootstrap 4, so I've tried adding the sticky-top class to the column I want to scroll, however nothing changed.
I've tried changing the position of the column to sticky, but again nothing seems to change. Am I adding this to the wrong div?
As per my understanding, you are looking forward to have a sidebar which floats through the content. If that's the case here is the solution. I have used sticky-top which sticks your side-nav to the top. No need to use any CSS to align your footer to the bottom. You can use bootstrap inbuilt class d-flex flex-column min-vh-100 to your main container and use mt-auto to your footer. This will align your footer to the bottom of the page
.custom-container {
height: 500vh;
}
ul {
list-style: none;
padding: 0
}
footer {
background: yellow
}
#side-nav {
background: blue;
height: 100%
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container-fluid d-flex flex-column min-vh-100">
<div class="row">
<div class="col-sm-4">
<div id="side-nav">
<ul class="sticky-top text-center">
<li><button id=1>Link1</button></li>
<li><button id=2>Link2</button></li>
<li><button id=3>Link3</button></li>
</ul>
</div>
</div>
<div class="col-sm-8 ">
<div class="custom-container">
<h2>Content that scrolls</h2>
<h5>What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a
type specimen book it has?</h5>
</div>
</div>
</div>
<footer class="mt-auto">footer</footer>
</body>
</div>
Related
Is it possible to have a grid like the first one on desktop moving to the second one on mobile with bootstrap4 or, else, with pure css flex classes ?
Desktop view:
Mobile view :
For the moment my solution is the following one, but I do not like to repeat green content in two places. Can I avoid that please ?
<div class="container">
<main class="row">
<section class="col-lg-8 ecran">
<div class="row mes-contrats justify-content-around">
<div class="col-12">
lot's of content in red container
</div>
</div>
<div class="row infos justify-content-around d-none d-lg-block">
<div class="col-12">
lot's of content in green container
</div>
</div>
</section>
<div class="col-lg-4 asides">
<div class="row">
<div class="col-12">
lot's of content in blue container
</div>
<div class="col-12 d-block d-lg-none">
lot's of content in green container
</div>
</div>
</div>
</main>
This solution is not pure bootstrap because to achieve the solution I used the position absolute and bootstrap does not have the mobile breakpoints on the position-absolute utility.
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<style>
.cnt-red { border: 5px solid red; }
.cnt-blue { border: 5px solid blue; }
.cnt-green { border: 5px solid green; }
#media (min-width: 576px) {
.cnt-left { width: 75%; }
.cnt-right { width: 25%; right: 0; top:0; position: absolute; }
}
</style>
</head>
<body>
<div class="d-flex flex-column ">
<div class="p-2 cnt-left flex-grow-1 cnt-red flex-fill">Flex item 1</div>
<div class="p-2 cnt-right cnt-blue flex-fill">Flex item 2: Lorem ipsum dolor sit amet consectetur adipisicing elit... </div>
<div class="p-2 cnt-left cnt-green flex-fill">Flex item 3</div>
</div>
</body>
</html>
I'm working with Bootstrap 4 and I've been searching for a solution to my ordering issue, but can't seem to get it right or find one in the archives. Here's the situation...
On a desktop, I need the following layout:
Then on a mobile device, the layout should look like:
Box 1 is given a class of "col-md-8", and Box 2 is given the class "col-md-4". But for the life of me, I can't figure out how to properly place Box 3 (or the proper class) to get it to appear correctly in both layouts. Anyone have any thoughts?
I appreciate the help in advance!
EDIT (2018/6/26):
Here's the resulting code that works:
<main id="body" role="maincontent">
<div class="container">
<h1>Page Title</h1>
<div class="row d-flex d-md-block clearfix">
<div class="col-md-8 main_content float-left">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="col-md-4 highlight float-right">
<p>Second Item</p>
</div>
<div class="col-md-4 float-left">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
</main>
This has already been answered in similar questions such as: One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4
Since BS4 uses flexbox, disable the flexbox using d-md-block, and use float- to make the 2nd column pull right on md screens...
<div class="container">
<div class="row d-flex d-md-block">
<div class="col-md-8 float-left">
1
</div>
<div class="col-md-4 float-right">
2
</div>
<div class="col-md-8">
3
</div>
</div>
</div>
https://www.codeply.com/go/4HZq18NKln
For mobile devices try using media queries and grid classes small. For instance, box1 col-sm-4 you can reference this guide https://getbootstrap.com/docs/4.0/layout/grid/
`something {
padding: 5px;
#include media-breakpoint-up(sm) {
padding: 20px;
}
#include media-breakpoint-up(md) {
padding: 40px;
}
For ordering, you can use ordering property and here is the mdn ref https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items
You can reference this post Using media breakpoints in Bootstrap 4-alpha
Hope that will help you.
Assume phone screen width is 425px based on Google Chrome. Copy and paste the code and open in your browser to see the actual result.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
h1 {
color: #fff;
}
.left, .right {
height: 800px;
}
.one {
height: 500px;
background-color: red;
}
.two {
height: 100%;
background-color: green;
}
.three {
margin-top: 0.5em;
height: 275px;
background-color: blue;
}
#media screen and (max-width: 425px) {
.two {
width: 50%;
position: absolute;
left: 25%;
top: -285px;
}
.three {
margin-top: 51em;
}
}
</style>
</head>
<body>
<div class="row p-0 m-0">
<div class="left col-md-8 col-sm-12 p-2">
<div class="row p-0 m-0">
<div class="one col-12"><h1>One</h1></div>
<div class="three col-12"><h1>Three</h1></div>
</div>
</div>
<div class="right col-md-4 col-sm-12 p-2">
<div class="two"><h1>Two</h1></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.js"></script>
<script>
</script>
</body>
</html>
I'm building a sidebar using the grid system in Bootstrap 4, and the Flexbox utility. For the most part, I have it working, except that I would like to have the sidebar be "static," that is, it should not move when the user scrolls on the page next to it.
I attempted to do this by adding position:fixed to it, but when I did that, the column the sidebar was in was reduced in size to the length of the longest string that was there.
How do I make the sidebar stay fixed in place, while maintaining column width?
Here's my code: (It's a React app, so "class" is replaced with "className")
Parent component:
{ this.state.isLoggedIn ?
<div className="row h-100">
<div className="col-2 no-padding-right">
<Sidebar />
</div>
<div className="col-10 no-padding-left">
<Main />
</div>
</div> :
<Main />
}
The sidebar itself:
<div className="d-flex h-100 align-items-start sidebar-left flex-column sidebar-background sidebar-text">
<div className="p-2">
Week 11
</div>
<div className="mb-auto align-self-stretch h-100 p-2">Leagues/Teams</div>
<div className="p-2">Current Features</div>
<div className="p-2">Feature Request</div>
<div className="p-2">Settings</div>
<div className="p-2">Billing</div>
<div className="p-2">Log Out</div>
</div>
And the relevant piece of CSS:
.sidebar-left {
padding-top: 83px;
position: fixed;
}
Thanks!
Apply the max-width to the sidebar-left is equal to how much your col have.
.sidebar-left {
max-width: 16.666667%;
}
Stack Snippet
body {
margin: 0;
}
.sidebar-left {
font: 13px Verdana;
padding-top: 83px;
position: fixed;
background: red;
max-width: 16.666667%;
left: 0;
top: 0;
overflow: auto;
}
.p-2 {
word-break: break-word;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="row h-100">
<div class="col-2 no-padding-right">
<div class="d-flex h-100 align-items-start sidebar-left flex-column sidebar-background sidebar-text">
<div class="p-2">
Week 11
</div>
<div class="mb-auto align-self-stretch h-100 p-2">Leagues/Teams</div>
<div class="p-2">Current Features</div>
<div class="p-2">Feature Request</div>
<div class="p-2">Settings</div>
<div class="p-2">Billing</div>
<div class="p-2">Log Out</div>
</div>
</div>
<div class="col-10 no-padding-left">
<div class="main"></div>
</div>
</div>
I desinged my personal webpage in non-responsive way, it's shaped to be properly displayed #1920x1080 screen. Now, I want it to be responsive, so I began my adventure with Bootstrap. I know that columns must sum to 12, but my webpage has it content in 2 divs, 100% wide each (visit my website and scroll to the right to see what I'm talking about).
My question is - how to port that layout to my responsive project? Is there any way to put 2 container-fluid divs in one row?
Add a wrapper, give it 200vw width and display: flex
html, body {
margin: 0;
}
.wrapper {
width: 200vw;
display: flex;
}
.container-fluid {
flex: 1;
background: lightgray
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
First
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
Second
</div>
</div>
</div>
</div>
or display: inline-block
html, body {
margin: 0;
}
.wrapper {
white-space: nowrap;
}
.container-fluid {
display: inline-block;
width: 100%;
background: lightgray;
white-space: normal;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
First
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
Second
</div>
</div>
</div>
</div>
The row must be in container-fluid and not the opposite. To create two div 100% wide you can:
<section class="container-fluid">
<div class="row">
<div class="col-xs-12">
First div 100% width for all device
</div>
</div>
<div class="row">
<div class="col-xs-12">
Second div 100% width for all device
</div>
</div>
</section>
How can I set margin for div inside column div in bootstrap, like in the code I am trying to make margin 5px but it doesnt work!
<div class="container bg_red">
<h1>Test DIV boxes</h1>
<div class="row">
<div class="col-md-3 thin_border bg_green">
<div class="bg_blue">
Some content here for panel 1
</div>
</div>
<div class="col-md-9 thin_border">
Some content here for panel 2
</div>
</div>
</div>
Is this what you wanted? Check the margin-5 class that is added to one div and not the other so you can see the difference.
.thin_border {
border: 1px solid #EFEFEF;
}
.margin-5{
margin: 5px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container bg_red">
<h1>Test DIV boxes</h1>
<div class="row">
<div class="col-md-3 thin_border bg_green">
<div class="bg_blue margin-5">
Some content here for panel 1
</div>
</div>
<div class="col-md-9 thin_border">
Some content here for panel 2
</div>
</div>
</div>