I'm using Tailwind CSS and I would like to achieve a layout which includes:
A sticky navbar
A full-page section with centered content
Other sections with variable height
A footer
Here's a quick representation:
+--------------------------+ -+
| Navbar (sticky) | |
|--------------------------| |
| | |
| | | --> this has viewport height
| centered content | |
| | |
| | |
|--------------------------| -+
| |
| Section 1 |
| |
+--------------------------+
| Section 2 |
+--------------------------+
| Footer |
+--------------------------+
I would like the centered content section to take up all the remaining space of the viewport after the navbar, but applying the h-screen class causes it to be as height as the viewport causing an overflow. Here's some reproducible code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
}
</style>
</head>
<body>
<div class="h-20 text-5xl sticky top-0 text-center bg-slate-300/50">
Menu
</div>
<div class="h-screen mx-auto bg-indigo-300 flex flex-col justify-center items-center text-5xl">
content
</div>
<div class="h-80 mx-auto bg-green-300 flex flex-col justify-center items-center text-5xl">
content
</div>
<div class="h-20 mx-auto bg-black text-white flex flex-col justify-center items-center text-5xl">
footer
</div>
</body>
</html>
Can someone help me to find a way to make the "centered content" section take up all the remaining space while letting the other, following, sections have an arbitrary height.
Thank you.
There is 2 solutions for your layout.
You can add negative margin bottom to sticky navbar -mb-20
<div class="h-20 text-5xl sticky top-0 text-center bg-slate-300/50 -mb-20">
Menu
</div>
or you can change you navbar position to fixed
<div class="h-20 text-5xl fixed top-0 inset-x-0 text-center bg-slate-300/50">
Menu
Hope this helps.
Related
I want to create a layout like below with tailwind. I don't know how to make the blue area have full width but the purple area has a limit at 9/12 grid.
12 column is max 1200px.
Here is my code:
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="container lg:w-1200px bg-red-500 mx-auto flex">
<div class="w-3/12 bg-blue-500 grid place-items-center h-screen">3/12</div>
<div class="w-9/12 h-80 relative">
<div class="bg-yellow-500 h-20"></div>
<div class="bg-green-500 h-screen grid place-items-center">9/12</div>
</div>
</div>
Maybe it's just complex with me, not you. So sorry about that. Thanks!
To create the target layout
absolutely position the blue box relative to screen, using w-screen class so that it takes the entire screen width
use a standard grid layout for other boxes, relying on col-span classes to size them according to requirements
finally, use w-[1200px] class to set the width of the grid layout, and add a left-padding pl-[300px] to the blue box so that its content is away from the red box. As using these "pixel-perfet" arbitrary classes does not work in the code snippet, I replaced them respectively with w-96 and pl-24
See below an implementation example
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div class="w-96 h-screen bg-red-100 grid grid-cols-12">
<div class="bg-red-500 col-span-3 z-20 relative">Something in red</div>
<div class="bg-blue-500 w-full absolute pl-24 h-12 z-0">Something in blue</div>
<div class="bg-purple-700 col-span-9 z-20 transform translate-y-7">Something in purple</div>
<div></div>
</div>
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>
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'm using Bootstrap 3.0 and I have this situation:
<div class="row">
<div class="col-md-8 col-xs-12">text</div>
<div class="col-md-4 col-xs-12">photo</div>
</div>
Desktop
---------------- ---------
| text | photo |
---------------- ---------
Mobile
-------------------------
| text |
-------------------------
| photo |
-------------------------
On mobile I need to have photo before text.
-------------------------
| photo |
-------------------------
| text |
-------------------------
I tried using pull/push for col-sx but without success.
I know that Bootstrap is "mobile-first" and a solution could be to get them in the order I want on the sx first and then push/pull them in to position on the desktop, but for SEO reasons I need to have text code before photo.
Is it possible ?
Thank's
Approach it the other way around - mobile first...
So put your photo before text, and use push/pull on larger screens.
You cannot use push/pull on xs cols.
BTW, you need xs NOT sx! :)
<div class="row">
<div class="col-md-4 col-md-push-8 col-xs-12">photo</div>
<div class="col-md-8 col-md-pull-4 col-xs-12">text</div>
</div>
I don't think so this would impact SEO. SEO has nothing to do with div layouts. SEO impacts with headers, images, links, and paragraphs, etc.
However, to solve your layout, you can do like this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-8 col-sm-push-8 col-xs-12">text</div>
<!--first push-->
<div class="col-md-4 col-sm-pull-8 col-xs-12">photo</div>
<!--then pull-->
</div>
You should try flexbox.
If you have just these two items in the .row element then it is relatively simple
/* Of course, use your xs max-width */
#media screen and (max-width: 768px) {
.class-of-this-row {
display: flex;
flex-direction: column-reverse;
}
}
<div class="row class-of-this-row">
<div class="col-sm-8 col-xs-12">text</div>
<div class="col-sm-4 col-xs-12">photo</div>
</div>
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.