I'm trying to get two background images on a DIV to animate with two different opacity but it doesn't seem to work. I'm willing to accept a jQuery or JS solution if it's easier to have the same result. I just need to make sure the background's animation doesn't effect the foreground text and images.
CSS:
/*Header*/
.navbar-default .navbar-nav>li>a {
color: #777;
text-transform: uppercase;
}
.navbar-default .navbar-nav>li>a:hover{
color: #f74d65;
}
header{
background: url(../images/header_bg_2.png), url(../images/header_bg_1.png);
background-size: cover;
background-repeat: no-repeat;
animation-name: animateheader;
animation-duration: .6s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#-webkit-keyframes animateheader {
0% {
opacity: 1, opacity: 0 ;
}
30% {
opacity: .3, opacity: 1 ;
}
50% {
opacity: 0, opacity: 1 ;
}
100% {
opacity: 1, opacity: 1 ;
}
}
#-moz-keyframes animateheader {
0% {
opacity: 1, opacity: 0 ;
}
30% {
opacity: .3, opacity: 1 ;
}
50% {
opacity: 0, opacity: 1 ;
}
100% {
opacity: 1, opacity: 1 ;
}
}
#-o-keyframes animateheader {
0% {
opacity: 1, opacity: 0 ;
}
30% {
opacity: .3, opacity: 1 ;
}
50% {
opacity: 0, opacity: 1 ;
}
100% {
opacity: 1, opacity: 1 ;
}
}
#keyframes animateheader {
0% {
opacity: 1, opacity: 0 ;
}
30% {
opacity: .3, opacity: 1 ;
}
50% {
opacity: 0, opacity: 1 ;
}
100% {
opacity: 1, opacity: 1 ;
}
}
.section_overlay{
background: url(../images/header_bg_2.png);
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50px;
}
.home_text{
padding-top: 210px;
padding-bottom: 730px;
}
.home_text h2{
color: #010101;
font-size: 40px;
text-transform: uppercase;
letter-spacing: 13px;
}
.home_text p{
color: #404040;
font-size: 14px;
text-transform: uppercase;
}
.home_text img{}
.scroll_down{
padding-bottom: 50px;
}
.scroll_down h4{
font-size: 12px;
color: #000;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
}
.section_overlay {
height: 100%;
background: url('../images/header_bg_2.png');
background-size: cover;
background-repeat: no-repeat;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MrCreeep - Let's Make it Creepy!</title>
<!-- Google Font -->
<link href='http://fonts.googleapis.com/css?family=Dosis:300,400,500,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<!-- Font Awesome -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Preloader -->
<link rel="stylesheet" href="css/preloader.css" type="text/css" media="screen, print"/>
<!-- Icon Font-->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/owl.theme.default.css">
<!-- Animate CSS-->
<link rel="stylesheet" href="css/animate.css">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Style -->
<link href="css/style.css" rel="stylesheet">
<!-- Responsive CSS -->
<link href="css/responsive.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="js/lte-ie7.js"></script>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Preloader -->
<div id="preloader">
<div id="status"> </div>
</div>
<header id="HOME" style="background-position: 50% 50px;">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="images/logo.png" alt=""></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Testimonial</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="home_text wow fadeInUp animated">
<h2>it’s MrCreeep</h2>
<p>Tag Line would go Here</p>
<img src="images/shape.png" alt="">
</div>
</div>
</div>
</div>
</header>
<section class="about_us_area" id="ABOUT">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="about_title">
<h2>About Me</h2>
<img src="images/shape.png" alt="">
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4 wow fadeInRight animated">
<p class="about_us_p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Sed quia non numquam eius modi tempora.</p>
</div>
<div class="col-md-4 wow fadeInRight animated">
<p class="about_us_p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Sed quia non numquam eius modi tempora.</p>
</div>
<div class="col-md-4 wow fadeInRight animated">
<p class="about_us_p">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
</div>
</div>
</div>
</section>
<section class="testimonial text-center wow fadeInUp animated" id="TESTIMONIAL">
<div class="container">
<div class="icon">
<i class="icon-quote"></i>
</div>
<div class="owl-carousel">
<div class="single_testimonial text-center wow fadeInUp animated">
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores<br/> eos qui ratione voluptatem sequi nesciunt.</p>
<h4>-JOHN DOE</h4>
</div>
<div class="single_testimonial text-center">
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius<br/> modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<h4>-JOHN SMITH</h4>
</div>
</div>
</div>
</section>
<div class="fun_facts">
<section class="header parallax home-parallax page" id="fun_facts" style="background-position: 50% -150px;">
<div class="container">
<div class="row">
<div class="col-md-6 wow fadeInLeft animated">
<div class="row">
<div class="col-md-4">
<div class="single_count">
<i class="glyphicon glyphicon-play"></i>
<h3><a class="ltwitch" href="http://www.twitch.tv/mrcreeep" data-tnick="mrcreeep">MrCreeep</a> (<span>...</span>)</h3>
<p>Watch Me Live</p>
</div>
</div>
</div>
</div>
<div class="col-md-5 col-md-offset-1 wow fadeInRight animated">
<div class="imac">
<img src="images/imac.png" alt="">
</div>
</div>
</div>
</div>
</section>
</div>
<section class="work_area" id="WORK">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="work_title wow fadeInUp animated">
<h1>Latest Works</h1>
<img src="images/shape.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna <br> aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 no_padding">
<div class="single_image">
<img src="images/w1.jpg" alt="">
<div class="image_overlay">
View Full Project
<h2>drawing</h2>
<h4>with pencil colors</h4>
</div>
</div>
</div>
<div class="col-md-4 no_padding">
<div class="single_image">
<img src="images/w2.jpg" alt="">
<div class="image_overlay">
View Full Project
<h2>drawing</h2>
<h4>with pencil colors</h4>
</div>
</div>
</div>
<div class="col-md-4 no_padding">
<div class="single_image">
<img src="images/w3.jpg" alt="">
<div class="image_overlay">
View Full Project
<h2>drawing</h2>
<h4>with pencil colors</h4>
</div>
</div>
</div>
</div>
<div class="row pad_top">
<div class="col-md-4 no_padding">
<div class="single_image">
<img src="images/w4.jpg" alt="">
<div class="image_overlay">
View Full Project
<h2>drawing</h2>
<h4>with pencil colors</h4>
</div>
</div>
</div>
<div class="col-md-4 no_padding">
<div class="single_image">
<img src="images/w5.jpg" alt="">
<div class="image_overlay">
View Full Project
<h2>drawing</h2>
<h4>with pencil colors</h4>
</div>
</div>
</div>
<div class="col-md-4 no_padding">
<div class="single_image last_padding">
<img src="images/w6.jpg" alt="">
<div class="image_overlay">
View Full Project
<h2>drawing</h2>
<h4>with pencil colors</h4>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="contact" id="CONTACT">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="contact_title wow fadeInUp animated">
<h1>get in touch</h1>
<img src="images/shape.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna<br/> aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3 wow fadeInLeft animated">
<div class="single_contact_info">
<h2>Call Me</h2>
<p>+88 00 123 456 01</p>
</div>
<div class="single_contact_info">
<h2>Email Me</h2>
<p>Hello#abdullahnoman.com</p>
</div>
<div class="single_contact_info">
<h2>Address</h2>
<p>216 Street Address, Barisal, BD</p>
</div>
</div>
<div class="col-md-9 wow fadeInRight animated">
<form class="contact-form" action="">
<div class="row">
<div class="col-md-6">
<input type="text" class="form-control" id="name" placeholder="Name">
<input type="email" class="form-control" id="email" placeholder="Email">
<input type="text" class="form-control" id="subject" placeholder="Subject">
</div>
<div class="col-md-6">
<textarea class="form-control" id="message" rows="25" cols="10" placeholder=" Message Texts..."></textarea>
<button type="button" class="btn btn-default submit-btn form_submit">SEND MESSAGE</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="work-with wow fadeInUp animated">
<h3>looking forward to hearing from you!</h3>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="footer_logo wow fadeInUp animated">
<img src="images/logo.png" alt="">
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 text-center wow fadeInUp animated">
<div class="social">
<h2>Follow Me on Here</h2>
<ul class="icon_list">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-google-plus"></i></li>
<li><i class="fa fa-linkedin"></i></li>
<li><i class="fa fa-dribbble"></i></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="copyright_text wow fadeInUp animated">
<p>© MrCreeep 2015.All Right Reserved By MrCreeep</p>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- =========================
SCRIPTS
============================== -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.nicescroll.js"></script>
<script src="js/owl.carousel.js"></script>
<script src="js/wow.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Website: mrcreep.com
Images:
http://mrcreeep/images/header_bg_1.png
http://mrcreeep/images/header_bg_2.png
A couple of pseudo elements would be optimal and opacity can be used on those.
.wrap {
width: 250px;
height: 250px;
line-height: 250px;
text-align: center;
color: red;
margin: 1em auto;
border: 1px solid grey;
text-shadow: 0px 0px 4px white;
position: relative;
}
.wrap::before,
.wrap::after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.wrap::before {
background-image: url(http://www.queness.com/resources/images/png/apple_ex.png);
z-index: -2;
-webkit-animation: animateheader 3s infinite;
animation: animateheader 3s infinite;
}
.wrap::after {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/6/66/Android_robot.png);
z-index: -1;
-webkit-animation: animateheader 5s infinite;
animation: animateheader 5s infinite;
}
#-webkit-keyframes animateheader {
0% {
opacity: 1;
}
30% {
opacity: .3;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes animateheader {
0% {
opacity: 1;
}
30% {
opacity: .3;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="wrap">
<h2>Heading</h2>
</div>
Related
I have a basic bootstrap container that has a fluid width. I want to be able to align three rows inside a sidebar to sit at the top, middle and bottom (much like this demo in the bootstrap documentation, but as a sidebar instead of full-width).
From what I can tell from other posts I've read this works with a fixed height, but not a fluid one (i.e. height 100%) - I need the sidebar and the content to both be the full height of the page. Then vertically align within that. However this doesn't seem to be possible. I was wondering if anyone knew a work around for this using bootstrap - it seem like it's something so commonly seen on the web these days that surely there must be a way of achieving it?
I've not added any custom CSS - all I'm attempting this with a classes available in Bootstrap (but I'm happy to create custom classes if required)
<div class="container-fluid h-100">
<div class="row h-100">
<div id="content" class="col-8 h-100">
<p>Some Content</p>
</div>
<div id="sidebar" class="col-4 h-100">
<div id="logo" class="row align-items-start">
<div class="col text-center">
<p>Test Top</p>
</div>
</div>
<div id="helpful-info" class="row align-items-center">
<div class="col text-center">
<p>Test Middle</p>
</div>
</div>
<div id="side-footer" class="row align-items-end">
<div class="col text-center">
<p>Test Bottom</p>
</div>
</div>
</div>
</div>
</div>
I think you’ll need some custom classes for the sidebar section to keep it in place. Beyond that, you just need to setup the sidebar as d-flex flex-column justify-content-between and the divisions should spread out the full height. The sidebar height is set by calculating the viewport height minus the height of the navbar.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
.sidebar {
position: fixed;
top: 0;
bottom: 0;
right: 0;
z-index: 100; /* Behind the navbar */
padding: 48px 0 0; /* Height of navbar */
box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);
}
.sidebar-sticky {
position: relative;
top: 0;
height: calc(100vh - 40px);
padding-top: 0.5rem;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}
#supports ((position: -webkit-sticky) or (position: sticky)) {
.sidebar-sticky {
position: -webkit-sticky;
position: sticky;
}
}
</style>
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
<a class="navbar-brand mr-0" href="#">Site name</a>
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="#">Sign out</a>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
<main class="col-8 mr-auto" style="height: 200vh;">
<h2>Content Area</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
</main>
<nav class="col-4 d-block bg-light sidebar">
<div class="sidebar-sticky d-flex flex-column justify-content-between">
<div id="logo" class="row">
<div class="col text-center">
<h6>Top Section</h6>
</div>
</div>
<div id="helpful-info" class="row">
<div class="col text-center">
<h6>Middle Section</h6>
</div>
</div>
<div id="side-footer" class="row">
<div class="col text-center">
<h6>Bottom Section</h6>
</div>
</div>
</div>
</nav>
</div>
</div>
So I have been doing bootstrap for around a month, and so my HTML might be a bit messy. The background of the issue is that my task requires me to create a custom slick carousel to achieve a UI look like the one below:
With my current code this is what i am able to achieve:
Here is my html for what I have achieved so far:
.slider-left {
display: flex;
align-items: center;
p {
font-size: 16px;
border-bottom: 1px solid black;
padding-bottom: 10px;
}
}
.slider-middle {
display: flex;
align-items: center;
word-break: break-word;
h1 {
font-weight: bold;
color: blue;
}
h2 {
text-transform: uppercase;
font-style: italic;
font-size: 16px;
font-weight: normal;
}
}
.v-center {
width: 500px;
height: 1000px;
display: flex;
align-items: center;
}
.slider-image {
width: 100%;
}
.slider-right {
padding: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<!-- Left most text -->
<div class="col-lg-1 slider-left text-right">
<div class="container center-align">
<p>Publication</p>
</div>
</div>
<!-- Middle Text -->
<div class="col-md-4 slider-middle center-align">
<div class="container">
<h2>title2</h2>
<h1>title1</h1>
<p>hsdajflaflasdfldsfhlsadfhlsdjfsdljflsjdfsjlfalsjfhjlasfhlsflasfhalfhlasfdsjfdsjlfadsljfhslajfalsjfljsflajflaflajsfdjlafhghurthruhffnfjgjrgbhrturhtadsofadflnvfnilawieoil</p>
<a></a>
</div>
</div>
<!-- Carousel Image -->
<div class="col-md-7 slider-right">
<img class="slider-image" src="<?php bloginfo('template_directory'); ?>/assets/images/image1.jpg" alt="">
</div>
</div>
<div class="row">
<div class="col-5 slider-nav">
<p>navigation</p>
</div>
</div>
</div>
I am required to use bootstrap to achieve any kind of ui design because my supervisor says it helps for the responsiveness of the website. What happens here is that the whole container is moved for a similar container over and over. Please let me know what to do and any explanation would be a great help. Apart from that if anyone knows how to insert custom buttons and custom pagination in that navigation bar can let me know, I would really appreciate it, though I haven't looked much into it.
Cheers :)
Do you mean something like this?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="row">
<div class="col-sm-4" style="background:#f2f2f2;">
Publication
</div>
<div class="col-sm-8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="row">
<div class="col-sm-12" style="background:red;">navigation</div>
</div>
</div>
<div class="col-md-6 col-sm-12" style="background:#999;">
Image
</div>
</div>
</div>
I'm using Bootstrap 4 with a custom CSS stylesheet and the structure of my page is as follows:
<header>
<!-- header content (fixed) -->
</header>
<main role="main" class="container-fluid">
<!-- main content -->
</main>
<div id="contact-information">
<!-- contact information (absolute) -->
</div>
<footer class="footer">
<!-- footer content (absolute) -->
</footer>
Now, the issue I am facing is the following, I want <main> to take up all the gap between <header> and <div id="contact-information"> but the actual output is something like this:
<header>
<!-- header content -->
</header>
<main role="main" class="container-fluid">
<!-- main content -->
</main>
<!-- WHITE GAP -->
<div id="contact-information">
<!-- contact information (absolute) -->
</div>
<footer class="footer">
<!-- footer content -->
</footer>
I have looked at similar questions but to no avail, the white gap still remains. I have the feeling it is something to do with my custom CSS. My actual code is (HTML and CSS of each section will follow respectively):
<main> HTML & CSS
<main role="main" class="container-fluid" style="border: 2px solid red;">
<div id="content-container">
<div id="content-container-content">
<h2 class="text-uppercase">About Us</h2>
<hr>
<p id="content-container-sub-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
</div>
</div>
</main>
main {
margin-top: 150px;
padding: 0 !important;
}
#content-container {
position: relative;
height: 432px;
background-color: white;
}
#content-container hr {
visibility: hidden;
}
#content-container-content {
position: absolute;
text-align: center;
width: 90%;
color: #83323e;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#content-container-sub-content {
font-size: 24px;
width: 100%;
color: #a63f4f;
line-height: 40px;
}
<div id="contact-information"> HTML & CSS
<div id="contact-information">
<h3>Company Name</h3>
<p>12 Street, Area, City AB1 2CD, UK</p>
<p>Tel: (01234) 123-456 | Mobile: 01234567891</p>
<p>
View in Map
</p>
<div>
<span style="cursor: pointer;">
<i class="fa fa-twitter fa-2x" aria-hidden="true" style="color: #00aced;"></i>
</span>
<span style="cursor: pointer;">
<i class="fa fa-youtube-play fa-2x" aria-hidden="true" style="color: white;"></i>
</span>
</div>
</div>
#contact-information {
position: absolute;
height: 283px;
width: 100%;
text-align: center;
color: white;
background-color: #a63f4f;
bottom: 60px;
padding: 50px;
}
Visual
Notice the bordered red box doesn't take up all the space responsively.
Live Example
Please click here to view it live.
So, my question is, how do I remove said white gap?
Here's what you should do in order to make that gap vanish on any device:
place #contact-information inside either <header>, <footer> or <main>, based on whether you want it on every page (<header> - above page content, <footer> - below page content) or only on the current page <main>
stop using <main> for styling purposes. It's a container for the content of any and every page, so any styles you add to it will apply on all pages of your website. It is better to treat it as a functional container and only style its children based on your websites' specific needs
If you want <main>'s min-height to fill up the entire page (allow full screen backgrounds, be able to center stuff in the middle of the screen, etc...), give it a min-height of 100vh, no margin, a padding-top equal to <header>s actual height and a padding-bottom equal to <footer>s actual height.
Since both <header> and <footer> have different heights based on device, this should be done dynamically, using JavaScript, on load and resize events of Window object.
Loosely translated into code (I had to make a few assumptions) the above would be:
function setMinHeight() {
$('main').css({
paddingTop: $('header nav').eq(0)[0].clientHeight + 'px',
paddingBottom: $('footer').height() + 'px',
})
}
$(window).on('load resize', setMinHeight);
#contact-information {
text-align: center;
color: white;
background-color: #a63f4f;
bottom: 60px;
padding: 50px;
}
#content-container {
background-color: white;
display: flex;
align-items: center;
justify-content: center;
padding: 50px;
color: #83323e;
border: 2px solid red;
}
#content-container hr {
visibility: hidden;
}
#content-container-sub-content {
font-size: 24px;
color: #a63f4f;
line-height: 40px;
}
main:not(#_) {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main #content-container {
flex-grow: 1;
}
main #contact-information {
flex: 0 0 auto;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
background-color: #83323e;
}
.bg-dark:not(#_) {
background-color: #83323e!important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<header>
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-default my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
<main role="main" class="container-fluid">
<div id="content-container" class="row">
<div class="col-12">
<h2 class="text-uppercase">About Us</h2>
<hr>
<p id="content-container-sub-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div id="contact-information" class="row">
<div class="col-12">
<h3>Company Name</h3>
<p>12 Street, Area, City AB1 2CD, UK</p>
<p>Tel: (01234) 123-456 | Mobile: 01234567891</p>
<p>
View in Map
</p>
<div>
<span style="cursor: pointer;">
<i class="fa fa-twitter fa-2x" aria-hidden="true" style="color: #00aced;"></i>
</span>
<span style="cursor: pointer;">
<i class="fa fa-youtube-play fa-2x" aria-hidden="true" style="color: white;"></i>
</span>
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
I might be wrong, but from what I found in your example it looks like your team is lacking a CSS guy and you think Bootstrap v4 will help you fill the gap. Chances are it won't. Bootstrap is rock solid if:
you don't stray from given examples (don't need a custom layouts) or...
you understand the CSS behind it, its logic and how to modify it so you don't break anything on various devices.
Besides, v4 is fragile now. Has a few unfixed issues and it's not yet cross-browser/cross-device. If you really don't afford the CSS guy, you're better off using latest v3, which is extremely solid, tested beyond imagination. It's unlikely you'll need something for v3 that hasn't been done yet (which is not the case of v4).
For more details on v3 vs v4 and upgrading from one to the other, I've recently answered this question and the answer stands. For production environments v4 doesn't yet stand a chance against v3, IMHO.
I have a problem aligning elements (#header-text-bottom and anchor) to the bottom in bootstrap 4. I used the vertical-align class on both elements but nothing happens.
https://jsfiddle.net/xoba5wkw/
<header>
<nav>
<!-- TODO - build menu -->
</nav>
<div id="header-top-text">
<div class="container">
<h3>The East side 47<br>Multifamily Portfolio</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta iure nobis nulla illum aut ut quae minima dicta, impedit dolorem, delectus quis fuga nemo reprehenderit quod est. Perspiciatis, id, tempora?</p>
</div>
</div>
<div id="header-bottom-text" class="align-bottom">
<div class="container">
<div class="row">
<div class="col-sm-3">
<h5>$NNN</h5>
<p>Random Text</p>
</div>
<div class="col-sm-3">
<h5>$NNN</h5>
<p>Random Text</p>
</div>
<div class="col-sm-3">
<h5>$NNN</h5>
<p>Random Text</p>
</div>
<div class="col-sm-3">
<h5>$NNN</h5>
<p>Random Text</p>
</div>
</div>
</div>
</div>
<div class="container align-bottom">
<a href="#case-study" id="arow-white" class="btn secondaty-outline btn-sm" role="button">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</a>
</div>
</header>
From bootstrap docs here, you might want to use a table (or element with display: table)
https://v4-alpha.getbootstrap.com/utilities/vertical-align/
/*============ Header ============*/
/* Header bg picture */
table {
background-image: url('http://arielpa.x3.rs/es47/img/home-background.jpg');
background-position: center center;
background-repeat: no-repeat;
height: 100vh;
width: 100vw;
}
/* Menu */
/* Header Text */
#header-top-text {
padding-top: 1.875rem;
color: #fff;
}
#header-bottom-text {
color: #fff;
}
#arow-white {
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<table>
<tr>
<td id="header-top-text" class="align-top">
<div class="container">
<h3>The East side 47<br>Multifamily Portfolio</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta iure nobis nulla illum aut ut quae minima dicta, impedit dolorem, delectus quis fuga nemo reprehenderit quod est. Perspiciatis, id, tempora?</p>
</div>
</td>
<tr>
<td class="align-bottom" id="header-bottom-text">
<div class="container">
<div class="row ">
<div class="col-sm-3">
<h5>$NNN</h5>
<p>Random Text</p>
</div>
<div class="col-sm-3">
<h5>$NNN</h5>
<p>Random Text</p>
</div>
<div class="col-sm-3">
<h5>$NNN</h5>
<p>Random Text</p>
</div>
<div class="col-sm-3">
<h5>$NNN</h5>
<p>Random Text</p>
</div>
</div>
<a href="#case-study" id="arow-white" class="btn secondaty-outline btn-sm" role="button">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</a>
</div>
</td>
</tr>
</table>
I'm currently working on Cards from Bootstrap.
Depending on the text title I will get the different height for the cards and would like to have the same height as the tallest one.
I don't mind using JS I actually think is probably the best way to approach the problem.
I have tried using different solutions from the CSS like using flexbox.
The rendered HTML as it is rendered dynamically here's a simple example:
.card {
float: left;
width: 100%;
padding: .75rem;
margin-bottom: 2rem;
border: 0;
box-shadow: 0px 0px 8px 0.3px rgba(0, 0, 0, 1);
}
.card>img {
margin-bottom: .75rem;
display: block;
width: 80%;
height: auto;
margin-left: auto;
margin-right: auto;
}
.card-text {
font-size: 85%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SMITE FR</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/album.css" rel="stylesheet">
<link href="css/ie10-viewport-bug-workaround.min.css" rel="stylesheet">
<script src="https://www.w3schools.com/lib/w3data.js"></script>
<link rel="import" href="navigation.html">
</head>
<body>
<div class="container">
<div class="row">
<div class="card-deck">
<div class="col-md-4 col-sm-6 col-12">
<div class="card">
<img src="images/dieux/Agni.jpg" alt="BeatsX">
<h1 class="card-title">BeatsX</h1>
<div class="text-center">
<p>1188.0000</p>
<p>2017-06-09 10:00:00</p>
Voir la Fiche
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-12">
<div class="card">
<img src="images/dieux/Agni.jpg" alt="Nitendo Switch">
<h1 class="card-title">Nitendo Switch</h1>
<div class="text-center">
<p>2899.0000</p>
<p>2017-06-10 10:00:00</p>
Voir la Fiche
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-12">
<div class="card">
<img src="images/dieux/Agni.jpg" alt="iPhone 7 128GB (Jet Blakc)">
<h1 class="card-title">iPhone 7 128GB (Jet Blakc)</h1>
<div class="text-center">
<p>6388.0000</p>
<p>2017-06-06 10:00:00</p>
Voir la Fiche
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The Bootstrap 4 columns already use flexbox so they are the same height. Just use h-100 for height:100% on the cards and they'll fill the columns...
https://codeply.com/go/hKhPuxoovH
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-12">
<div class="card h-100">
<img src="images/dieux/Agni.jpg" alt="BeatsX">
<h1 class="card-title">BeatsX</h1>
<div class="text-center">
<p>1188.0000</p>
<p>2017-06-09 10:00:00</p>
Voir la Fiche
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-12">
<div class="card h-100">
<img src="images/dieux/Agni.jpg" alt="Nitendo Switch">
<h1 class="card-title">Nitendo Switch</h1>
<div class="text-center">
<p>2899.0000</p>
<p>2017-06-10 10:00:00</p>
Voir la Fiche
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-12">
<div class="card h-100">
<img src="images/dieux/Agni.jpg" alt="iPhone 7 128GB (Jet Blakc)">
<h1 class="card-title">iPhone 7 128GB (Jet Blakc)</h1>
<div class="text-center">
<p>6388.0000</p>
<p>2017-06-06 10:00:00</p>
Voir la Fiche
</div>
</div>
</div>
</div>
</div>
Also there is no reason to float the cards, and the .col-* should be directly in the .row, not .card-deck
Use card-deck for equal size card this below code works for me
<div class="card-deck">
<div class="card mb-2">
<img class="card-img-top img-fluid" src="//placehold.it/500x180" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card mb-2">
<img class="card-img-top img-fluid" src="//placehold.it/500x200" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.This card has supporting text below as a natural lead-in to additional content.This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
Reference you can find here
As far as I know not doable without either javascript or flexbox (https://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback)
Use flex for get it below an example
.main {
display: flex;
}
.child {
flex:1;
border:1px solid tomato;
}
.content {
display: flex;
justify-content: flex-start;
align-items: center;
flex-flow: column nowrap;
}
.content-child{
padding: 5px;
}
<div class="main">
<div class="child">
<div class="content">
<div class="content-child">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="content-child">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="child"></div>
</div>
Try giving height to card see this fiddle
.card {
float: left;
width: 100%;
padding: .75rem;
height:80vh;
margin-bottom: 2rem;
border: 0;
box-shadow: 0px 0px 8px 0.3px rgba(0,0,0,1);
}
Using Flexbox you got the equal height of the card
.card-deck {
display:flex;
flex-wrap: wrap;
}
.card {
float: left;
width: 100%;
height:100%;
padding: .75rem;
margin-bottom: 2rem;
border: 0;
box-shadow: 0px 0px 8px 0.3px rgba(0,0,0,1);
}
.card > img {
margin-bottom: .75rem;
display: block;
width: 80%;
height: auto;
margin-left: auto;
margin-right: auto;
}
.card-text {
font-size: 85%;
}
#media (max-width:767px){
.card-deck {
display:block;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="card-deck">
<div class="col-md-4 col-sm-6 col-12">
<div class="card">
<img src="images/dieux/Agni.jpg" alt="BeatsX">
<h1 class="card-title">BeatsX</h1>
<div class="text-center">
<p>1188.0000</p>
<p>2017-06-09 10:00:00</p>
Voir la Fiche
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-12">
<div class="card">
<img src="images/dieux/Agni.jpg" alt="Nitendo Switch">
<h1 class="card-title">Nitendo Switch</h1>
<div class="text-center">
<p>2899.0000</p>
<p>2017-06-10 10:00:00</p>
Voir la Fiche
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-12">
<div class="card">
<img src="images/dieux/Agni.jpg" alt="iPhone 7 128GB (Jet Blakc)">
<h1 class="card-title">iPhone 7 128GB (Jet Blakc)</h1>
<div class="text-center">
<p>6388.0000</p>
<p>2017-06-06 10:00:00</p>
Voir la Fiche
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-4 d-flex align-items-stretch">
<!--YOUR CARD HERE-->
</div>
</div>
</div>