I am using latest version of bootstrap and have a design with 2 columns where the first column should contain some text and the second column should contained a background image which fills the whole column up to the users right screen. I want the background image to go outside the column to the right, until it reaches the edge of the browser.
like this:
how can i make second column to go outside the container? That's what i am currently using which is not working (image gets cut off by container)
<div class="container">
<div class="row">
<div style="" class="col-sm-12 col-lg-6">
<p>Example text</p>
</div>
<div class="col-sm-12 col-lg-6 bg-image" style="background-image:url('http://placehold.it/1800x1045');">
</div>
</div>
</div>
Try adding a contain value to the background image.
style="background-image: url('http://placehold.it/1800x1045'); background-size: contain;"
You can create the main container as "container-fluid" to fill the entire page content and then create the columns, one other container with your text and the other with the image, check the code below, ignore the height and the borders because I was trying to create your scenario:
<html>
<head>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid" style="height: 500px;">
<div class="row h-100">
<div class="col-sm-6" style="border: 1px solid pink;">
<div class="row">
<div class="container">
<div style="border: 1px solid blue;" class="col-sm-6 col-lg-6">
<p>Example text</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-6 no-gutters bg-image" style="background-image:url('https://dummyimage.com/600x400/666/fff'); border: 1px solid red;">
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>
What you are trying to do is not contemplated by Bootstrap, but you can use a workaround. Why it is not contemplated? Because for a 2 column layout, it uses up 50% of the div, and you are not asking for a 50/50 layout.
First of all, the container, fluid or not, doesn't entirely touch the side of the page. Also, in both cases it is symetrical, and your design is not.
So... what you want to do is a greater div that occupies 100% of the page, with a container (fluid or not) in it. With absolute positioning, you create another div that occupies 50% of the greater div, and has the image as background.
.greater-container {
position: relative; //needed so that the .image-container can be properly positioned
}
.image-container {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
right: 0;
background-color: green;
background-image: url('http://placekitten.com/g/1800/1045');
background-size: cover;
z-index: 0;
}
.content-column {
border: 1px solid red; //so that we can see it
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="greater-container">
<div class="image-container"></div>
<div class="container">
<div class="col-sm-6 content-column">
Lorem ipsum sid dolor amet. Lorem ipsum sid dolor amet. Lorem ipsum sid dolor amet. Lorem ipsum sid dolor amet. Lorem ipsum sid dolor amet. Lorem ipsum sid dolor amet. Lorem ipsum sid dolor amet.
</div>
</div>
</div>
As a sidenote, this is not an easy layout for a responsive website. That background-image will get resized a lot and will probably not always work well.
Related
Is it possible to have a grid like the first one on desktop moving to the second one on mobile with bootstrap4 or, else, with pure css flex classes ?
Desktop view:
Mobile view :
For the moment my solution is the following one, but I do not like to repeat green content in two places. Can I avoid that please ?
<div class="container">
<main class="row">
<section class="col-lg-8 ecran">
<div class="row mes-contrats justify-content-around">
<div class="col-12">
lot's of content in red container
</div>
</div>
<div class="row infos justify-content-around d-none d-lg-block">
<div class="col-12">
lot's of content in green container
</div>
</div>
</section>
<div class="col-lg-4 asides">
<div class="row">
<div class="col-12">
lot's of content in blue container
</div>
<div class="col-12 d-block d-lg-none">
lot's of content in green container
</div>
</div>
</div>
</main>
This solution is not pure bootstrap because to achieve the solution I used the position absolute and bootstrap does not have the mobile breakpoints on the position-absolute utility.
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<style>
.cnt-red { border: 5px solid red; }
.cnt-blue { border: 5px solid blue; }
.cnt-green { border: 5px solid green; }
#media (min-width: 576px) {
.cnt-left { width: 75%; }
.cnt-right { width: 25%; right: 0; top:0; position: absolute; }
}
</style>
</head>
<body>
<div class="d-flex flex-column ">
<div class="p-2 cnt-left flex-grow-1 cnt-red flex-fill">Flex item 1</div>
<div class="p-2 cnt-right cnt-blue flex-fill">Flex item 2: Lorem ipsum dolor sit amet consectetur adipisicing elit... </div>
<div class="p-2 cnt-left cnt-green flex-fill">Flex item 3</div>
</div>
</body>
</html>
I have a page with multiple columns, a header, and a footer. I want a column to scroll with the user, but not overlap the footer:
<html>
<head></head>
<body>
<div id="wrap">
<div id="main" class="clear-top">
<div class="col-lg-12">
<div class="row pl-4 justify-content-between pb-4">
<div class="col-lg-1 col-md-12 col-sm-12 ">
</div>
<div class="col-lg-7 col-md-12 col-sm-12 ">
... Main Content ...
</div>
<div class="col-lg-4 col-md-12 col-sm-12 p-4 sidebar-container">
... Content I want to Scroll with User ...
</div>
</div>
</div>
</div>
</div>
</body>
<footer class="footer">
<div class="container">
</div>
</footer>
</html>
CSS:
// General Styling
html, body{
height: 100%;
}
#wrap {
min-height: 100%;
}
#main {
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}
.footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
width: 100%;
bottom: 0;
}
I'm using Bootstrap 4, so I've tried adding the sticky-top class to the column I want to scroll, however nothing changed.
I've tried changing the position of the column to sticky, but again nothing seems to change. Am I adding this to the wrong div?
As per my understanding, you are looking forward to have a sidebar which floats through the content. If that's the case here is the solution. I have used sticky-top which sticks your side-nav to the top. No need to use any CSS to align your footer to the bottom. You can use bootstrap inbuilt class d-flex flex-column min-vh-100 to your main container and use mt-auto to your footer. This will align your footer to the bottom of the page
.custom-container {
height: 500vh;
}
ul {
list-style: none;
padding: 0
}
footer {
background: yellow
}
#side-nav {
background: blue;
height: 100%
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container-fluid d-flex flex-column min-vh-100">
<div class="row">
<div class="col-sm-4">
<div id="side-nav">
<ul class="sticky-top text-center">
<li><button id=1>Link1</button></li>
<li><button id=2>Link2</button></li>
<li><button id=3>Link3</button></li>
</ul>
</div>
</div>
<div class="col-sm-8 ">
<div class="custom-container">
<h2>Content that scrolls</h2>
<h5>What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a
type specimen book it has?</h5>
</div>
</div>
</div>
<footer class="mt-auto">footer</footer>
</body>
</div>
So I'm having a hard time aligning a button at the bottom of my Bulma's column.
I want the button "Buy" to be at the bottom of the right column (side by side with the button "Hello"). I'm in this situation because my other column content is longer.
So far I tried thoses CSS styles on my button (and none of them helped me):
vertical-align: bottom;
margin-bottom: auto;
position: absolute;
bottom: 0;
Here is my HTML:
<section class="section">
<div class="columns is-centered">
<div class="column is-one-fifth">
<h4 class="title is-4">I'm a big column</h4>
I'm taller than the column next to me so my column will be bigger, lorem ipsum lorem ipsum lorem ipsum lorem ipsum
<h6 class="sub">"lorem ipsum"</h6>
<button class="button is-fullwidth">Hello</button>
</div>
<div class="column is-one-fifth">
<h4 class="title is-4">I'm a small column</h4>
I'm a small column, and my button missplaced
<h6 class="sub">"lorem ipsum"</h6>
<button class="button is-fullwidth">BUY</button>
</div>
</div>
</section>
Could you guys help me?
Thanks.
Alright, foud the answer : The Bulma column needs to have a few properties (suggested by #ahsan-ullah). Then the button needs to have an auto margin to top.
<section class="section">
<div class="columns is-centered">
<div class="column is-one-fifth item">
<h4 class="title is-4">I'm a big column</h4>
I'm taller than the column next to me so my button will be higher,lorem ipsum lorem ipsum lorem ipsum lorem ipsum
<h6 class="sub">"lorem ipsum"</h6>
<button class="button is-fullwidth">Hello</button>
</div>
<div class="column is-one-fifth item">
<h4 class="title is-4" style="align-self: flex-start;">I'm a small column</h4>
I'm a small column, and my button is well placed
<h6 class="sub">"lorem ipsum"</h6>
<button class="button is-fullwidth">BUY</button>
</div>
</div>
</section>
.item{
display:flex;
flex-direction:column;
justify-content:space-between
}
.columns button{
margin-top: auto;
}
Result :
hope it is the answer for you work.
.maindiv{
width:200px;
height:180px;
border:1px solid red;
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-between
}
.innerdiv{
display:flex;
flex-direction:column;
}
button{
width:150px;
height:30px;
color:white;
background-color:blue;
border-radius:4px
}
<div class='maindiv'>
<h3>Mana Foutan</h3>
<span>lorem ipsum lorem ispum</span>
<div class='innerdiv'>
<i>Make it rain!</i>
<button>Buy</button>
</div>
</div>
You can use inline style margin-top:auto on the column div like this:
<div class="column is-one-fifth" style="margin-top: auto;">
<h4 class="title is-4">I'm a small column</h4>
I'm a small column, and my button missplaced
<h6 class="sub">"lorem ipsum"</h6>
<button class="button is-fullwidth">BUY</button>
</div>
Alternately, probably preferably, add it as a custom style to your .css and use it as a class inline.
.css:
.valignbottom{
margin-top: auto;
}
html:
<div class="column is-one-fifth valignbottom">
<h4 class="title is-4">I'm a small column</h4>
I'm a small column, and my button missplaced
<h6 class="sub">"lorem ipsum"</h6>
<button class="button is-fullwidth">BUY</button>
</div>
In my project I've set background image with the following attributes:
body {
background-image: url("/");
background-size: cover;
background-repeat: no-repeat;
}
But when there are lots of elements on some page, this image stretching and enlarging to the bottom and, therefore, becomes ugly. How to do it non-stretchable? So that I can scroll down and that image would be constant.
Here's the example of the image stretching on CodePen. Below is the snippet:
body {
background-image: url("http://www.planwallpaper.com/static/images/canberra_hero_image.jpg");
background-size: cover;
background-repeat: no-repeat;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class=col-md-4>
<div class="jumbotron">
Some element
</div>
</div>
<div class=col-md-4>
<div class="jumbotron">
Some element
</div>
</div>
<div class=col-md-4>
<div class="jumbotron">
Some element
</div>
</div>
<div class=col-md-4>
<div class="jumbotron">
Some element
</div>
</div>
<div class=col-md-4>
<div class="jumbotron">
Some element
</div>
</div>
<div class=col-md-4>
<div class="jumbotron">
Some element
</div>
</div>
<div class=col-md-4>
<div class="jumbotron">
Some element
</div>
</div>
<div class=col-md-4>
<div class="jumbotron">
Some element
</div>
</div>
<div class=col-md-4>
<div class="jumbotron">
Some element
</div>
</div>
<div class=col-md-4>
<div class="jumbotron">
Some element
</div>
</div>
<div class=col-md-4>
<div class="jumbotron">
Some element
</div>
</div>
<div class=col-md-4>
<div class="jumbotron">
Some element
</div>
</div>
<div class=col-md-4>
<div class="jumbotron">
Some element
</div>
</div>
<div class=col-md-4>
<div class="jumbotron">
Some element
</div>
</div>
<div class=col-md-4>
<div class="jumbotron">
Some element
</div>
</div>
<div class=col-md-4>
<div class="jumbotron">
Some element
</div>
</div>
<div class=col-md-4>
<div class="jumbotron">
Some element
</div>
</div>
<div class=col-md-4>
<div class="jumbotron">
Some element
</div>
</div>
<div class=col-md-4>
<div class="jumbotron">
Some element
</div>
</div>
</div>
</div>
If you do not want the background image to stretch then you should not set background-size: cover on the element. Setting the background size to cover would mean that the background image would be scaled (stretched) to fit the size of the container element.
Here is what MDN says about background-size: cover:
Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container.
If you want the background image to remain constant even when scrolling down the page, you should add background-attachment: fixed to the element. This would keep the image in its place.
The background-position: 50% 50% in the below snippet is an optional setting which is just used to keep the background image positioned at the center-mid. This can be avoided if such a positioning is not required. By default the image would get positioned at top-left.
body {
background-image: url("http://lorempixel.com/850/420/nature/1");
background-position: 50% 50%;
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
}
div{
height: 100px;
}
<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>
Note that stretching happens with background-size: cover only when the background-attachment: fixed setting is not applied (meaning, the image is not constant and gets stretched to fit container's full height/width) or when the image is smaller than the container. When it is larger than the container and background-attachment: fixed setting is applied, the image does not get stretched.
Another thing to note with background-size: cover is that when the image and the container have different sizes, the image is clipped at the sides. If it should be shrunk instead of being clipped then background-size: 100% 100% could also be used.
body {
background-image: url("http://lorempixel.com/850/420/nature/1");
background-position: 50% 50%;
background-attachment: fixed;
background-size: 100% 100%;
background-repeat: no-repeat;
}
div{
height: 100px;
}
<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>
<div>Lorem Ipsum Dolor Sit Amet......</div>
Ok so I set my wordpress content to all float left of each other. So it will be 3 columns.
Now when the title of one div is longer, the boxes are all over the place. Here is what I mean (see image below)
Notice that the james brown title is longer and the other two boxes fall way down.
How can I get them to float up no matter how long a title is.
I have tried vertical-align:top; but that doesn't work
You can get it by two ways.
If you want your boxes top-aligned on each row : simply use a .clear element.
h2 {
font-weight: bold;
clear: left;
}
.box {
width: 50px;
min-height: 50px;
background: #ccc;
margin: 3px;
padding: 3px;
float: left;
}
.clear {
clear: both;
height: 0px;
}
<h2>Without columns</h2>
<div class="box">1 Lorem Ipsum</div>
<div class="box">2 Lorem Ipsum Lorem Ipsum</div>
<div class="box">3 Lorem Ipsum</div>
<p class="clear"> </p>
<div class="box">4 Lorem Ipsum Lorem</div>
<div class="box">5 Lorem Ipsum</div>
<div class="box">6 Lorem Ipsum</div>
<p class="clear"> </p>
<div class="box">7 Lorem Ipsum</div>
<div class="box">8 Lorem Ipsum</div>
If you want your boxes stucked to the above one, use colums (you'll need to modify a little bit your PHP code)
h2 {
font-weight: bold;
clear: left;
}
.box {
width: 50px;
min-height: 50px;
background: #ccc;
margin: 3px;
padding: 3px;
float: left;
}
.column {
width:60px;
float: left;
}
<h2>With columns</h2>
<div class="column">
<div class="box">1 Lorem Ipsum</div>
<div class="box">4 Lorem Ipsum Lorem</div>
<div class="box">7 Lorem Ipsum</div>
</div>
<div class="column">
<div class="box">2 Lorem Ipsum Lorem Ipsum</div>
<div class="box">5 Lorem Ipsum</div>
<div class="box">8 Lorem Ipsum</div>
</div>
<div class="column">
<div class="box">3 Lorem Ipsum</div>
<div class="box">6 Lorem Ipsum</div>
</div>
Using the new nth-child() selector, you can do this:
div:nth-child(3n+1) {
clear:left;
}
This way, the 1st, 4th, 7th, etc, children will move the left of the box 'clearing' all other elements.
The advantage of using this method is that you can adjust the layout responsively. For example, on mobiles you can have two in every row, on large desktops 4 in every row. There's also no non-semantic markup.
The disadvantage is that it doesn't work in IE before version 9, but you can get around that with JavaScript. e.g. jQuery:
// polyfill for browsers that don't support nth-child() CSS selectors
$('.box:nth-child(3n+1)').style('clear', 'left');
See: http://jsfiddle.net/rVHgR/