Im trying to get a fixed width side bar with a responsive main div when using bootstrap 2.3.2.
Something like this image below
Ived tried to use a 200px fixed width div and then place a fluid div next to it, but couldnt get it to work. Any ideas ? ive made a js fiddle of the problem here - http://jsfiddle.net/KAfMB/1/
This is because your "fixed-span" class is being overridden by the bootstrap span classes.
You can solve this removing the word "span" from your class:
<div class="row-fluid">
<div class="fixed blue cols">...</div>
<div class="span8 red cols">...</div>
</div>
.fixed {
width:200px;
float: left;
}
Here's the fiddle:
http://jsfiddle.net/KAfMB/4/
Related
I need put a "carousel" div inside "oe_structure" but not work correctly, the "carousel" :
I'm editing the template "website_sale.products"
I am new to odoo, can I inherit in my direct code to edit the ? but I still don't know how to put the slider inside the div as shown in the image!
link of the code I use:
https://codeshare.io/2pBqez
My error with div carousel is:
<div class="container">
<div class="square"><div>
<div class="s-square">
</div>
.container {
width:80%;background:lightgray;height:500px;margin-left:10%;
display:flex;justify-content:center;align-items:center;
} /* this container is positioned using a left-margin */
.square {width:250px;height:250px;background:white;position:relative;} /*this square is positioned by the flexbox display of its parent container (.container) */
.s-square {height:100px;width:100px;background:blue;position:absolute;top:50px;left:60px;3px dashed purple;} /* this is absolute positioning and should be avoided as much as possible b/c not very responsive-friendly */
I want to make a div that will take the width of the full-screen. I can manage the div margin and width but I want it to be responsive (using bootstrap), it wont be if i manage the problem changing the width and margin using pixels. I have tried doing the method I have seen: body {margin: 0; padding: 0} but it doesn't work. Any tips are greatly appreciated, Thanks
Using bootstrap with full with? Do you mean container-fluid?
You can do the following
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
</div>
</div>
</div>
You can read more about bootstrap grid system here: Bootstrap Grid
eg:div {width: 100%};
div {width: calc(100% - 20px)}
css3 calc().
try it instead
I have a set up in wordpress using bootstrap what follows:
<div class="container">
<div class="row">
<div id="NEEDS TO BE FULL WIDTH>
</div>
</div>
</div>
I would like the background of the "NEEDS TO BE FULL WIDTH" div be full browser width but not sure how. If I make it more the 100% width it makes a horizontal scroll. Any ideas?
You can have multiple .container elements inside your html. If you change the .container into a container-fluid the content of the container will take up 100%
If you only want the background to be full width, but you want the content to be constrained by the .container (at most about 1140 pixels wide) then surround the .container with another <div> and put the background-image on that element.
I have a website setup using bootstrap and have the navbar done to my liking. Now I have to work on my container. I wanted something like this image here (http://awesomescreenshot.com/0d61zypfff). The main container overlaps the navbar a little bit. I have used these classes for my navbar and have laid out what I think would be the ideal layout of the code..
<div class="navbar navbar-inverse navbar-static-top" role="navigation"></div>
<div class="container"> //Please do not add any styling to the container
<div class="index"> //background: #ffffff;
This text overlaps the menubar
</div>
</div>
I have added extra padding-bottom to the navbar to make the navbar a little more "buff" and want my index section to overlap it.
Please let me know if I need to add more information.
To add onto #isherwood, you must also set the z-index: -1;. This will make it so that the index div will overlap the navbar.
A little negative margin should do it:
navbar {margin-bottom: -20px;}
Or:
.index {margin-top: -20px;}
I'm using Bootstrap 3 and I'm trying to make a scrollable content DIV.
I have a grid with a left side navigation and a top bar and in the
middle I have the content that should be scrollable.
It works when I use a fixed height on the content div...but I want
to use 100% instead.
<div class="col-lg-12 col-md-12 col-sm-12" style="height:100%;overflow-y:auto;">
some content...
</div>
CSS:
html,body
{
height:100%;
overflow:hidden;
}
How could I get this to work with height:100%;
Thanks!
You can add pre-scrollable class for the div you want to scroll.
If you search the .css there is a max-height but you cant edit. So you have sure it will maximize the page in the window for that max value.
Hope it helps, i used the same for a one-page with scrollable divs.