How to turn a bootstrap 3 col-lg-x into a "fixed height size" column with vertical scrolling bar? I did many research and tried several CSS codes but no way.
Update: I have this code, but it's scrolling horizontally:
.scrollablepage > :last-child
{
height:552px;
overflow-y:scroll;
}
Html:
<div class="container">
<div class="row">
<div class="col-lg-8 scrollablepage">
<div class="well well-sm">
<p>
hellohellohel lohellohellohellohell ohellohellohellohellohelloh ellohellohellohe
llohellohel lohelellohellohellohell ohellohellohel lohellohellohellohell
ohellohellohellohelloh ellohellohellohellohellohellohellohellohel
</p>
</div>
</div>
</div>
Why it's scrolling horizontally and not vertically?
Related
If you make the screen smaller (in width) the divs on the bottom (under 'My work') stack up on each other. I was wondering how to fix this?
See jsfiddle: https://jsfiddle.net/sxnmyjtk/
html:
<div class="tiles">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="servatius">
<p>Servatius</p>
</div>
</div>
<div class="col-md-3">
<div class="levy">
<p>Levy Consult</p>
</div>
</div>
<div class="col-md-3">
<div class="skinprove">
<p>Skinprove</p>
</div>
</div>
<div class="col-md-3">
<div class="mumc">
<p>MUMC+</p>
</div>
</div>
</div>
</div>
</div>
see jsfiddle for css
They are stacking on top of each other because you are using position absolute in your CSS. If you remove this they will then stack vertically when the width is reduced.
If you want the divs to remain side by side you can also consider using col-xs-3 instead of col-md-3.
You can add other bootstrap classes or CSS depending on what results you are tying to achieve when width is reduced.
I'm having an issue with my bootstrap website. I have my site setup like so:
<div class="container">
<div class="row">
<div class="col-md-9" style="text-align:left;padding-top: 2%">
Some content
</div>
<div class="col-md-3" style="position:fixed">
Scrolling Sidebar
</div>
</div>
</div>
I have been trying to wrap my head around why the side bar is floated all the way to the left and is a col-3 but with a larger container so it's much larger on my screen. Has anyone seen something like this before?
The reason why there is overlapping conent is that when you make something position:fixed - it takes it out of the page flow and the remaining contents take its place. You need to explicitly set the width when it is fixed. In the following i am using a class "is-fixed" to set the fixe position styling.
<div class="container">
<div class="row">
<div class="col-md-9" style="text-align:left;padding-top: 2%">
Some content
</div>
<div class="col-md-3 is-fixed">
Scrolling Sidebar
</div>
</div>
</div>
//css style for element that is fixed
.is-fixed {
position:fixed;
top:0;
right:0;
width:200px; // or whatever
}
For mobile I'd like the div NAV to be moved to the very top.
Desktop:
CONTENT | TEASER
................. | NAV
Mobile:
NAV
CONTENT
TEASER
I've already reversed the layout, i.e. I set it up the way it is supposed to be for mobile (below 992px) and use the push/pull classes to push the NAV div to the bottom right for desktop viewports. Unfortunately so far it doesn't quite work yet.
Any help would be greatly appreciated.
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8"> NAVI </div>
<div class="col-md-8 col-md-pull-4 left" style="padding-bottom: 200px"> CONTENT </div>
<div class="col-md-4 col-md-push-8"> TEASER </div>
</div>
http://jsfiddle.net/aws9pv88/1/
I found the solution. Basically the HTML Markup is already correct.
All we need to do is position the Nav Layer absolute, give it a left and a margin-left, as well as defin a width, and give the Teaser div a margin-bottom.
See here: http://jsfiddle.net/aws9pv88/9/
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8 nav"> NAVI </div>
<div class="col-md-8 col-md-pull-4" style="padding-bottom: 200px"> CONTENT </div>
<div class="col-md-4 col-md-push-8 teaser"> TEASER </div>
<div style="clear:left"></div>
</div>
This is a solution made up of bootsrap + absolute positioning.
If however somone find a bootstrap only solution, feel free to post it here.
I have been looking over other questions posted on SO and tried the CSS however I cannot seem to align the "box" HxV within the container.
What is the best way to get it to display HxV responsive?
HTML:
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 center-block">
box
</div>
</div>
</div>
Create an class like .centred-col and write an rule like
.centred-col{ float: none; margin:auto;}add this after ur .col classes.
Using .container centers and auto margins your grid to begin with, there should be no need for offsets:
<div class="container">
<div class="row">
<div class="col-xs-12">
box
</div>
</div>
</div>
Note: .col-xs-12 will set your column to the full width after container margins from the XS size to the LG size.
Documentation: Bootstrap CSS Documentation under "Containers".
I have the following div:
<div style="background:red;width:100%;height:100%">Red</div>
When I stick it into the page without a container div, I can see it. But when I stick it into a container
<div class="container">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
I can't see that div at all. When I stick it into an additional:
<div class="row">
<div class="span3">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
</div>
I can see it, but there is a lot of padding and tons of spacing all around. How can I create a container div that doesnt have any margins/padding etc. that is equal to 0?
In fact, if you are using Bootstrap grid system, some margins and padding are added to maintain spacing between columns and page boundaries. So direct answer to your question is: no, you can't.
However, you can simply have a div that is not wrapped in div with .container class - then your div will not have any margins and paddings derived from grid system.
<div class="container">
<div class="row">
<div class="col-md-8">8-units column</div>
</div>
</div>
<div style="width: 100%; background: red;">Your div to be expanded to full page's width</div>
<div class="container">
<div class="row">
Another div within grid system
</div>
</div>