I need to lay out a web page with two images that must stretch to fill the available browser window, but with text content that is centred in the page. So far, the only ways I seem to be able to do this are, a) combine the two images into one, and set this as a background image for body, then carefully vertically position the middle band of content to fit the gap between images, or, b) to nest a container (fixed) div inside a container-fluid holding the image and the fixed holding the text content. I have, however, seen dire warnings and scorn poured on those who advocate nesting bootstrap containers.
This image may help convey what I need:
'Image 1' must stretch across the entire window, with the content remaining centered, the same with 'Image 2', with a plain band of white vertically between the images, and a plain band of grey right across the screen at the bottom.
You can try this.
Note that you have to apply some custom css as required by your design needs. Follow the example:
.container-fluid {
padding: 0;
}
.container-fluid.wrapper {
padding-top: 100px;
}
.ht33 {
height: 200px;
}
.container.content {
width: 970px;
position: absolute;
height: 800px;
background: gray;
color: #fff;
top: 0;
left: 0;
right: 0;
margin-right: auto;
margin-left: auto;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container-fluid wrapper">
<div class="container content"></div>
<div class="container-fluid bg-primary ht33"></div>
<div class="container-fluid bg-warning ht33"></div>
<div class="container-fluid bg-danger ht33"></div>
</div>
I used row class to the BGs to have a Grid feel on them and also eliminate the padding.
HTML
<div class="container-fluid wrapper">
<div class="container content bg-primary"></div>
<div class="row bg-success bg"></div>
<div class="row bg-warning bg"></div>
<div class="row bg-danger bg"></div>
</div>
CSS
.container-fluid.wrapper {
padding-top: 100px;
}
.bg {
height: 200px;
}
.container.content {
width: 970px;
position: absolute;
height: 800px;
color: #fff;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
}
You could try to do it like this:
http://jsfiddle.net/kqoonr24/1/
You may have to adapt it to fit your needs, but this is the basic idea. :-)
Basically, you'll want to have a div that acts as a background and houses the individual divs which make up each background element.
Then, after that you'll want to have a foreground div which houses the actual content.
html,
body,
.wrapper,
.foreground,
.background {
height: 100%;
width: 100%;
}
.foreground {
background-color: green;
max-width: 400px;
margin: 0 auto;
}
.background {
position: absolute;
z-index: -1;
}
.background > * {
height: 33%;
content: '';
}
.background-element-1 {
background-color: blue;
}
.background-element-2 {
background-color: red;
}
.background-element-3 {
background-color: orange;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<body>
<div class="wrapper">
<div class="background">
<div class="background-element-1"></div>
<div class="background-element-2"></div>
<div class="background-element-3"></div>
</div>
<div class="foreground">
<div class="foreground-inner">
I am your text!
</div>
</div>
</div>
</body>
You will likely need to adjust it as I made quite a few assumptions—let me know if you need any more help.
The simpliest example that I might think of, I assumed you don't know the size of your background images, that's why I lay them inside background div that's not affecting page flow, while on top there's natural content
Demo
<div class="images-wrapper">
<img src="..." alt="">
<img src="..." alt="">
</div>
<div class="container">
.......
</div> <!-- /container -->
body {
background:#ccc;
}
.images-wrapper {
position:absolute;
top:0;
left:0;
right:0;
background:#fff;
z-index:0;
}
.images-wrapper img {
display:block;
width:100%;
height:auto;
margin-top:30px;
}
.container {
z-index:2;
position:relative;
background:#fff;
}
Related
the problem is that my css cards are overlapping, I need the three cards to have space from one another, whilst sitting side by side each other horziontally. I am using bootstrap also and saw a solution online to use float-left float-right to put images side by side, but this has had no effect on my html page when I've refreshed it so far.
.container {
width: 4000px;
margin: auto;
}
.card-white {
background: white;
box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
border-radius: 50px;
width: 400px;
text-align: center;
padding: 24px;
margin: 20px;
}
.card-white img {
width: 360px;
height: 360px;
object-fit: cover;
border-radius: 4px;
}
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Body -->
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="card-white">
<img src="https://via.placeholder.com/200.jpg" class="float-left">
<h3>Film Showreel</h3>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="card-white">
<img src="https://via.placeholder.com/200.jpg" class="float-center">
<h3>Monologue Showreel</h3>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="card-white">
<img src="https://via.placeholder.com/200.jpg" class="float-right">
<h3>Voice reel</h3>
</div>
</div>
</div>
</div>
The error is in your css code.
If you run this without your css it' works perfect.
First of all you don't need to customize the container size in bootstrap like this:
.container {
width: 4000px;
margin: auto;
}
Second, a fixed size can't be responsive like this:
.card-white {
width: 400px;
}
.card-white img {
width: 360px;
}
So try it without fixed-size.
You can manage this without css, only with bootstrap classes in your divs.
<div class="col-xs-12 col-sm-6 col-md-3">
check this, for bootstrap 4:
Toggle floats on any element, across any breakpoint, using our responsive float utilities.
Spacing, Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.
check this, for bootstrap 5:
Float bootstrap 5
Spacing bootstrap 5
Using flexbox might be a better approach:
https://coder-coder.com/display-divs-side-by-side/
.flex-container {
display: flex;
}
.flex-child {
flex: 1;
border: 2px solid yellow;
}
.flex-child:first-child {
margin-right: 20px;
}
You can refer to: https://getbootstrap.com/docs/4.0/utilities/flex/ for bootstrap.
This question already has answers here:
How to create a fixed sidebar layout with Bootstrap 4?
(5 answers)
Closed 3 years ago.
I have a left div with id sideNav and a right main div like this
#sideNav {
background-color: #012d20;
position: fixed;
z-index: 1;
top: 0;
left: 0;
overflow: hidden;
border-right-style: groove;
height: 100vh;
}
<div class="row">
<!-- navigation sidebar -->
<div class="col-2 pt-5" id="sideNav">
...
</div>
<!-- main content area -->
<main class="col-10">
...
</main>
</div>
The code works but the left part of main is now inside behind the sideNav. When I remove the position property of the sideNav css, my divs are displayed correctly again but sideNav is no longer fixed and scrolls with the page.
How do I keep sideNav fixed and my divs properly displayed?
The reason this isn't working for you, is because row has display type flex, so that all the cols below fit into that row.
Your cols are then blocks spaced via their given value e.g. col-3 col-4 etc
By changing the column display type (to fixed in your example) your removing it from the flex spacing, and so your main nav will move left because you haven't offset it.
To fix this, don't add padding as others have suggested, BootStrap has classes that handle this. Instead, add offset-2 to your main nav, and leave everything else as is.
Example Snippet
#sideNav {
background-color: #012d20;
position: fixed;
z-index: 1;
top: 0;
left: 0;
overflow: hidden;
border-right-style: groove;
height: 100vh;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row">
<!-- navigation sidebar -->
<div class="col-2 pt-5" id="sideNav">
...
</div>
<!-- main content area -->
<main class="col-10 offset-2">
...
</main>
</div>
Thats because fixed gets "ignored" by other containers. It is handelt as if it was absolute. You can give your sidebar a fixed width and your main a padding.
#sideNav {
background-color: #012d20;
position: fixed;
z-index: 1;
top: 0;
left: 0;
overflow: hidden;
border-right-style: groove;
height: 100vh;
width: 350px;
}
main {
padding-left: 350px;
}
Codepen
Lets try this,
iam adding width for sideNav about 40px;the same padding-left iam put #main-content.
html
<div class="row">
<!-- navigation sidebar -->
<div class="col-2 pt-5" id="sideNav">
<p>paragraph...</p>
</div>
<!-- main content area -->
<main class="col-10" id="main-content">
<p>paragraph...</p>
<p>paragraph...</p>
</main>
</div>
css
#sideNav {
background-color: #012d20;
position: fixed;
z-index: 1;
top: 0;
left: 0;
overflow: hidden;
border-right-style: groove;
height: 100%;
width:40px;
}
#main-content{
width:100%;
float:left;
padding:0 0 0 40px;
background:yellow;
}
I saw you are using bootstrap grid, so to keep the grid working I recommend putting your fixed container in the .col-2 div
#sideNav {
background-color: #012d20;
position: fixed;
z-index: 1;
top: 0;
left: 0;
overflow: hidden;
border-right-style: groove;
height: 100vh;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<!-- navigation sidebar -->
<div class="col-2 pt-5">
<div id="sideNav">
...
</div>
</div>
<!-- main content area -->
<main class="col-10">
...
</main>
</div>
I am creating a bootstrap card with an image. The card body is moved up onto the image using position: absolute an top.
When I add a new div underneath the card, the div is pushed up to the image. I need the content to stay underneath the card body.
I hope this makes sense, but to clear any confusion, please check out the jsfiddle. If you need more information, let me know.
Here is an image of the dilemma:
Just remove position: absolute; top: 320px; left: 76px; styles from .card-body rule and add margin-top:-50px; margin-left: 50px; instead.
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.card {
border: none;
}
.card-body {
width: 80%;
border: 1px solid rgba(0,0,0,.125);
border-radius: .25rem;
background: #fff;
/*position: absolute;
top: 320px;
left: 76px;*/
margin-top:-50px;
margin-left: 50px;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="card" style="width: 100%;">
<img class="card-img-top" src="http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-social.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div>
I need this text to be underneath the card.I tried using margin-bottom for the card, but the problem with this is the content of the card body changed, therefore the height changes which is what i want.
</div>
You can test it here also.
I found a post here where the same question was asked before. I implemented the solution suggested there and it works fine with Chrome and Firefox. But when I tested it on Safari and Opera, I ended up with a long horizontal scrollbar. I'm not sure how to fix it since I've already added using overflow-x: hidden to the body. You can see it in action here.
HTML
<div class="container">
<div class="level"></div>
<div class="level purple"></div>
<div class="level"></div>
</div>
CSS
html, body {
overflow-x: hidden;
}
.container {
width:960px;
margin: 0 auto;
border:1px solid black;
}
.level {
height:100px;
background: #bada55;
}
.purple {
position: relative;
background: #663399;
}
.purple:before,
.purple:after {
content: "";
position: absolute;
background: #663399; /* Match the background */
top: 0;
bottom: 0;
width: 9999px; /* some huge width */
}
.purple:before {
right: 100%;
}
.purple:after {
left: 100%;
}
I checked in the link(www.kampuster.com) you shared and found the problem with your code.
Problem:
In file all/themes/bootstrap_kampuster/css/style.css, you have provided width: 9999px; for classes .homeBanner:before, .homeBanner:after and .countUpSection:before, .countUpSection:after which is causing the whole problem and is not the right way to do it.
Suggestion:
Below is the approach I would suggest you to go with.
Here is a pen to better illustrate the suggestion.
.section-first, .section-third {
background-image: url('http://www.kampuster.com/sites/default/files/bannerlogo_babson.jpeg');
background-attachment: fixed;
background-size: cover;
}
.section-first-inner {
background-color: rgba(83, 192, 183, 0.3);
}
.section-first, .section-second, .section-third {
/* this is just to add height inplace of content */
height: 600px;
color: #ffffff;
overflow: hidden;
}
.section-first-inner, .section-second-inner, .section-third-inner {
padding: 20px 20px;
font-size: 18px;
height: 100%;
}
.section-second {
color: #000;
}
<link href="http://cdn.jsdelivr.net/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML</title>
</head>
<body>
<div class="main-container">
<header id="page-header"></header>
<div class="section-first">
<div class="section-first-inner">
<div class="container">
<div class="row">
<div class="col-sm-12">
Your content for section first goes here
</div>
</div>
</div>
</div>
</div>
<div class="section-second">
<div class="section-second-inner">
<div class="container">
<div class="row">
<div class="col-sm-12">
Your content for section second goes here
</div>
</div>
</div>
</div>
</div>
<div class="section-third">
<div class="section-third-inner">
<div class="container">
<div class="row">
<div class="col-sm-12">Your content for section third goes here</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Instead of setting width:960px; on the container try setting view width: width: 100vw;
So the container css will be:
.container {
width: 100vw;
margin: 0 auto;
border:1px solid black;
}
just use .container-fluid class.
<div class="container-fluid" style="background-image:url('xample.jpg')">
<div class="row">
<div class="col-sm-12">
<div class="container">
<div class="row">
<div class="col-sm-12">
your content here
</div>
</div>
</div>
</div>
</div>
Full width background inside Bootstrap container!!
If this is what you want (Example Demo)
Then simply use Relative Lengths :
vw Relative to 1% of the width of the viewport*
vh Relative to 1% of the height of the viewport*
I have only replaced 2 values in your code:
.container {
width:100vw;
}
.purple:after {
width: 100vw; /* some huge width */
}
Code:
<!-- Latest compiled and minified CSS -->
<
link rel = "stylesheet"
href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<!-- jQuery library -->
<
script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > < /script>
<!-- Latest compiled JavaScript -->
<
script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" > < /script>
html,
body {
overflow-x: hidden;
}
.container {
width: 100vw;
margin: 0 auto;
border: 1px solid black;
}
.level {
height: 100vh;
background: #bada55;
}
.purple {
position: relative;
background: #663399;
}
.purple:before,
.purple:after {
content: "";
position: absolute;
background: #663399;
/* Match the background */
top: 0;
bottom: 0;
width: 100vw;
/* some huge width */
}
.purple:before {
right: 100%;
}
.purple:after {
left: 100%;
}
<div class="container">
<div class="level"></div>
<div class="level purple"></div>
<div class="level"></div>
</div>
Please try this, this is working for me.
add the below css, if doesn't work try adding important to them. And to get full width of container, add container-fluid class to particular container.
html, body {
width: -webkit-fill-available;
overflow-x: hidden;
}
I'm having trouble setting up a "master-detail" view using Bootstrap 3. I'm attaching a picture of the specific layout I'm trying to get:
I've created a div with .row spanning the 12 columns for the header, and then another div.row with a div.col-md-4 and div.col-md-8 for the two columns. But obviously this doesn't achieve what I'm looking for. I've tried playing with the position attribute, but it seems to conflict with the Bootstrap CSS and I always just get jumbled text.
Thank you very much in advance and let me know if you'd like me to provide more details on what I'm looking for. Hopefully the pic is clear.
You are looking for
position: fixed;
This ensures that the element is always static relative to the viewport. You will then use the relative positioning properties to place it where you want it to go.
For the top element (say, your navbar), you can set:
top: 0;
For the bottom element, you can set:
bottom: 0;
So, something like this:
.row, .col-md-4, .col-md-8 {
border: 2px solid pink; /* For showing the div borders */
}
.row.main-content {
background-color: blue;
height: 300px;
margin-top: 20px; /* Needs to match the height of .row.top */
}
.row.top {
position: fixed;
top: 0;
height: 20px;
width: 100%;
background-color: red;
z-index: 9999;
}
.row.bottom {
position: fixed;
bottom: 0;
height: 20px;
width: 100%;
background-color: green;
z-index: 9999;
}
.scrollable {
overflow-y: scroll;
height: 300px; /* May need to be set somehow */
}
<div class="container-fluid"><!-- To get it to take up the whole width -->
<div class="row top">
</div><!-- row -->
<div class="row main-content">
<div class="col-md-4">
<div class="sub-header">
</div>
<div class="scrollable">
<!-- menu items here -->
</div>
<div class="sub-footer">
</div>
</div>
<div class="col-md-8 scrollable">
<!-- Product detail goes here -->
</div>
</div><!-- row -->
<div class="row bottom">
</div><!-- row bottom -->
</div><!-- container-fluid -->
Hope that helps.