I have two sections both 100vh in height.
<section id="sectionTwo" class="section">
<div class="container d-flex flex-column justify-content-between mh100vh">
<div class="row">
<div id="box">
</div>
</div>
<div class="row d-flex align-items-end">
<div class="col-md-8 offset-4">
<img class="btmImg" src="http://www.atfund.gatech.edu/sites/default/files/images/verticalplaceholderimage-440x680.png" alt="" />
<img id="downImage" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Circle-icons-arrow-down.svg/2000px-Circle-icons-arrow-down.svg.png" class="img-fluid btnImage">
</div>
</div>
</div>
</section>
<section id="sectionThree" class="section">
<div class="container d-flex flex-column justify-content-between mh100vh">
</div>
</section>
The first section has a couple of images on it, one of which needed to slide up and appear. The issue I was facing was that when it was sliding up, it was on top of the second section, instead of sliding up from behind it. As such, I gave each section a z-index
#sectionTwo {
position: relative;
z-index: 10;
}
#sectionThree {
position: relative;
z-index:20;
background: #ccc;
}
Now this has fixed the problem. I am no however faced with another issue. The first section has an arrow image that needs to partly sit on top of the second section. Because of the z-index, I cant make this happen, even if I give an index higher that the second section.
This JSFiddle demonstrates my problem. Is there any way to make the circle arrow image sit on top of the second section, whilst keeping the z-indexes on the sections how I have them so the other image can slide up behind?
Thanks
Related
This should be a CSS style question, but it has some C#/Blazor components...that's why I tagged both.
Here my main layout:
<div class="container-fluid p-0 d-flex flex-column min-vh-100">
<div class="navbar fixed-top">This is the header</div>
<div class="content flex-grow-1">
#Body
</div>
<div class="navbar tiny-text fixed-bottom d-flex justify-content-center">
<div id="footer_div">This is the footer</div>
</div>
My problem is that whatever component that I have that takes place in #Body will appear "under" the header bar (even it's just a simple div or span). My workaround right now is use css' top to avoid the header. What do I have to do, so that the elements in the div won't start from underneath the header element?
Thanks!
If you remove the fixed-top from your navbar element the body will no longer "tuck" under the header.
<div class="container-fluid p-0 d-flex flex-column min-vh-100">
<div class="navbar">This is the header</div>
<div class="content flex-grow-1">
#Body
</div>
<div class="navbar tiny-text fixed-bottom d-flex justify-content-center">
<div id="footer_div">This is the footer</div>
</div>
</div>
If you want to retain the fixed-like header and footer you should be able to use something like the below adapted from this answer
body {
display: flex;
flex-direction: column;
height: 100vh;
}
.content {
overflow: auto;
}
<header class="navbar">This is the header</header>
<main class="content flex-grow-1">
#Body
</main>
<footer class="navbar tiny-text d-flex justify-content-center">
<section>This is the footer</section>
</footer>
To keep elements in normal flow don’t give them position: fixed, or position: absolute. Use float: right and float: left. IF you have a header that is fixed or absolute, then the normal flow that follows that element will need a margin-top equal to or slightly greater than the height of the header div element. The margin will ‘fill’ the space behind the fixed/absolute element.
I'm trying to create two panels in bootstrap with centralized text and different fonts in the text. Like the image below
My code:
<div class="row">
<div class="col-lg-6">
<div class="panel panel-default text-center">
<p>
Collected This Quarter <br>
<b>$8084</b>
</p>
</div>
</div>
<div class="col-lg-6">
<div class="panel panel-default text-center">
<p>
Average Property Income YTD <br>
<b>$16,985</b>
</h4>
</div>
</div>
</div>
However, my output is:
How can I have the "shadow" outside the panels and the text inside in similar font to the image above?
Thanks you
I also used to face this problem. So, here is the workaround.
Add the top-level child divs and give them padding (like p-1). This is their only job.
Within each top-level div, add your cell's main content, and style them however you want.
This is the code
<div class="parent row">
<div class="col-lg-6 p-1">
<div class="shadow-sm text-center child">
<p class="p-0 m-0">
Collected This Quarter <br>
<b>$8084</b>
</p>
</div>
</div>
<div class="col-lg-6 p-1">
<div class="shadow-sm text-center child">
<p class="p-0 m-0">
Average Property Income YTD <br>
<b>$16,985</b>
</h4>
</div>
</div>
</div>
Normally I reset padding and margins for .row and .col classes
<style>
.row, .col-lg-6 {
padding: 0;
margin:0;
}
.child {
background-color: white;
}
.parent {
background-color: #F3F4F5;
}
</style>
The result is like this
NOTE: I've used bg-dark and bg-light classes for showing the background colors of parent and child divs. You can give them whichever color you want.
Check out this, used .panel-body wrapper
https://jsfiddle.net/420gwtLz/7/
I will suggest using the latest version of Bootstrap, you will get utility classes for shadow and spacing.
I seem to have an issue with one of my pages I'm trying to layout. I implemented FullCalendar and added it to one of my pages/views, I'm now noticing that my header dropdown when it overlays on top of where the calendar begins -- the dropdown isn't opaque/forced overtop of the underlaying content like how it is on all other pages. Attached is the example of what is happening.
Any ideas? If I should be posting my CSS let me know. It's the default for FullCalendar & Bootstrap with no modifications.
Here is the view HTML/classes applied to the content it's not drawing 'over/on top of':
#section('content')
#include('layouts.headers.cards')
<div class="container-fluid mt--7">
<div class="row">
<div class="col">
<div class="card shadow">
<div class="card-header border-0">
<div class="col-14">
<div id='calendar'></div>
</div>
</div>
</div>
</div>
</div>
#include('layouts.footers.auth')
</div>
#endsection
#calendar{
z-index: 999999;
position: relative;
}
<< That should fix it!
Read: https://www.w3schools.com/cssref/pr_pos_z-index.asp
Please see code snipped: I am trying to align the divs with "Learn More" at the bottom of the columns at the same vertical height regardless of the height of the previous div.
Duplicate Disclaimer: I've been looking at How can I make Bootstrap columns all the same height? and How can I make Bootstrap 4 columns all the same height? which seem to be a similar problem. However, the solutions do not work for me as they are mostly for BS3 (e.g. I tried the examples with class="row-eq-height"), and most answers with regard to BS4 imply that the equal height is default in BS4.
However as you can see from the red borders, only the outer column height is "stretched" to the bottom by default, the inner one is only equal to text height. I'm very confused.
* { border: 1px solid red !important; }
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div class="row text-center no-gutters">
<div class="col-sm-4">
<div>
<h4>Components and examples</h4>
<p class="body-block-3 mx-auto">multiple line text example random text should break across multiple lines</p>
</div>
<div class="align-items-end">
Learn more 1
</div>
</div>
<div class="col-sm-4">
<div>
<h4>Components and examples</h4>
<p class="body-block-3 mx-auto">one line text example</p>
</div>
<div class="align-items-end">
Learn more 2
</div>
</div>
<div class="col-sm-4">
<div>
<h4>Components and examples</h4>
<p class="body-block-3 mx-auto">multiple line text example random text should break across multiple lines</p>
</div>
<div class="align-items-end">
Learn more 3
</div>
</div>
</div>
</body>
Also, I've tried various Bootstrap alignment options such as strechting the middle div with "align-items-stretch" and using "d-flex align-items-end" for the last div. Nothing works.
Columns in bootstrap are not display: flex and that is why the align-items-end is not working. Add the classes d-flex and flex-column to your column classes. Added the class .flex-1 and put this on your upper div.
* {
border: 1px solid red !important;
}
.body-block-3 {
max-width: 250px;
margin-left: auto;
margin-right: auto;
}
.flex-1 {
flex: 1;
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div class="row text-center no-gutters">
<div class="col-sm-4 d-flex flex-column">
<div class="flex-1">
<h4>Components and examples</h4>
<p class="body-block-3">multiple line text example random text should break across multiple lines</p>
</div>
<div>
Learn more 1
</div>
</div>
<div class="col-sm-4 d-flex flex-column">
<div class="flex-1">
<h4>Components and examples</h4>
<p class="body-block-3">one line text example</p>
</div>
<div>
Learn more 2
</div>
</div>
<div class="col-sm-4 d-flex flex-column">
<div class="flex-1">
<h4>Components and examples</h4>
<p class="body-block-3">multiple line text example random text should break across multiple lines</p>
</div>
<div>
Learn more 1
</div>
</div>
</div>
</body>
EDIT: Also wanted to mention you could use a boostrap utility class mb-auto instead of flex-1
<div class="col-sm-4 d-flex flex-column">
<div class="mb-auto">
<h4>Components and examples</h4>
<p class="body-block-3">one line text example</p>
</div>
<div>
Learn more 2
</div>
</div>
However your upper div will not take up the entire space (stretch), not sure if this is an issue with your use case. If not, you would not have to make any new classes and would be following the docs on bootstrap's with align-item section
EDIT: Updated for .body-block-3 class
I'm new to learning Bootstrap and I'm looking have 2 col-md-6 divs next to one another having one background-color blue and the other white. How can I change one background color and not both?
I'm trying to get a look similar to below the full width photo on this website. Minus the image on the left. I just want a block white and a block blue. http://tympanus.net/Freebies/Boxify/
CSS
.bg-primary {
background-color: #1a52c6;
}
HTML
<section class="bg-primary" id="about">
<div class="container">
<div class="row">
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="col-md-6">
<h2 class="section-heading text-center">Title</h2>
<p class="text-faded text-center">.col-md-6</p>
</div>
<div class="col-md-6 blue">
<h2 class="section-heading text-center">Title</h2>
<p class="text-faded text-center">.col-md-6</p>
</div>
</div>
</div>
</div>
You can target that div from your stylesheet in a number of ways.
Simply use
.col-md-6:first-child {
background-color: blue;
}
Another way is to assign a class to one div and then apply the style to that class.
<div class="col-md-6 blue"></div>
.blue {
background-color: blue;
}
There are also inline styles.
<div class="col-md-6" style="background-color: blue"></div>
Your example code works fine to me. I'm not sure if I undestand what you intend to do, but if you want a blue background on the second div just remove the bg-primary class from the section and add you custom class to the div.
.blue {
background-color: blue;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section id="about">
<div class="container">
<div class="row">
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="col-xs-6">
<h2 class="section-heading text-center">Title</h2>
<p class="text-faded text-center">.col-md-6</p>
</div>
<div class="col-xs-6 blue">
<h2 class="section-heading text-center">Title</h2>
<p class="text-faded text-center">.col-md-6</p>
</div>
</div>
</div>
</section>
You could hard code it.
<div class="col-md-6" style="background-color:blue;">
</div>
<div class="col-md-6" style="background-color:white;">
</div>
Not Bootstrap specific really... You can use inline styles or define a custom class to specify the desired "background-color".
On the other hand, Bootstrap does have a few built in background colors that have semantic meaning like "bg-success" (green) and "bg-danger" (red).