I'm trying to make two-column full-height layout with bootstrap 4. What I want to do is:
+-------------------------------------------------+
| Logo Header Another Logo| - height 10 %
+----------------------------------+--------------+ -
| | Content 2 | - height 10 % |
| |--------------| |
| | | |
| | width | |
| Content 1 - width 70% | 30% | - height 60% | - height total 90%
| | Content 3 | |
| | | |
| +--------------+ |
| | Content 4 | - height 20% |
+----------------------------------+--------------+ -
All the contents should be visible in screen without scrolling. I want to squeeze or extent the widths and heights according to resolution. That means i strictly want to avoid scrolling.
Note: this design is only for desktop view i.e. width > 768 px. So no need to think about mobile view.
That's all you need from Bootstrap 4 classes in this case
html, body, .project {height: 100%}
* {box-sizing: border-box}
.project div {border:1px solid #eee}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="project text-center">
<div class="d-flex justify-content-between" style="height: 10%">
<div>logo</div>
<div>Header</div>
<div>Another logo</div>
</div>
<div class="d-flex" style="height:90%">
<div class="mb-auto mt-auto" style="min-width:70%;">Content 1 - width 70% - Always center at horizontal and vertical</div>
<div class="d-flex flex-column" style="min-width:30%;">
<div class="mb-auto" style="height:10%">Content 2 - height 10%</div>
<div style="height:60%">Content 3 - width 30% - height 60%</div>
<div class="mt-auto" style="height:20%">Content 4 - height 20%</div>
</div>
</div>
</div>
Related
I'm trying implement a component with Bootstrap 4 that looks something like this:
+-------------------------+
| Row 1 - Top |
+-------------------------+
| |
| |
+-------------------------+
| Row 2 - Vertical Center |
+-------------------------+
| |
| |
| |
| |
+-------------------------+
The height of the container is supposed to be 100vh.
According to my understanding, using flex would be an approach to solve this problem.
This is the markup I currently have: http://codeply.com/go/RRMwIHt8QA
As you can see, there seems to be some kind of offset of Row 2. Any ideas what's causing this and how to make the row take the full width of the available space?
To accomplish that you first need to add flex-column to the container so the row's stack vertically.
Then the row's need align-items-start align-content-start to prevent them from stretching.
Finally, using a pseudo, here ::after, you can match the first row so the second row can be vertically centered. An alternative is to position the first row absolute, though I find the pseudo version more responsive.
Fiddle demo
Stack snippet
.test-container {
height: 100vh;
}
.test-container .row:first-child,
.test-container::after {
content: '';
flex: 1 1 0;
}
/* styling for this demo */
.test-container .row > div {
border: 1px dashed lightgray;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-column container-fluid test-container">
<div class="row align-items-start align-content-start">
<div class="col-4">R1-C1</div>
<div class="col-4">R1-C2</div>
<div class="col-4">R1-C3</div>
</div>
<div class="row align-items-start align-content-start">
<div class="col-4">R2-C1</div>
<div class="col-4">R2-C2</div>
<div class="col-4">R2-C3</div>
</div>
</div>
It's the d-flex class that give you problems
Remove it or check here what better fits your needs
I have a Bootstrap 3 layout with the following structure:
<div class="row row-full">
<div class="col col-lg-6 col-md-12">
<div class="row row-middle">
<h1>Some Title</h1>
<h3>SubTitle</h3>
</div>
<div class="row row-bottom">
<h1>Some Title</h1>
<h3>SubTitle</h3>
</div>
</div>
</div>
And this is my customization with the CSS:
.row-full{
height:100%;
}
.row-full .col{
height:100%;
}
.row-bottom, .row-middle{
height:50%;
}
And I end up with the following layout from a large screen:
--------------------------------------
| Title | |
| SubTitle | |
| | |
--------------------------------------
| Title | |
| SubTitle | |
| | |
--------------------------------------
So in my layout the main row takes 100% of the screen and same applies for the column. Each sub-row, takes 50% of the height but I need also to be able to set the vertical alignment inside the column because it is a responsive layout.
I tried with FlexBox but it mess up my grid system.
What is the correct way by using Bootstrap 3.0?
What I need is the ability to vertical align the content inside the rows.
I found several similar posts, but not a solution for this problem. I'm trying to do this:
| +---------------------+ +---------------------+ +------------------------------+ |
| | Input | | Input | | Button | |
| | 50% remaining width | | 50% remaining width | | fixed width based on content | |
| +---------------------+ +---------------------+ +------------------------------+ |
two input fields and a button on the same line (the screen width, not fixed)
the button floats on the right (with the size dependent on the content, not fixed)
the two input fields float on the left (filling the rest of the line 50% each one)
instead when the screen width is less than a defined minimum, these 3 elements fill a line each one
I tried several codes, but I cannot find a working and responsive solution. This is the better (but still not correct) solution I made:
<html>
<head>
<style type="text/css" media="screen">
.container {width: 100%; display:table;}
.left-side{display:table-cell; vertical-align:middle}
.left-side .fields {width: 100%;}
.form-control {width: 49%}
.right-side {float:right}
</style>
</head>
<body>
<div class="container">
<div class="left-side">
<div class="fields">
<input type="text" class="form-control" />
<input type="text" class="form-control" />
</div>
</div>
<div class="right-side">
<button type="submit" class="">Search</button>
</div>
</div>
</body>
</html>
Maybe there are better ways to do it. Could you help me? Thanks!
Even this is pretty old topic, I tried to make a solution. Left side with inputs is maximized (100% width) table-cell, right side table-cell with undefined length. Content of both table cells with nowrap.
Check the fiddle here: http://jsfiddle.net/jpavel76/hL5ggv4L/
+-------------+ +---------------------------------+
| | | |
| 1 | | |
| left-nav | | |
| | | |
+-------------+ | 3 |
| | | |
| | | |
| 2 | | very long contents here |
| | | which causes to scroll |
| other | | vertical bar. Setting |
| remaining | | this content to 100% height? |
+-------------+ +---------------------------------+
What is height: 100%; actually? Is it applied to a page window or till the scroll ends?
I have following html...
<div id="wrapper">
<div id="left-nav">
<!--contents of 1-->
</div>
<div id="yourad">
<!--contents of 2--->
</div>
<div id="main-contents">
<!--contents of 3-->
</div>
</div>
My css is as follows....
#wrapper{position: relative; width: 1007px; margin: 0 auto;}
#left-nav{width: 329px; height: 100%; background: grey;float: left;}
#yourad{height: 100%; background: blue;}
#main-contents{margin-left: 329px; padding: 10px; background: pink;}
****Note: ****
First see my demo to understand my problem Here
Contents of 1 actual height: I don't know.
Contents of 2 actual height: I dont't know.
Contents of 3 actual height: I don't know.
Because I may need for some pages less contents and some pages more contents.
I've tried by using height: 100%; in html, body, wrapper, left-nav, yourad, but could not success.
Height 100%, when applied to a child element, will make the element stretch to the full height of its parent.
For instance, if you set your #wrapper {height:600px} and your #content{height:100%} the content div will now have a height of 600px.
The confusion comes in because the default overflow property is: overflow:visible - will not be clipped by contrainsts of containing element. So without explicitly setting an overflow of hidden or scroll, the content will flow outside of the container.
You can see this being demonstrated in your example (http://jsfiddle.net/RrmK3/) by setting a background color on the parent div.
<div id="wrapper" class="wrap">
<div id="left-nav">
<h4>Menu Title</h4>
<ul>
<li>Menu Item</li>
</ul>
<div id="yourad">
You add is in your sidebar. It is not in your question :)
</div>
</div>
<div id="contents">
<h1>Indenting Code Keeps you Sane.</h1>
</div>
</div>
#contents{ margin-left: 330px; margin-top: 5px; height:100%; }
#wrapper{position: relative; width: 1007px; margin: 0 auto; height:200px; background:pink;}
Ok, this is really hard to explain in writing but I'll give it a shot.
When you set your body to 100%, it will always stay at the height that it started at, so it will cut off anything below the visible body.
The problem here is that one of your columns has to be a fixed height so your wrapper can know how to translate percents. Since you wont know what the height of left-nav is, you can cheat and use javascript to set the height of your wrapper to the height of your left-nav and the content text will overflow correctly..
Enough with the words, here's how you do it:
$('#wrapper').height($('#left-nav').height());
http://jsfiddle.net/Y7PhV/106/
I have a pretty standard css layout where I use a container div that is 980px wide to hold everything. The only problem is that I want to have a 1900px wide banner half way down the page that is centered in the middle and is 100% width of the page. Is there any way to do this without getting rid of the container div?
so I am wanting
____________________
| | | |
| | | |
| | | |
|___| |___|
| |
| |
|___ ___|
| | | |
| | | |
| | | |
| | | |
|___|___________|___|
< 980px > container
< 100% page width >
Anyone know how to get that 1900px banner centered in the middle without deleting my container div?
THANKS!!
I didn't do 1900px for the sake of the demo, but i'm sure you'll get the idea :)
Demo
Cliff notes:
HTML:
remove containerWrapper if you want the whole banner visible (make scroll bars)
<div id="containerWrapper">
<div id="container">
<p>content</p>
<div id="banner">
someday i'll grow up to be 1900 px wide!
</div>
<p>content</p>
</div>
</div>
CSS:
#containerWrapper {
width:100%;
overflow:hidden;
}
#container {
width:300px;
margin-left:auto;
margin-right:auto;
}
#banner {
margin-left:-200px; /* (this width - #container) / 2 */
width:700px;
}