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
}
Related
What i have is sidebar and on right side i have content. What i want is that both sides are in container but that are both full width . This is my demo: https://jsfiddle.net/DTcHh/19067/
So i want that left background color start from beging of page but text inside is in container and also i want that background color of right content go to the end of page but text is in container. Any suggestion?
<div class="container">
<div class="col-md-3">
<div class="left_sidebar">
menu
</div>
</div>
<div class="col-md-9">
<div class="right-content">
content
</div>
</div>
</div>
Its simple, wrap the colored containers above the container class and use two different containers:
<div class="left_sidebar">
<div class="container">
<div class="col-md-3">
menu
</div>
</div>
</div>
<div class="right-content">
<div class="container">
<div class="col-md-9">
content
</div>
</div>
</div>
Here is a working Fiddle
REMOVED other edits because EDIT 3 should do the trick best
EDIT 3
Here it is, that must be it for sure now. The trick is done with a linear gradientand a custom container above your bootstrap container.
See Fiddle
What you're asking, is by default impossible, since the .container class has a set width on different viewports and it is also horizontally "centerised" by margin:auto.
To achieve what you are trying you will have to follow a different "logic".
I would propose something like this:
<div class="left-sidebar col-md-3">
<div class="sidebar-menu col-xs-6 pull-right">
menu
</div>
</div>
<div class="right-content col-md-9>
<div class="content-text col-xs-10>
content
</div>
</div>
I propse this solution in order to stay in the same "flow" as your code. You could also, just play with paddings, which makes more sense.
use class row before col div
<div class="row">
<div class="col-md6"></div>
<div class="col-md-6"><div>
</div>
I have a page which breaks down as follows:
<div class="container-fluid" style="min-width:768px">
<div id="main-sidebar"></div>
<div id="main-frame"></div>
<div id="supplementary-sidebar"></div>
<div id="content-container"></div>
<!-- ALL THE INTERESTING CODE GOES HERE -->
<div id="content" class="row"></div>
</div>
</div>
<footer></footer>
</div>
The widths of all the elements in container fill the screen width.
The main-sidebar's width is set to auto.
The main-frame is set to min-width of 72.65%.
The supplementary-sidebar is at 20% of the parent main-frame.
The content-container is at 80% of the parent main-frame.
Basically I want the main-sidebar to be as big as it need to be,
and then have the main-frame fill up the rest of the parent page.
I succeeded at this by accident and have pinpointed the Twitter Bootstrap class that gets the job done. The screen will not fill if I remove it. This is:
<div class="btn-group-justified" style=""></div>
I have tried many different lines of code (included below), which were attempts at doing this consciously. But at this point I can't really go much further.
Does anybody know why this forces the main-frame to fill up the screen?
Here are my attempts:
<!---
NOTHING HERE WORKS
<div style="width:100%"> </div>
<div style="display:table;width: 100%;table-layout: fixed;border-collapse:seperate;display: block;"></div>
<div style="display:table;width: 100%;table-layout: fixed;border-collapse:seperate;display: block;"> </div>
<div id="spreader" class="row" style="">
<div class="col-sm-12">
</div>
</div>
<div id="spreader"></div>
#spreader{
display:table;
width: 100%;
table-layout: fixed;
border-collapse:seperate;
display: block;
}
-->
<!--- THIS IS HOW I ORGINALLY GOT IT TO WORK
<div class="row" style="">
<div class="col-sm-12">
<div class="btn-group btn-group-justified" style="">
</div>
</div>
</div>
-->
Here is the the screenshot showing the relevant bootstrap code. For some reason, this still works when I take border-collapse out. But if I include just this in a class like I did with #spreader above (and even if I include border-collapse) it will still not work.
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?
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>
I have my page structured into 3 different modules: navigation on the left, images in the center, and social sidebar right. Below is the css that formats this content. I'm having trouble when I resize the window; the images in the center overlap with the navigation on the left and the sidebar gets pushed to the bottom of the page and overlaps with the end of the left navigation. The navigation module/sidebar is fixed.
I'm using twitter bootstrap as a base.
Any ideas on what's causing this and how to fix this?
css
div.sidebar{
width: 120px;
position:fixed;
top:12%;
left:2%;
overflow-y:auto;
height:100%;
}
html
<div class ="container-fluid">
<div class = "row-fluid">
<!-- left navigation div -->
<div class = "span1" style = "width:120px;">
<div class = "sidebar" >
#navigation
</div>
</div>
<!-- middle images div -->
<div class = "span8" style = "width: 900px;">
#lot of images
</div>
<!-- social sidebar -->
<div class = "span2" style = "margin-left: 10px; ">
#social module with images
</div>
</div>
</div>
when I make the window smaller
normal
Have you thought about responsive web design?
You say your using twitter bootstrap? Have a look at this:
http://twitter.github.com/bootstrap/scaffolding.html#responsive
Add this to the head
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
Change the HTML:
<div class="container-fluid">
<div class="row-fluid">
<!-- left navigation div -->
<div class="span4">
<div class = "sidebar" >
#navigation
</div>
</div>
<!-- middle images div -->
<div class="span6">
#lot of images
</div>
<!-- social sidebar -->
<div class="span4">
#social module with images
</div>
</div>
NOT TESTED. Im also not 100% how big the fluid container is, i think its 12, if its 16 you will have to change the spans so they add up to 16
Couple issues I see...
You are completely defeating the purpose of ".row-fluid" and the framework by adding widths?? Remove all width assignments to the grid elements (ie. .container, .row, .span(x)) and let the framework do what it was designed to do...create the width for you. If you need to adjust width from what is being generated, add it to block level element INSIDE of the .span(x).
Your span HAVE to add up to NO MORE than 12. You have 14 which will absolutely make the last wrap around.
Overriding the spans with inline widths will cause odd behavior. Can you use the default TBS scaffolding instead?
Suggestions :
1.Remove all the extra things you put for style let bootstrap do the things !!
2.always test your div with "well"
Put your codes like this
<div class="container">
<div class="row" style="margin-top:20px;">
<div class="col-lg-3 col-sm-12 ">
<div class="well"></div>
</div>
<div class="col-lg-3 col-sm-12 ">
<div class="well"></div>
</div>
<div class="col-lg-3 col-sm-12 ">
<div class="well"></div>
</div>
<div class="col-lg-3 col-sm-12 ">
<div class="well"></div>
</div>
</div>
col-lg-* for large device
col-xs-* for extra small device
col-sm-* for small device
use it like this you can achieve what you want
Plunker demo
resize your browser to view the effect