I need to split window in to the 2 horizontal divs by height:50%; width:100%:, is it possible with bootstrap? Tried like this:
<div class="container-fluid">
<div class="row">
<div class="col-lg-12" style="border:1px solid red">
1
</div>
<div class="col-lg-12" style="border:1px solid red">
2
</div>
</div>
</div>
With green matched how it should be...
Just a suggestion calculate the height of the .row div dynamically using javascript. CSS height:50% will only work if the parent div is given some height.
EG: .row{ height:500px; } will work fine.
But calculate this height using jQuery function $(window).height().
Assuming this is your only markup you can give each parent element a height of 100%:
body,html {
height: 100%;
}
.container-fluid {
height: 100%;
}
.row {
height: 100%;
}
.col-lg-12 {
height: 50%;
}
DEMO
Not sure why you would need to have 2 boxes with no content containing set heights?
Surely the rational thing to do is fill it with content first, then add padding to your divs to make the design the way you want it.
Adding heights to an empty div is asking for trouble early in your build stage.
Simply add 1 x id to each col-lg-12 as shown below:
<div class="col-lg-12" id="topContent" style="border:1px solid red">
1
</div>
<div class="col-lg-12" id="bottomContent" style="border:1px solid red">
2
</div>
Now when you finished adding content simply reference the ID and add padding top or bottom to your id and you will find it is a lot simpler to code going forward. Trying to mess with set heights early really is looking for problems if going responsive.
Related
I'm a backend guy and trying to figure out a few details for a project we have that's using Bootstrap 4.
Simply put, we want to create the layout that's executed here:
https://codepen.io/mediumandmessage/pen/xVeXop
(this example and the code below is from the original Bootstrap 3 example I found, not Bootstrap 4)
HTML:
.somesection {margin-top:50px!important;}
body {
font-size:17px;
font-family:Helvetica Neue;
}
img {max-width:100%;}
.overlay-text {
font-size:3.5vw;
float:right;
width:65%; /*important*/
bottom:21vw; /*important*/
padding: 25px;
background:#f7f7f7;
}
<div class="container somesection">
<div class="row col-xs-6">
<img src="https://images.unsplash.com/photo-1459664018906-085c36f472af?format=auto&auto=compress&dpr=1&crop=entropy&fit=crop&w=1087&h=725&q=80">
</div>
<div class="col-xs-3 col-sm-offset-4 overlay-text">
This is some text that should partially overlay.
</div>
</div>
However, that example uses Bootstrap 3 and breaks in Bootstrap 4 (the text displays horizontally below the image) and also does not stack the divs responsively.
I've tried screwing around with absolute and relative positioning, etc. it became a lot of code to execute cleanly and make responsive and I was hoping someone out there may have some insight into implementing in pure Bootstrap4...
If anyone out there can share any expertise here, I'd greatly appreciate it!
You could add a transform to your overlay column (you may need to cancel this with a media query for your smaller screens).
Please note in the html below, I have fixed your code to work with boostrap 4 - columns have to be inside a row (they cannot be on a row) and I don't think there is a -xs class any more
.overlay-text {
/* these two are needed - the align self makes the column not stretch the whole height of the image column and the translate moves the column over the image */
align-self: flex-start;
transform: translateX(-20%);
/* the following are for example only */
background-color: #ffffff;
padding:20px;
}
<div class="container somesection">
<div class="row">
<div class="col col-sm-6">
<img src="https://images.unsplash.com/photo-1459664018906-085c36f472af?format=auto&auto=compress&dpr=1&crop=entropy&fit=crop&w=1087&h=725&q=80" class="w-100">
</div>
<div class="col col-sm-3 col-sm-offset-4 overlay-text">
This is some text that should partially overlay.
</div>
</div>
</div>
Example bootply
Just add position:relative; to the .overlay-text
You can also adjust the value of bottom
.somesection {margin-top:50px!important;}
body {
font-size:17px;
font-family:Helvetica Neue;
}
img {max-width:100%;}
.overlay-text {
font-size:3.5vw;
float:right;
width:65%; /*important*/
bottom:21vw; /*important*/
padding: 25px;
background:#f7f7f7;
position:relative;
}
<div class="container somesection">
<div class="row col-xs-6">
<img src="https://images.unsplash.com/photo-1459664018906-085c36f472af?format=auto&auto=compress&dpr=1&crop=entropy&fit=crop&w=1087&h=725&q=80">
</div>
<div class="col-xs-3 col-sm-offset-4 overlay-text">
This is some text that should partially overlay.
</div>
</div>
I have created a header div as follows:
<div class="header">
<div class="row">
<div class="col-lg-2 col-sm-2 col-xs-2 col-md-2">
<img class="img-responsive" src="logo.png"/>
</div>
</div>
</div>
Here is the header class:
.header {
background-color: #5DBCD2;
height: 10%;
}
Even though the div's max height is restricted to 10%, the image exceeds this.
Can someone please help
Add the following to your CSS so that you can have the image contained within the div nicely as it scales down.
.header img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
You can also add overflow: hidden; to the header element but that will cut it off rather than scale it, but it is another potential option.
I am not sure if it will be to any help, but try to add a max-height to the image in CSS.
EDIT
You could add this in the CSS (so that the image has 10% of the width of the parent):
.img-responsive {
width: 10%;
}
I tried your code with an image of 2000 x 1522 pixel dimensions.
Worked fine.
Few things you can do:
1) Debug your page using Developer tools in the browser.
2) Check if your css file path is correct.
3) Check for any errors in console part of the developer tools.
In your above code bootstrap before declaring row you must first declare container you should have something like this below
<div class="header">
<div class="container">
<div class="row">
<div class="col-lg-2 col-sm-2 col-xs-2 col-md-2">
<img class="img-responsive" src="logo.png"/>
</div>
</div>
</div>
</div>
Probably this should work
I am working on a grid layout using css flex styling and want a total css solution, if possible, I have the means to fix it with javascript.
When a row exceeds the viewport width, it displays the scrollbar,
but when you scroll, the styling of the row element remains the size of the viewport,
it does not seem to "wrap" all of its children.
see : fiddle
Try scrolling, you will see the yellow row (.sk_row) class does not appear around all its children.
A solution would be fine, but I would like to know why the parent does not visually contain all children. I think I may be missing some key concept about flexboxes...
Duplicate of fiddle code...
<body>
<div id='pg_wrap'>
<div id='frm0'>
<div class='sk_scrl'>
<div class='sk_row'>
<div class='itm_val'>row 1</div>
<div class='itm_val'>1</div>
<div class='itm_val'>2</div>
<div class='itm_val'>3</div>
<div class='itm_val'>4</div>
<div class='itm_val'>5</div>
<div class='itm_val'>6</div>
<div class='itm_val'>7</div>
<div class='itm_val'>8</div>
</div>
<div class='sk_row'>
<div class='itm_val'>row 2</div>
<div class='itm_val'>1</div>
<div class='itm_val'>2</div>
<div class='itm_val'>3</div>
<div class='itm_val'>4</div>
<div class='itm_val'>5</div>
<div class='itm_val'>6</div>
<div class='itm_val'>7</div>
<div class='itm_val'>8</div>
</div>
</div>
</div>
</div>
#frm0{ width:420px;height:200px}
.sk_scrl{ overflow:auto;display:flex;flex-flow:column;align-content:stretch}
.sk_row{
display:flex;
justify-content:flex-start;
align-items:center;
background:#ff0;border:2px #f00 solid;
height:50px}
.itm_val{
display:flex;
border:1px #000 solid;background:#666;
flex:0 0 100px; height:30px; margin:0 5px;
align-items:center;justify-content:center}
Note : this is not the same as question
That op wants to change child behaviour, I want the parent to change.
It's not working the way you want because .sk_row inherits the width, in this case from #frm0:
#frm0 { width: 420px; }
With the class .sk_scrl you can't see it very well, because it's set to:
.sk_scrl { overflow: auto; }
If you use your browsers developer tools (assuming you have any), you'll see that the elements wrapped around your .itm_val divs are all 420 pixel wide. The reason the .itm_val divs are all visible outside of their container, is because they are "overflowing" out of their containing div.
Here's an example for how the width-inheriting-thing works:
<div class="container">
<div class="element"></div>
</div>
If you set the the width of .container to 50%, it will use up half of the available width within the window. If, however, you want .element to take up the full width of the window, you will have to adjust the width like this:
.element {
width: 200%;
}
If it were set to 100%, it would only be as wide as .container.
Here's a fiddle: http://jsfiddle.net/Niffler/n8hmpv13/
I have some divs that should take the entire height of a page. I managed to get this working as i needed. (Some fixed rows and some flexible rows) like in a html table.
I took the solution from one of my other questions here:
Layout divs in css like table cells in HTML Tables
Today i had to add a div inside the flexible row which should take 100% of the height of the flexible row. Which works great in all major browsers. Muahaha that was a good joke wasn't it? Of course this doesn't work as expected in IE see my js fiddle:
<div class="tableContainer">
<div class="row rowA">
<div class="cell">Test</div>
</div>
<div class="row rowB">
<div class="cell">Test</div>
</div>
<div class="row rowC">
<div class="cell">Test</div>
</div>
<div class="row rowD">
<div class="cell testcell">
<div class="testcontent">Test</div>
</div>
</div>
<div class="row rowE">
<div class="cell">Test</div>
</div>
</div>
http://jsfiddle.net/7ewEJ/3/
the ie seems to take the "100%" from the page and not from the enclosing flexible table row. So the blue div should take the whole space of the purble table row.
Am i doing anything wrong?
Could this be a bug in ie's height calculation?
http://jsfiddle.net/7ewEJ/5/
div.testcell{
height: 100%;
width: 100%;
min-width: 1px;
min-height: 1px;
/*background: #fff;*/
align: center;
display: block;
}
http://twitter.github.com/bootstrap/scaffolding.html
I tried like all combinations:
<div class="row">
<div class="span7 offset5"> box </div>
</div>
or
<div class="container">
<div class="row">
<div class="span7 offset5"> box </div>
</div>
</div>
changed span and offset numbers...
But I cant get a simple box perfectly centered on a page :(
I just want a 6-column-wide box centered...
edit:
did it with
<div class="container">
<div class="row" id="login-container">
<div class="span8 offset2">
box
</div>
</div>
</div>
But the box is too wide, is there any way I can do it with span7 ?
span7 offset2 gives extra padding to the left span7 offset3 extra padding to the right...
Bootstrap's spans are floated to the left. All it takes to center them is override this behavior. I do this by adding this to my stylesheet:
.center {
float: none;
margin-left: auto;
margin-right: auto;
}
If you have this class defined, just add it to the span and you're good to go.
<div class="span7 center"> box </div>
Note that this custom center class must be defined after the bootstrap css. You could use !important but that isn't recommended.
besides shrinking the div itself to the size you want, by reducing span size like so... class="span6 offset3", class="span4 offset4", etc... something as simple as style="text-align: center" on the div could have the effect you're looking for
you can't use span7 with any set offset and get the span centered on the page (Because total spans = 12)
Bootstrap3 has the .center-block class that you can use. It is defined as
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
Documentation here.
If you want to go full-bootstrap (and not the auto left/right way) you need a pattern that will fit within 12 columns e.g. 2 blanks, 8 content, 2 blanks. That's what this setup will do.
It only covers the -md- variants, I tend to snap it to full size for small by adding col-xs-12
<div class="container">
<div class="col-md-8 col-md-offset-2">
box
</div>
</div>
Sounds like you just wanted to center align a single container.
The bootstrap framework might be overcomplicating that one example, you could have just had a standalone div with your own styling, something like:
<div class="login-container">
<!-- Your Login Form -->
</div>
and style:
.login-container {
margin: 0 auto;
width: 400px; /* Whatever exact width you are looking for (not bound by preset bootstrap widths) */
}
That should work fine if you are nested somewhere within a bootstrap .container div.
add the class centercontents
/** Center the contents of the element **/
.centercontents {
text-align: center !important;
}
#ZuhaibAli code kind of work for me but I changed it a little bit:
I created a new class in css
.center {
float: none;
margin-left: auto;
margin-right: auto;
}
then the div become
<div class="center col-md-6"></div>
I added col-md-6 for the width of the div itself which in this situation meant the div is half the size, there are 1 -12 col md in bootstrap.
Follow this guidance https://getbootstrap.com/docs/3.3/css/
Use .center-block
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
wrap the div in a parent div with class row then add style margin:0 auto; to the div
<div class="row">
<div style="margin: 0 auto;">center</div>
</div>