How to divide html page vertically and set a full height background? - html

note: i'm using bootstrap, if it could help somehow.
.html, css, container {
height: 100%;
}
My problem is, i cant set it in html or body class (like some solutions suggest), because i dont want it to every pages. I just need this in one page.
I've tried to aplly it to my custom DIV but it wont work if I dont have content inside. Height is set to 100% but stills 0px, unless i put some content inside that div.

You can add a class to the <html> tag for the page you wish to have 100% height
<html class="full-height-page">
Then use this CSS below
.full-height-page,
.full-height-page body {
height: 100%;
min-height: 100%; /* this is necessary */
}

First, add this style to this particular page
body, html {
height: 100%;
}
Then use this. This code divides the page into 2 columns vertically and vertically align the contents. Content on the left is center-aligned. Only bootstrap classes are used. Call bootstrap 4 beta ver to apply the code.
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-sm-6 styled-bg">
<div class="d-flex align-items-center justify-content-center h-100">
<div class="col-sm-6 text-center">
This is left column
</div>
</div>
</div>
<div class="col-sm-6">
<div class="d-flex align-items-center h-100">
<div class="col-sm-6">
This is Right column
</div>
</div>
</div>
</div>
</div>

Related

Why cant i increase the height of this div (using bootstrap)?

Im trying to increase the height of the sidebar, i want it to be the same height as the page.picture of page
I want the box on the left to touch te bottom but when i use the class h-100 it does not work.
The html code of the element:
<div class="container-fluid mt-5">
<div class="row">
<div class="col-2 pt-5 sidebar h-100 sticky-top w100">
...
Thanks in advance
h-100 will work only if the parent div has 100% height !
you can use 100vh instead of above if you cant set the height to the parent
1.If you want to set height of a div first of all you have to make the div as display-inline-block. Because inline element doesn't allows height and div is a inline element. Set height manually using css
.container-fluid {
height: 100px;
}
If h-100 means height: 100% according to the content of the div or child elements. So the height will be only the text height.
<div class="container-fluid mt-5">
<div class="row">
<div class="col-2 pt-5 sidebar h-100 w-100 d-inline-block sticky-top">
test text
Your sidebar actually have the same height of your page. Is your page that is not touching the bottom of the screen.
You have two ways to fix this.
1. set body height to 100vh in your styles.css
body {
height: 100vh;
}
2. wrap your page in a div
<div style="height: 100vh">
<div class="container-fluid mt-5">
<div class="row">
<div class="col-2 pt-5 sidebar h-100 sticky-top w100">
...
</div>
add this code to your css file
#media screen and (min-width: 1024px) {
myNewDivHeight{
height:250px;
}
}
add this class to your div
class="col-md-12 myNewDivHeight"

want to create a bootstrap album on homepage?

I am trying to create a album style like the example below:
if you look at the recent works section where you have an image on one side and text on the other but it takes up the whole width of the page:
https://colorlib.com/preview/theme/racks/
or the example on this page:
https://getbootstrap.com/docs/4.4/examples/product/
<section class="recent-ideas">
<div class="container">
<div class="card w-50 h-10 p-3" style="width: 18rem;">
<img class="card-img" src="images/bulb.jpeg" >
</div>
</section>
The code i am using above basically creates a card in bootstrap but when i insert the picture i dont know how to format the height and width to keep everything the same
As I mentioned in the comment use container-fluid and overwrite the left/right padding using another class in a different css file.
HTML File
<div class="container-fluid my-container">
<div class="row no-gutters"></div>
</div>
CSS File
.my-container {
padding-left: 0 !important;
padding-right: 0 !important;
}
Then you can add your css file as you normally do. The reason to not overwrite the container-fluid class is because you might need it in another part of your site with the paddings.
The second option is not use the container class and use the row and no-gutters:
<div class="row no-gutters">
<!-- your content here -->
</div>
To give the images the same width just use the same column class in all of them and use the background-image property in the elements instead of using an actual image. Since in the sample the images have a link in them you can use something like this:
HTML File
<div class="row no-gutters my-row">
<div class="col-12 col-md-6">
</div>
<div class="col-12 col-md-6">
<div class="content-container">
<!-- content-here -->
</div>
</div>
</div>
CSS File
.content-container {
display: flex;
height: 100%;
align-items: center;
padding: 2rem 1rem;
min-height: 50vh;
}
.content-text {
text-align: center;
margin: 0;
}
.image-link {
display: block;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 50vh;
}
I added the min-height to the image and content container in order to keep the sizes regardless of the content. In the link you provide the reason all the elements have the same height is because they have the same amount of text, if you change that the entire layout breaks in an ugly way, that is a sign of a poorly thought and constructed layout, that hasn't been tested thoroughly.
Here is a working example:
https://codepen.io/rhernando/pen/WNbaaeN?editors=1100

How to make Bootstrap columns take the height of main?

I want to center vertically the divs inside the container but the columns take the height of the document and not of main (whom height equals the one of its content) Hereby my code:
<main class="col-lg-12">
<div class="col-lg-1 col-md-0"></div>
<div class="col-lg-4 col-md-6 col-xs-12">
<img src={{image}}>
</div>
<div class="col-lg-1 col-md-0" ></div>
<div class="col-lg-4 col-md-6 col-xs-12">
<div class="title">{{title}}</div>
<div class="text">{{text1}}</div>
</div>
<div class="col-lg-1 col-md-0"></div>
</main>
main div{
height: 100%;
}
I can see in Developer Tools that the div takes 100% of the doc not of main... How could I fix this in order to vertically align the image?
Thank you!
first bootstrap .col should be in .row container
you might need one in your main col to nest columns inside
then, don’t write css to set height:100% on columns, you dont need that.
If I’m right .col have display: flex, so you can use align-items-stretch class to make you column taking the height of their wrapper, being the missing .row
I suppose you will need a height:100% on the row. to do that add it a class h-100

Is it possible to add a background image to a <div> element on a JSP page? - Spring

I have been looking for an answer for this for a few days now and can not seem to find a solution. Below is the example I am trying to implement, however no image is displayed. The aim is to have a responsive image that covers the entire page.
<div class="col-md-12 img-responsive"
style="background-image:url(<c:url value='/resources/img/abstract-ice.jpeg' />);">
as far as I am aware this should work, I have resource mapping implemented and is working, I can tell this by navigating to the url and the image is displayed.
When placing this tag into the body element with the background attribute it displays the image but is not responsive and cuts the image as it pleases. I have tried styling this with bootstrap and using my own css, but anything I do makes no change/removes the image completely.
This url does also work with the <img> tag except then I can not overlay other elements with ease.
Ultimately my question is how can I get the div element to accept this url as a background image using pure css?
Any suggestions/prior experience would be welcomed.
HTML code
<body background="">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 header_bar">
<div class="col-md-6 text-left">
Home
</div>
<div class="col-md-6 text-right">
log in
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 img-responsive" style="background-image:url(<c:url value='/resources/img/abstract-ice.jpeg' />);">
</div>
</div>
</div>
Write a class to the div and write the css. set width and height for responsiveness. Remove the bootstrap classes "img-responsive".
i.e
HTML :
<div class="yourclassname">
CSS:
.yourclassname
{
background-image:<c:url value="/resources/img/abstract-ice.jpeg" />
width: 100%;
height: auto;
}
Thanks to #Wisely for pointing me in the right direction,
This was solved by removing the bootstrap classes from the div that I was trying to add the background image to.
The HTML
<div class=" yourClassName" style="background-image:url(<c:url value='/resources/img/abstract-ice.jpeg' />)"></div>
The CSS
.yourClassName {
height:100px;
width:100px;
background-size: cover;
background-repeat: no-repeat;
}

Twitter Bootstrap/Unify center variable amount of images

I want to create a call-to-action box with centered content
The box is contains two rows
the first row has the title and the second a variable amount of images, with a maximum of 12 (if greater than, then it will be three or more rows).
The text get perfectly centered using .text-center.
However i cannot create a div with the width of the content.
What i have now:
<div class="container">
<div class="row">
<div class="col-md-12" style=" padding: 10px 0 0;">
<div class="row text-center">
<div class="col-md-12 animated fadeInLeft">
<span class="color-green">Title</span>
</div>
</div>
<div class="row text-center">
<div class="col-md-9 center-block">
<!-- Content / Images-->
</div>
</div>
</div>
</div>
</div>
I tried multiple setups but the center-block doesn't seem to place the col-md-9 in the middle. (even though it does apply margin: 0 auto;)
What can i do to create equal width images in the center of their container, with variable amount. I'm using Unify Template which is based on Twitter Bootstrap 3
Since text-center affects on inline-level elements(children) only, you need to make them inline. It's clear. So all you need is to make <div class="col-md-9 center-block"> inline. Do it:
.center-block {
display: inline-block;
float: none;
}
If you want to push not more than 12 images in one line without javascript, I think there's the only way:
.center-block img {
width: 8.2%;
}