I want to reduce jumbotron's height not with pixels but percentage of something (ex. div's height, windows height). What is the best way to do it appropriate with different window sizes and responsive design.
Here is my code:
<!-- START PAGE CONTENT WRAPPER -->
<div class="page-content-wrapper">
<!-- START PAGE CONTENT -->
<div class="content">
<div class="social-wrapper">
<div class="social " data-pages="social">
<!-- START JUMBOTRON -->
<div class="jumbotron" data-pages="parallax" data-social="cover">
<div class="cover-photo">
<img alt="Cover photo" src="assets/img/social/cover.png" />
</div>
<div class="container-fluid container-fixed-lg sm-p-l-20 sm-p-r-20">
<div class="inner">
<div class="pull-bottom bottom-left m-b-40">
<h5 class="text-white no-margin">Team Members</h5>
<h1 class="text-white no-margin"><span class="semi-bold">Lemp</span> Team</h1>
</div>
</div>
</div>
</div>
<!-- END JUMBOTRON -->
</div>
<!-- END PAGE CONTENT -->
Thanks.
You can make the jumbotron maintain aspect ratio.
Check Sean Dempsey fiddle.
Just modify
<div class="box sixteen-nine">
<div class="content">
<span>16:9</span>
</div>
to your jumbotron
You can see Chris Coyer full explanation
Related
I have a classic bootstrap template, like this:
<div class="container">
<div class="row">
<div class="col-12">
...header...
<div class="carouselContainer">
...carousel...
</div>
...content...
</div>
</div>
</div>
and now my website looks like this (H - header, S - slider, C - content, F - footer, with margin: auto):
I want to (visually, using CSS) pull out slider from div.row and div.col-12, like this.
I have tried using position:absolute, but after that, part of content is hidden under slider, plus I want to keep everything safe on different screen resolutions (not using pixels, and maybe on smallest screens carousel will be hidden).
does anyone have an idea how to do it? (I'm sorry if I complicated.)
Try simply stacking different .containers, like this...
<div class="container">
<div class="row">
<div class="col-12">
...header...
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="carouselContainer">
...carousel...
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
...content...
</div>
</div>
</div>
You shouldn't nest .container's but you can stack them! In this case container-fluid will go full width. the others won't.
Why not change the HTML structure and use a container-fluid to wrap your slider.
It would be better ( imho ) to use HTML tags for elements like <header> <main> <footer>
So a structure would be
<header>
<div class="container">
<nav>
Nav here
</nav>
</div>
</header>
<main>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="slider">
Slider Here
</div>
</div>
</div>
</div>
<div class="container content">
<div class="row">
<div class="col-12">
Content Here
</div>
</div>
</div>
</main>
<footer>
Footer Here
</footer>
Once I migrated from Bootstrap 3.3.7 to Bootstrap 4, this issue occurred:
It seems a part of the gap is form the body tag
And the other half is from the html tag
It seems there are huge gap between the footer and the bottom of the page
here is the bottom part of the source code:
</div>
<div id="wrap" class="container body-content">
#RenderBody()
</div>
</main>
<nav id="bottomNav" class="navbar-fixed-bottom">
<footer class="footer">
<div class="footer-top">
</div>
<div class="footer-bottom">
<div class="col-12 col-lg-8 footer-bar-left">
<span>© #DateTime.Now.Year</span>
</div>
<div class="col-12 col-lg-4 d-none">
</div>
</div>
</footer>
</nav>
#Scripts.Render("~/bundles/js/app")
#RenderSection("Scripts", required: false)
I have no idea why there are spaces created.
What's more, the footer should stick to the screen bottom when user scrolls the pages. However, the nav function doesn't work, once we migrated to Bootstrap v4.
Thanks in advance.
Because I don't know most of your HTML code I cannot effectively tell you what is not working, but I had a similar issue on weekend and I got a solution, I edited your code based on my thoughts how it would look like:
<div class="container">
<div class="row">
<main>
<div>
</div>
<div id="wrap" class="container body-content">
#RenderBody()
</div>
</main>
</div>
<div class="row">
<nav id="bottomNav" class="navbar-fixed-bottom">
<footer class="footer">
<div class="footer-top">
</div>
<div class="footer-bottom">
<div class="col-12 col-lg-8 footer-bar-left">
<span>© #DateTime.Now.Year</span>
</div>
<div class="col-12 col-lg-4 d-none">
</div>
</div>
</footer>
</nav>
</div>
</div>
#Scripts.Render("~/bundles/js/app")
#RenderSection("Scripts", required: false)
What did you need to do in order to fix the huge gap?
You must set all the info in a container and then create individuals rows per section.
I got an idea from here:
Bootstrap panel collapse creating gaps
Hopefully, it fixes your problem too.
The answer is straightforward. It is because we added 60px padding to the body tag. If we removed it, the issue is resolved.
How can I the div on the left and the image on the right at the same height using Bootstrap? They can stack when the screen width gets smaller, but at larger sizes they need to be equal.
<!-- main -->
<div id="main" class="row">
<div class="left col-md-6">
<h1>SCAQMD's Air Alerts lets you stay informed about air quality in your area.</h1>
<div id="round">
<img src="img/arrow.png" alt="arrow">
Sign Up
</div>
<div id="signup">
<h2>SIGN UP TODAY</h2>
<div><!-- line -->
</div>
<h3>to receive Air Alerts<br>Customized for you!</h3>
</div>
</div>
<div class="right col-md-6">
<img src="img/hero.jpg" class="pull-right img-responsive">
</div>
</div>
<!-- main -->
I've been spinning my wheels on trying to get a div panel element to appear on the top right of the page, on the same line as the h1 element:
<div class="container">
<div class="page-header">
<h1>
<img src="logo.png"> Page title
</h1>
<div class="panel panel-primary">
...content...
</div>
</div>
...
</div>
I'm a bit of an amateur with CSS/HTML, but I've tried the pull-left/right classes along with every permutation of display/position, etc. The outcome is always garbled. Any suggestions?
you have to add pull-left to the h1 too.. to have both of them floated..
also add a .cleafix class to the page-header div
<div class="container">
<div class="page-header clearfix">
<h1 class="pull-left">
<img src="logo.png"> Page title
</h1>
<div class="panel panel-primary pull-right">
...content...
</div>
</div>
...
</div>
I wouldn't use the .page-header for this, it doesn't clear and it's meant for text. Use the grid system so that you can set a size for your panel as they are not a set width and requires a wrapper to have a width. It will layout very cleanly this way.
Just a note: when you use the .pull-right and .pull-left classes on anything in Bootstrap these cover all viewport sizes and the results can look pretty yucky as the viewport gets smaller.
DEMO: http://jsbin.com/sadup/1
<div class="container">
<div class="row">
<div class="col-sm-8">
<img src="http://placehold.it/200x75/444444/FFFFFF&text=logo" class="img-responsive" alt="Logo">
</div>
<!--/.col-sm-8 -->
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<!--/.col-sm-4 -->
</div>
<!--/.row -->
</div>
<!--/.container -->
I'm new to bootstrap and I wonder how can we give an element a full width of the screen? for example I have an <hr>element that I want it width to be take the full screen.
I notice that row is taking -15px margin-left and margin-right, how can we remove that margin without affecting other rows in the website?
Jsfiddle: http://jsfiddle.net/shadeed9/pwvg6o7n/ (See full screen for better view)
HTML:
<div class="row">
<div class="content">
<div class="container">
<h1>Welcome to my website!</h1>
</div>
<div class="container-fluid">
<hr>
</div>
</div>
</div>
Thanks!
You simply have to put it out of the container.
<div class="container">
<div class="row">
<!-- STUFF -->
</div>
</div>
<hr> <!----- here -->
<div class="container">
<div class="row">
<!-- STUFF -->
</div>
</div>