I am using the new Foundation XY-grid on a new project. The site has a max-width of 1000px for the grid-container.
All is well.
But, i now need to make a new component for the site using the Accordion component from Foundation. No problem there either.
The problem, starts when, the background, of the open accordion element, needs to be, another bg-color, than that of the parent element (edge-to-edge).
This would not be a problem, if it was not for the fact, that i needs to fill the entire width of the page - the background color that is.
The content itself, still has a max-width of 1000px.
This is the standard markup:
<div class="grid-container">
<div class="grid-x grid-margin-x">
<div class="large-12 cell">
<ul class="accordion" data-accordion data-allow-all-closed="true">
<li class="accordion-item" data-accordion-item>
Accordion header
<div class="accordion-content" data-tab-content id="deeplink1">
Accordion content
</div>
</li>
</ul>
</div>
</div>
</div>
The above works as expected, and has the same bg color as the <body> - all is good.
But, there is a variation, of the above, where the background color, differs from the <body> bg-color.
To do this, i simply wrap the grid-container, in a callout, like so
<div class="secondary callout">
<div class="grid-container">
<div class="grid-x grid-margin-x">
<!-- accordion markup -->
</div>
</div>
</div>
This also works as expected.
The problems starts, when i open an accordion item.
The background-color, of the accordion item, needs to have the background-color from the <body> (or at least, not the same as the one from 'secondary callout').
But, how do I achieve this, in the best possible way?
Example: https://codepen.io/anon/pen/WXEMyp
Wanted output:
Related
I am trying to do a website with a loading animation. This loading animation shows well above all other divs in Chrome, but not in Firefox.
I have a menu bar, a main div, and a footer.
In the main div, I have a "main box" (will rotate in 3D) and a loading div.
The loading div hosts the animation for loading.
Html is kind of the following:
<div id="site">
<div id="menuDiv" class="mainSection"> Menu bar</div>
<div id="mainDiv" class="mainSection">
<div id="mainBox">
<div class="mainBoxSide front">
</div>
<div class="mainBoxSide right">
</div>
<div class="mainBoxSide back">
</div>
<div class="mainBoxSide left">
</div>
</div>
<div id="loadingDiv">
<div id="loadingBox">
<div class="loadingBoxSide loading-front"></div>
<div class="loadingBoxSide loading-right"></div>
<div class="loadingBoxSide loading-back"></div>
<div class="loadingBoxSide loading-left"></div>
</div>
</div>
</div>
</div>
<div id="footer" class="mainSection">Footer</div>
I want mainDiv to be on top of the footer, and loadingDiv on top of mainBox.
So in term of z-index : footer < mainBox < loadingDiv.
I created a codepen which isolates the problem: https://codepen.io/3MO/pen/vmOMEG
When opened in Chrome, everything works fine.
When opened in Firefox, the animation is flickering: it goes on top and on background of the mainBox element all the time, and I don't know why.
There is worse: if I provide a background color to the loading div, everything works fine: I created another codepen, the exact fork and defined a background color for loadingDiv: https://codepen.io/3MO/pen/XRbQjQ
Can someone know why it behaves like this? I need to work with a transparent div, so without any background color.
Thanks!
Try adding transform: translate3d(0,0,1px); to the div #loadingDiv.
There is a lot of tutorial about bootstrap elements.
But I want to know where I must use nav/header/container/row/well/panel/section
for example..Do it needs use row for column 12?
1- currently I do it this way:
<body>
<div class="container-fluid"> /*only for top navbar*/
<nav>
</div>
<div class="container"> /* for body */
<header></header>
<main class="row">
<div class="col-md-2"></div>
<div class="col-md-5"></div>
<div class="col-md-5"></div>
</main>
<footer class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</footer>
</div>
</body>
Is it true?
2- Is this format true or necessary?
<div class="row">
<div class="col-md-12"></div>
</div>
3- which one is standard?
<div class ="well">
<div class="row"> <div class="col-md-*"></div> </div>
</div>
or
<div class ="row">
<div class="well"> <div class="col-md-*"></div> </div>
</div>
4- dose it need use "container" class for all section or only for parent section?
for 1:- yes it's a correct method. whenever you want to use bootstrap column classes like col-xs-12 in their first parent you must put class " row ".
for 2:- this is true. method also accessory.
for 3:- first option is correct.
for 4:- depends of need of page design. if all site are in same container with then you can put it in parent class.
All options you mentioned are correct.
However, below written structure makes sense. That means if you are using col in container or container-fluid it should be in row.
<div class="container">
<div class="row">
<div class="col-*-*">
</div>
</div>
</div>
If anytime you want to check how well your bootstrap is written, you can check it on http://www.bootlint.com/
But I want to know where I must use nav/header/section/footer
Well all these fields are only for semantic purpose, actually they all could be div. In the future or even now it is best practise for SEO to use nav for navigation, footer for the footer etc. For example header should be used to introduce content, it often contains <h1> - <h6> tags.
There are many informations to this in the web, here is a reference
All the other bootstrap classes are just styles which you could apply by yourself. A container for example can be used once for all of your content if you never need a full width element, but sometimes you have a situation where you need a full width element (f.e. an image) then you dont want to wrap all of your content into container.
Here you want to use multiple containers and not one for everything (Fiddle)
Hope this helps you a bit.
I'm trying to set up a two-column layout - The left column is a list of items and the 2nd column is the details about an item in the first column (click on the item and the data renders, but that's not important right now).
I'm getting stuck setting up the layout - I can get the columns going, but when I add the list into the first column, it's rendering below it. And I'm not sure why.
Can someone point me in the right direction?
<body>
<div id="content">
<div class="row">
<div id="sidebar" class="col-md-4">
<div class="list-group">
<a class="list-group-item">Item Here</a>
<a class="list-group-item">Item Here</a>
</div>
</div>
<div id="main" class="col-md-8">
Other Stuff Here
</div>
</div>
</div>
</body>
I've tried removing the parent div (id="sidebar") and making that ID/width part of the list-group div, but then id="main" renders above the list.
So, I'm confused. What am I missing?
if you use col-md, your div have 100% width when your browser width is below < 768px, it's a behavior on mobile first css grid, so change col-md by col-xs for have your result for any device size
I am looking into a future project and I want to build it with bootstrap. I want it to be a boxed ( non-fluid ) layout limited to 1170px ... [actually on a side note I'm currently working with bootstrap V2 because I haven't looked properly at V3 yet but eventually I will work out the same or similar thing out in V3].
So what I need is to have full width panels ( these are quite popular lately in "flat design") with constrained content. That is ... all the content would be limited to a max width of 1170px but the backgrounds would be spanning the full width of the browser.
So I know this markup works but a) is it OK to have nested "container" divs like i've done and b) I haven't seen this technique before ... is there any better way (more standard way) that I might be missing ... and I appreciate that it may be better to start with version 3 but I would rather work this out in V2 first for my old projects if for nothing else
<div class="container-fluid" >
<div class="container" >
<div class="row">
<div class="span12"><h2>Boxed" Bar ( limited to 1170px)</h2></div>
</div>
</div>
<div class="row" style="background:#666">
<div class="span12"><h2>Full Width Bar with no limits to content</h2></div>
</div>
<div class="row" style="background:yellow">
<div class="container" >
<div class="row">
<div class="span12"><h2>Full Width Bar with content limited to 1170px</h2></div>
</div>
</div>
</div>
</div>
I found a premium bootstrap marketplace and analyzed some of the themes on there. It looks like something along these lines is a better model.
<div class="my-own-wrapper" > <!-- eg 100% width to wrap entire site -->
<div class="container" >
<div class="row">
<div class="span12"><h2>Boxed" Bar ( limited to 1170px)</h2></div>
</div>
</div>
<div class="whatever" style="background:#666"> <!-- non bootrap div 100% width -->
<div><h2>Full Width Bar with no limits to content</h2></div>
</div>
<div class="whatever" style="background:yellow">
<div class="container" > <!-- wrapping bootstrap scaffolding in display div -->
<div class="row">
<div class="span12"><h2>Full Width Bar with content limited to 1170px</h2></div>
</div>
</div>
</div>
</div>
Obviously it might be better to use some html5 elements too.
i just started using bootstrap, and i think it's awesome. but i'm having a hard time figuring out how to add a wrapper around the basic container of bootstrap.
I'm using the Fluid responsive css, and it centers the elements inside the .container nicely.
but my WHOLE page as a whole has a BACKGROUND, and i wanted a different background for the actual content area (where the container is)
So basically i have for example
<div id="wrapper-page" style="background-color:grey; ";>
<div id="wrapper-content" style="background-color:#93C;>
<div class="container">Header Contents here </div>
<div class="container">Body Contents here </div>
<div class="container">Footer Contents here </div>
</div>
</div>
</div>
Is there a simple way to achieve what i need?
I actually could easily modify the bootstrap.css file to kind of achieve what i want but i really want to keep my modifications outside of the template/framework for easy upgrade later
Why don't you make the wrapper-content also a Bootstrap .container?
<div id="wrapper-page" style="background-color:grey; " ;="">
<div id="wrapper-content" class="container" style="background-color:#93C;">
<div class="container">Header Contents here </div>
<div class="container">Body Contents here </div>
<div class="container">Footer Contents here </div>
</div>
</div>
Demo