I am building a layout with bootstrap. In the design most of the elements are boxed (so I use the "container" class).
Some rows have 1 column that is inside the container but 1 other column that needs to break out of the container and be full width.
Here is an image of what I want to achieve:
I really struggle to create that layout. Any ideas?
Here is a codepen of the code below: https://codepen.io/leonfrombeawwwer/pen/bXGvQb
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<div class="container">
<div class="row">
<div class="col-6">
<div class="green-box"></div>
</div>
<div class="col-6">
<div class="blue-box"></div>
</div>
</div>
</div>
.green-box {
background: green;
height: 200px;
}
.blue-box {
background: blue;
height: 200px;
}
I tried a container-fluid container with percentage width for the one column that needs to stay inside in boxed layout. But that pushes all the other elements f.e. header navigation too.
I also tried absolute positioning and played with flexbox. Nothing ended up in a result that is useful in all viewports.
Thanks for your help.
I found the solution now. Please find it in that codepen: [https://codepen.io/leonfrombeawwwer/pen/bXGvQb][1]
[https://codepen.io/leonfrombeawwwer/pen/bXGvQb]1
or here:
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<div class="container-fluid relative-container">
<div class="row">
<div class="col-md-6 placeholder"></div>
<div class="col-6">
<div class="green-box absolute-full-width-image"></div>
</div>
</div> <!-- .row -->
</div> <!-- .container-fluid .relative-container -->
<div class="container">
<div class="row">
<div class="col-6">
<div class="blue-box"></div>
</div>
<div class="col-md-6 placeholder"></div>
</div> <!-- .row -->
</div> <!-- .container -->
.green-box {
background: green;
height: 200px;
}
.blue-box {
background: blue;
height: 200px;
width: 120%;
}
.relative-container {
position relative;
}
.absolute-full-width-image {
position: absolute;
right: 0;
width: 110%;
}
Related
How can I get a Bootstrap 5 grid row to span its entire content vertically? In the example below, if I add a label element the content of the first row flows over the second row.
<!doctype html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
.ql-container {
box-sizing: border-box;
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
height: 100%;
margin: 0px;
position: relative;
}
.ql-snow {
box-sizing: border-box;
border: 1px solid #d1d5db;
}
.ql-editor {
box-sizing: border-box;
line-height: 1.42;
height: 100%;
outline: none;
overflow-y: auto;
padding: 12px 15px;
-o-tab-size: 4;
tab-size: 4;
-moz-tab-size: 4;
text-align: left;
white-space: pre-wrap;
word-wrap: break-word;
}
</style>
</head>
<body>
<div class="container">
<form class="my-3">
<div class="row py-2">
<div class="col-md-12">
<label for="txtBox" class="form-label">Title</label>
<div id="txtBox" class="ql-container ql-snow">
<div class="ql-editor">
<p>TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE</p>
</div>
</div>
</div>
</div>
<div class="row py-2">
<div class="col-md-12">
next row
</div>
</div>
</form>
</div>
</body>
</html>
Edit 1:
Smaller example
<!doctype html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
.ql-container {
height: 100%;
position: relative;
border: 1px solid #d1d5db;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
Title
<div id="txtBox" class="ql-container">
<p>
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
</p>
</div>
</div>
</div>
<div class="row">
<div class="col">
next row
</div>
</div>
</div>
</body>
</html>
This overlap is being caused by your style rule:
<style>
.ql-container {
height: 100%;
...
}
</style>
Along with the html structure:
<div class="col"><!-- this is the parent element -->
Title <!-- the height of this text is same as overlap -->
<div id="txtBox" class="ql-container">
<!-- because this element's height is 100% of the parent -->
</div>
</div>
If you must have the style rule, for reasons not made apparent in your question, then the solution is to
Either: Make a whole new .row with .col for the text Title:
<div class="row">
<div class="col">
Title <!-- the height of this text no longer has affect -->
</div>
</div>
<div class="row">
<div class="col"><!-- this is the parent element -->
<div id="txtBox" class="ql-container">
<!-- this element's height is 100% of the parent -->
</div>
</div>
</div>
Or: Just put Title in its own .col-12 forcing subsequent .col(s) to wrap to the next line.
<div class="row">
<div class="col-12">
Title <!-- the height of this text no longer has affect -->
</div>
<div class="col"><!-- this is the parent element -->
<div id="txtBox" class="ql-container">
<!-- this element's height is 100% of the parent -->
</div>
</div>
</div>
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 want to create a dashboard from scratch for learning purposes using Bootstrap 3.3.7. I have problem with the left hand menu. I want it to occupy the whole area it gets (col-lg-1 column and 100% height). My problem is that the min-height:100% with height: auto doesn't work, but min-height:xxx px works well.
I saw other posts here saying that min-height:100% should work.
What I'm doing wrong?
Here is the plunker.
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<main style="margin-top: 0px; padding-top: 0px; padding-bottom: 0px;">
<div class="container-fluid padding-left-zero padding-right-zero">
<div class="container-fluid padding-left-zero padding-right-zero">
<div style="margin-bottom: -20px;">
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
<div class=" container-fluid row">
<div class="pull-left">
<a class="navbar-brand" href="/">Dashboard</a>
</div>
<div style="height: 50px; padding: 15px;" class="pull-right">
<select>
<option value="module">value</option>
</select>
</div>
</div>
</nav>
</div>
</div>
<div class="row container-fluid padding-left-zero padding-right-zero">
<!-- code of lenfthandmenu -->
<!-- <div class="col-lg-1 pull-left navbar-inverse fill">
<div ui-view="leftHandMenu"></div>
</div>-->
<div class="col-lg-1 pull-left navbar-inverse fill2">
<div ui-view="leftHandMenu"></div>
</div>
<div class="col-lg-11 pull-right">
<div ui-view="mainContent"></div>
</div>
</div>
<div>
<div class="navbar navbar-inverse navbar-fixed-bottom">Navbar bottom</div>
</div>
</div>
</main>
</body>
</html>
Css:
/* Styles go here */
body {
padding-top: 50px;
}
.padding-left-zero {
padding-left: 0px;
}
.padding-right-zero {
padding-right: 0px;
}
li {
list-style: none;
}
.silver-text {
color: silver;
}
.min-width-100-percent {
min-width: 100%;
}
.fill {
min-height: 100%;
height: auto;
}
.fill2 {
min-height: 300px;
height: auto;
}
Apply absolute position property and height as 100% like below.
.fill2 {
position:absolute;
height: 100%;
}
DEMO
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>