I am looking at achieving the below image. I am not really sure on how to get the css working for the below structure. Should I be making DIV2 absolute?
I want the nav, div1 and div2 to occupy full height of the broswer.
My HTML skeletal is as follows.
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
</a>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div>
DIV 1
</div>
<div>
DIV 2
</div>
</div>
</div>
</div>
</body>
Set <html> and <body> to have 100% height, then set height on the divs to however large you want them to be (say 80%), as well as the container for the divs. Percentage height is based on the parent of the element.
I have provided a non-bootstrap answer, to help you understand the flexbox.
Setting the parent container to full height is the first step.
.container{
display: flex;
height: 100vw;
flex-direction: column;
}
Then by using flex: 1; we allow the children to take all the available space.
Last step is to limit the max-height of the second child by using max-height.
Working example here
Here you can find the CSS styles based on your HTML structure. The code is not responsive but it will give you an idea on how to go about solving your own problem.
body {
margin: 0;
}
.navbar {
background: blue;
height: 50px;
}
.container-fluid .row .col-md-6 {
max-width: 60%;
margin: 0 auto;
display: flex;
flex-direction: column;
// 50px is height of the navbar so subtracting it from total height
height: calc(100vh - 50px);
}
.col-md-6 > div {
display: flex;
justify-content: center;
align-content: center;
font-size: 30px;
}
.col-md-6 div:first-child {
flex: 1;
min-height: 400px;
/*Setting minimum height so height of div will not go below 400px otherwise it will get smaller than div2 due to flex:1
flex: 1 takes 100% of height - 50px - 100px
*/
background-color: red;
}
.col-md-6 div:last-child {
height: 100px;
background-color: green;
}
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
</a>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div>
DIV 1
</div>
<div>
DIV 2
</div>
</div>
</div>
</div>
Do not use bootstrap grid.
Use flexbox.
Parent div must have 100% height, display: flex and column direction. Think that way.
you have to use container class instead of container-fluid to have div centered on page
her the code
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
</a>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<div>
DIV 1
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div>
DIV 2
</div>
</div>
</div>
</div>
for height you can use vh css unities OR use Felxbox and if you chose this second solution probably you can use V4 of BS
Related
In my application, there's a login page having a bootstrap customized well containing login form. Looks like this
Code was like
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<div class="animated fadeInDown">
<div class="well no-padding">
<!-- Content Of Login Form -->
</div>
</div>
</div>
<div class="col-lg-4"></div>
</div>
Now, I have to put this on the center of the page. horizontally and vertically. So I removed the and all the bootstrap column grids. Put the well inside the custom container having display flex property.
<div class="login-container">
<div class="animated fadeInDown">
<div class="well no-padding">
<!-- Content Of Login Form -->
</div>
</div>
</div>
CSS of .login-container
.login-container {
position: fixed;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
Now, the login form looks like this
How to get the same responsive width as I have previously inside the bootstrap col-lg-4 grid of the well. I tried to give the grids inside the container but that didn't work for me. I want the login form something like this without hardcoding width, something like this.
This I have done just for the question purpose by hardcoding width of the well.
The property position: fixed does not respect the width of the parent box if you want it to take up the full width, so one solution would be to calculate the width of the parent box using jQuery code and apply it to the child box. Here is an example:
let parentWidth = parseInt($('.col-sm-4.login-container').css('width'));
let parentPadding = parseInt($('.col-sm-4.login-container').css('padding').split(' ')[1]) * 2;
let childWidth = parentWidth - parentPadding;
$('.login').css('width', childWidth);
.container {
background: black;
}
.col-sm-4 {
background: #eee;
height: 100vh;
}
.login-container {
display: flex;
align-items: center;
}
.login {
width: 100%;
height: 100px;
background: red;
position: fixed;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4 login-container">
<div class="login"></div>
</div>
<div class="col-sm-4"></div>
</div>
</div>
I hope it helps you.
I've got a fairly simple Bootstrap 3 based layout where I want the main element (a central div) to expand or contract vertically to fill the available space as the browser window is resized, but allowing for a couple of elements below that, so that the height of all the elements neither overflows the window height (thus causing a scroll bar to appear) or underflows (thus wasting visible vertical space in the window).
Closest I can get to achieving this is as follows. Problem is that the ".90-height" class (height: 90%) either leads to slightly too little or slightly too much total height for all the elements, depending on vertical window size.
CSS:
.full-height { height: 100%; }
.90-height { height: 90%; }
.doborder { border: 1px solid; border-color: #ddd; border-radius: 4px; }
.controlsdiv { display: table; width: 100%; }
HTML:
<html class="full-height">
<body class="full-height">
<div class="navbar navbar-fixed-top" style="min-height:20px !important;">
<div class="container-fluid full-height">
<div class="row 90-height">
<div class="90-height"> <-- Main column -->
<div class="doborder full-height">
<-- Content here -->
</div>
<div class="controlsdiv">
<-- Couple of controls in here -->
</div>
</div> <-- End main column -->
</div> <-- End row -->
<footer style="margin-top: 30px;">
<span>Some text</span>
</footer>
</div> <-- End container -->
</body>
</html>
Only thing is I can't simplify this structure at all - i.e. remove any of the elements as I need them all for various things.
There are a few different ways you could approach it. Also reminder that CSS class names shouldn't start with numbers. You could use CSS calc() to subtract the height of the footer from the body. You only need to use height-90 once on the main container.
CSS calc() Demo http://www.codeply.com/go/mbXpavYiV8
.height-90 { height:calc(100% - 50px); }
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header"><a class="navbar-brand" href="#">Brand</a></div>
<ul class="nav navbar-nav">
<li>Link</li>
</ul>
</div>
<div class="container-fluid height-90 bg-info">
<div class="row">
<div class="">
</div>
<div class="controlsdiv">
</div>
</div>
</div>
<footer style="margin-top: 30px;">
<span>Some text</span>
</footer>
Another solution is to use flexbox..
.full-height { display: flex; flex-direction: column; height: 100%; }
.fill-height { flex-grow: 1; width: 100%; }
Flexbox Demo http://www.codeply.com/go/tFUf5XFe29
This is my css:
html{
position: relative;
height: 100%;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
min-height: 100%;
margin-bottom: 60px;
}
.container {
padding-top: 50px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
.footer p{
line-height: 60px;
}
.messages {
/*background-color: blue;*/
min-height: 100% !important;
height: 100% !important;
}
This is my markup (using blaze for template rendering):
<template name="messages">
<div class="container messages">
<div class="row">
<div class="col-md-3 conversations">
{{> message}}
</div>
<div class="col-md-9 conversation-holder">
<h1>John Doe</h1>
<div class="conversation">
</div>
</div>
</div>
</div>
</template>
This is my output:
What I want is that the line between the list of conversations and the title(John Doe( on the right) should be of 100% height and that any overflow should be scrollable.
I have set the min-height and height of the .messages container to be 100% with the !important but it does not work i do not know why.
How do I make it 100%? Thanks.
P.S: Here is the template after rendering:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="__blaze-root">
<nav class="navbar navbar-inverse navbar-fixed-top">
<!-- navbar stuff removed for better understanding-->
</nav>
<div class="container messages">
<div class="row">
<div class="col-md-3 conversations">
<a href="#">
<div class="message">
<div class="conversation-title">
<img class="pull-left img-circle" height="50px" src="/images/dummy-profile-pic.png" width="auto">
<p class="pull-left">John Doe</p>
</div>
</div></a>
</div>
<div class="col-md-9 conversation-holder">
<h1>John Doe</h1>
<div class="conversation"></div>
</div>
</div>
</div>
<footer class="footer">
<p class="text-muted">Place sticky footer content here.</p>
</footer>
</div>
</body>
</html>
Just realized that you are using bootstrap framework. You have to cascade the height from the parent div to the inner div till it reaches the .message element.
Otherwise, you can't set the height as 100%. (Any padding or margin in the intermediate div would introduce vertical scroll)
Fiddle that shows the 100% to 2 level down from the body tag.
http://jsfiddle.net/skelly/zrbgw/
Solution 2: You have to use position:absolute for .message
Solution 3: You can use position:fixed
But solution 2 & 3 will remove the elements out of the content flow resulting in need of setting a proper parent height.
I'd like to use Twitter Bootstrap for one project which has a bit of a crazy layout.
The logo's background should start from the edge of the window, but the text in the logo should start where the .container begins.
Crazy, huh!
I'm not sure how to explain this so I drew it!
What I've done so far is this:
<div class="container">
<header>
<div id="logo" class="pull-left col-sm-3 bg-theme">
<div class="typography">
Dope
<br/>
Text
</div>
</div>
<div class="col-sm-9">
<nav class="pull-right"> nav should be here </nav>
</div>
</header>
<!-- header -->
</div>
#logo {
position: relative;
height: 100px;
background: #ffd800;
}
.typography {
position: absolute;
right: 0px;
top: 20px;
line-height: 50px;
font-size: 50px;
font-weight: bold;
}
I created a demo#jsFiddle.
How should I structure my HTML, or what can I do with the CSS to achieve this effect.
CSS only solutions if possible.
Edit: Those kind of title element might appear on the page again, so solutions which are based on the fact that the element will be at the top of the page are not what I'm after.
First of all you have to take into account Grid System Rules:
Some Bootstrap grid system rules:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding
Use rows to create horizontal groups of columns
Content should be placed within columns, and only columns may be immediate children of rows
Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via
negative margin on .rows
Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use
three .col-sm-4
So following the above rules you can achieve what you want like this:
Here a working JSFiddle fork from yours
#logo {
position: relative;
height: 100px;
background: #ffd800;
}
.container {
height: 500px;
}
.typography {
line-height: 35px;
font-size: 35px;
font-weight: bold;
padding-left: 0 !important; /*only because bootstrap are overwriting my styles*/
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper container-fluid">
<header>
<div class="row">
<div id="logo" class="pull-left col-xs-5 bg-theme">
<div class="row">
<div class="col-xs-offset-5 col-xs-7 typography">Dope
<br/>Text</div>
</div>
</div>
<div class="col-xs-7">
<nav class="pull-right">nav should be here</nav>
</div>
</div>
</header>
<div class="row">
<div class="container col-xs-offset-2 col-xs-8">
<p>Here you can put the content</p>
<p>and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more content</p>
</div>
</div>
</div>
You can change the # in col-xs-X as you wish to obtain your desire layout but always trying to follow the above rules.
I recommend making the following changes.
Start by making a .container-fluid
Then move your .container into your .container-fluid
lastly, move your header above your .container, but inside your .container-fluid
Once complete it should look something like.
<div class="container-fluid">
<header class="col-md-12>
<div id="logo" class="pull-left col-sm-3 bg-theme">
<div class="typography">
Dope
<br/>
Text
</div>
</div>
<div class="col-sm-9">
<nav class="pull-right"> nav should be here </nav>
</div>
</header>
<!-- Header -->
<div class="container">
<!-- Other content -->
</div>
</div>
would something like this work? http://jsfiddle.net/swm53ran/312/
if you want to see how the structure could happen over and over again, you could just add the sectioned off divs like in this fiddle: http://jsfiddle.net/swm53ran/313/
<div class="body">
<div class="header col-xs-12">
<div class="row">
<div class="title col-xs-offset-1 col-xs-5">
This is the title
</div>
<div class="nav col-xs-5">
This is your nav
</div>
</div>
</div>
<div class="container col-xs-10 col-xs-offset-1">
This is where your content goes.
</div>
</div>
Use the grid system to isolate header and body:
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8">.col-md-8</div>
</div>
<div class="row">
<div class="col-md-2">.col-md-2</div>
<div class="col-md-4">.col-md-8</div>
<div class="col-md-2">.col-md-2</div>
</div>
</div>
Use .container-fluid for the content you want to be full width instead of the fixed-width that comes with .container.
Per Bootstrap:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
If you want container-fluid to go the absolute edge of the window, you can set padding: 0; like:
.container-fluid {
padding: 0;
}
Here's a fiddle demo for you to review. http://jsfiddle.net/xsqezfro/ (I put a border around .container so you can see the div.
#logo {
display:inline-flex;
margin-left:-200px;
background: #ffd800;
}
#logo .typography {
margin-left:200px;
}
At the moment my html page has 2 divs that hold all the information on the page one underneath the other. Now I want there to be a side bar to the left of them spanning down the entire page.
<div class="container">
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">Group 1</div>
<div class="panel-body">
<div class='contentWrapper ng-cloak'>
<div class='content'>
<ul class="thumbnails">
<p>
content
</p>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">Group 2</div>
<div class="panel-body">
<div class='contentWrapper ng-cloak'>
<div class='content'>
<ul class="thumbnails">
<p>
content
</p>
</ul>
</div>
</div>
</div>
</div>
</div>
I would normally do this using the bootstrap grid template, however I am using an angular drag and drop library and using that (for some reason) messes up the animations when things are being moved around.
What would be the easiest way of adding in another div to act as a side menu always to the left of the two divs shown?
You can do something like this:
.sidebar {
background: #eee;
width: 100px;
height: 50px;
margin-right: -100%;
margin-bottom: 10px;
position: relative;
display: block;
overflow: visible;
float: left;
box-sizing: border-box;
}
.page-content {
background: #aaa;
margin-left: 100px;
}
<div class="container">
<div class="sidebar-wrapper">
<div class="sidebar">
SIDEBAR<br>
AT LEFT;
</div>
</div>
<div class="page-content-wrapper">
<div class="page-content">
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">Group 1</div>
<div class="panel-body">
<div class='contentWrapper ng-cloak'>
<div class='content'>
<ul class="thumbnails">
<p>
content
</p>
</ul>
</div>
</div>
</div>
</div>
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">Group 2</div>
<div class="panel-body">
<div class='contentWrapper ng-cloak'>
<div class='content'>
<ul class="thumbnails">
<p>
content
</p>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Trade-offs of this approach:
You need to put a fixed width to your sidebar (either by px, %, or anything)
You need either to have a fixed height or to let the sidebar has the height of the content (you can't put height: 100%;)
You can float a sidebar left, but to have it fill the page’s full height all its ancestor elements must have height: 100%. If .sidebar is directly under body, these styles will do it:
html, body, .sidebar { height: 100% }
.sidebar { float: left }
Sample, with tinted backgrounds to show block outlines.
I m not sure I understand entirely the question so I ll try to answer.
I would create a div with float left css to have a nav within for your left menu and if it has to be all along the page . And another div either float right or none to keep the 2 divs you created.
You can use flexbox (adjust your needs)
CSS
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
flex-flow: row nowrap;
}
.flex-item {
-webkit-flex: 1 auto;
flex: 1 auto;
}
DEMO HERE
Wrap it all in a container with
display: table;
width: 100%;
table-layout: fixed;
then create a sidebar div with
display:table-cell;
vertical-align:top;
width:35%;
and wrap your content in a container with
display:table-cell;
vertical-align:top;
width:100%;
make sure your side bare is above your content for it to be on the left.
and that's you a flexible grid with a sidebar.
You can use col-md-3 and col-md-9 for sidebar and content respectively. Fix the sidebar using position: fixed
BootPly Demo