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>
Related
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.
I have a site I designed and coded that seems to cut off top and bottom on very specific devices that have short screens AND WILL NOT SCROLL. Any ideas on that I can do to keep the picture centered in the browser without any overlapping
Here's a link to jsfiddle:
https://jsfiddle.net/SCATORY/mjyssu7y/
<body>
<div id="container">
<div class="container">
<div class="nav">
<div class="logo"></div>
</div>
</div>
<div class="container holder">
<div class="center">
<div class="height">
<h1>Practice yoga. <br>In hypo-microbial style.</h1>
</div>
<div class="bag">
</div>
<div class="height-2">
<h2>Introducing ThePureBag™.<br>
The germ-resistant way to carry your yoga gear in style.</h2>
<div class="margin">
<button class="contact">Contact Us</button>
</div>
</div>
</div>
</div>
</div>
<div id="grey">
</div>
</body>
Take the position:fixed off of the #container and take the position:absolute off of the .holder. This should make it work.
Position:fixed means that the element won't scroll.
I am just beginning to learn to code. I am using Skeleton boilerplate to build a responsive template. I am struggling to understand, how to make two items appear on the same row. below is my code for this.
<div class="header">
<div class="container"
<div class="row">
<div class="three.columns"><img src="/image/file">
</div>
<div class="nine.columns">Headline</div>
</div>
</div>
`
">" is missing from the container div.
This would be the correct code:
<div class="header">
<div class="container">
<div class="row">
<div class="three columns"><img src="/image/file"></div>
<div class="nine columns">Headline</div>
</div>
</div>
</div>
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>