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

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"

Related

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

Max-width 760px for block in Bootstrap4?

I need to set block content width to 760px (best for line-lenght) and center it horizontal on the page. Is it possible in pure Boostrap 4 without own CSS?
With the "col-8" class the block content is 730px wide.
With "col-10 px-5" classes the content of the block is 853,984px wide.
In CSS is it easy:
div{
margin:0 auto;
max-width:760px
}
Could you show your code? if the div is inside a div with class container-fluid, just add col to your div class, it's take all width possible in the screen.
The divs container should have the d-flex justify-content-center classes which will made it to be in center. The max-width means the div's MAXIMUM width will be 760px only if the inner content is that wide. You need just width for that.
OR in boostrap the row class is display:flex by default, you can use that too. Just pay attention to the default margins. (margin-left/margin-right: -8px)
<div class="container d-flex justify-content-center">
<div> // with the style="width: 760px;"
</div>
</div>
<div class="row justify-content-center mx-0">
<div> // with the style="width: 760px;"
</div>
</div>

How to change the the opacity of this Bootstrap 4 card without affecting on the form and buttons inside it?

I am trying to use this Bootstrap 4 login form.
https://startbootstrap.com/snippets/login/
I am trying to figure out how to solve these 2 troubles.
I am trying to change the opacity of .card-signin but when I change it affects the form and buttons as well. How can I change opacity only for the card, not for the elements inside it?
How can I center this card in the middle of the screen vertically? It shows in the top while I tried different combinations with vertical-align?
Add below css and you're all set...
html,body,.container,.row {
height: 100%;
}
.col-sm-9.col-md-7.col-lg-5.mx-auto {
align-items: center;
display: flex;
}
.card.card-signin.my-5 {
background-color: rgba(255, 255, 255, 0.6);
}
"How can I center this card in the middle of the screen vertically? It shows in the top while I tried different combinations with vertical-align?"
Important! Vertical center is relative to the height of the parent
If the parent of the element your trying to center has no defined height, none of the vertical centering solutions will work!
Now, onto vertical centering in Bootstrap 4...
You can use the new flexbox & size utilities to make the container full-height and display: flex. These options don't require extra CSS (except that the height of the container (ie:html,body) must be 100%).
Option 1 align-self-center on flexbox child
<div class="container d-flex h-100">
<div class="row justify-content-center align-self-center">
I'm vertically centered
</div>
enter link description here
Option 2 align-items-center on flexbox parent (.row is display:flex; flex-direction:row)
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="jumbotron">
I'm vertically centered
</div>
</div>
</div>
enter link description here
Option 3 justify-content-center on flexbox parent (.card is display:flex;flex-direction:column)
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="card h-100 border-primary justify-content-center">
<div>
...card content...
</div>
</div>
</div>
</div>
enter link description here
Instead of using opacity, you can try out following style.
.card-body {
background: rgba(255, 252, 252, 0.09);
}
Try below css.
.card {
background-color: rgba(255,255,255, 0.2) !important;
}

How the child div cover the full width of the parent div in Bootstrap without using positioning?

I have a child div within the Bootstrap container div. How can the child div cover the full width of the parent ?
<div class="container">
<div class="row">
<div class="col-md-12 parent">
<div class="Full-Width"></div>
</div>
</div>
</div>
How to make this .Full-Width div width 100% of it's parent div ?
Bootstrap gives padding for some elements by default. So you have to add custom class to those elements and set padding to 0.
http://jsfiddle.net/732a8rmp/
Bootstrap 4 you can use w-100 class.
<div class="container">
<div class="row">
<div class="col-md-12 parent">
<div class="w-100"></div>
</div>
</div>
</div>
Reference: [https://getbootstrap.com/docs/4.0/utilities/sizing/][1]
Umm, you should probably re-word your question because as it sits right now,
this css: .Full-Width{width: 100%;} answers your question.
CSS
.Full-Width {
display: block
}
This can also be done using:
.Full-Width {
width: 100%
}

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

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>