While using Twitter Bootstrap, should I nest a row div within a container div and put all my span divs within the nested row? Is that the best practice?
What if I put span divs directly within my row div and do not enclose the row div within a container div?
What if I put span divs directly within my container div, without using the row div at all?
All I know is that a container is 940px and a row is 960px. However, I have seen examples where a row div has been put within a container div. Is that going to help or will it make the display messy?
Please explain me the best methods to follow and under what circumstances.
In general you would use container > row > span
I can't think of an example where the the other 2 options you ask about would break anything, but they may not give you the results you want.
Wrapping everything in the conatiner div will manage the width of the page and side padding. Using the row div will ensure that your spans are layed out the way you want. For example imagine 2 rows that each have just have a single span4. If you don't use the row div the 2 span4s will float one next to the other instead of being stacked vertically.
There are many cases where you will have nested containers in a Bootstrap layout, the first one you will likely come across is in the nav bar, and once you start using fluid Bootstrap layouts you will see that container divs are not always 940px, but if you stick to the container > row > span arrangement it will save you some grief, especially if you are just starting.
Good luck!
You should have row inside a container, since using the container will ensure that the container is evenly centered across the entire page with even margins since container has margin-left:auto;margin-right:auto; in the CSS.
Use row when you want spanX's to appear on the same line.
spanX's that are not inside row will wrap.
Here's a demo that will show you the differences
A row is designed to go inside of a container.
A span is designed to go inside of a row.
Rendering could get unpredictable if you go with any other combination besides container > row > span .
Ultimately if your code works, then you're doing okay. There is no reason to get locked into what other people have done. BUT if you change it up, make sure it's for a good reason, and that you comment the code everywhere to explain your thought process.
Related
I'm trying to make a list of thumbnails of variable amount be centered while the thumbnails all fit on one line, but then subsequent lines be left-aligned, while the parent element responsively stays centered in the page. width:fit-content works well for one line, but when there are multiple lines it goes to 100% width (in mac chrome anyway). Illustration of the problem:
http://codepen.io/scotthorn/pen/eutAH?editors=110
If there is another way to achieve my desired goal, I wouldn't mind changing any part of the css or html markup. A background that fits the area isn't necessary, it's only in my example to better show what's going on. My primary goal is to have a list that behaves like a centered container of inline-block elements for one-line, but then when a second line has to be created, the first element in it lines up below the first element of the first row rather than being centered by itself.
Hopefully that makes sense, if not I can make a mockup.
I would imagine wrapping the whole thing in a div and centering that with a % width would do what you want. But a mock up would help me understand.
Or you may be able to use margins to squish the inside content.
Your example works well, except you probably want to add a max-width to your UL..
For example, if you wanted to have a max of 7 items per line in your case, you would
add:
ul { max-width:630px}
updated codepen
good luck =)
I hope you will understand me. There is a wrapper with width of 360px, it allows only 3 columns of divs. I just want to be able to drop in another div anytime I want and then all previous will be moved along. I have a problem, it seems like divs go to next row but they align verticaly to the tallest one from previous row. Please have a look at the example below (I had to use a picture as the code wasn't showing right). The last green one should be touching the tall red one from above. I am not looking for static positioning it has to be automatic so when I change wrappers width to larger more divs will automatically be included in the rows.
Below is the image of a wrong result.
Masonry script is the closest as I can get to what I need, shame it is JS...
I am attempting to implement the following layout without using javascript and without using tables:
There are a LOT of rows on a page. Each row is filled by four content elements, the tallest of which determines the height of the row. Each content element has two other elements, in this case, an image and a caption. The image is aligned to the top of the row while the caption is aligned to the bottom.
In the HTML structure, the image and caption must stay together in the content element.
Some solutions I've tried:
Splitting each row into two: a row of images and a row of captions, separates the images from the captions.
Using the famous equal height column div structure results in an ugly absolutely-positioned Matryoshka Doll arrangement of divs.
The issue with tables is that the page will be made MUCH more dynamic in the future (rearrangable content, fluid layout, dynamic searching, content of varying width), and tables will be extremely annoying to do this with.
If I'm imagining your markup correctly, perhaps this will work for you:
http://jsfiddle.net/Puppies4Life/Fd94X/1/
I absolutely positioned the .caption to the bottom of .row. I made it a point to position .caption to .row instead of the immediate parent .content because of the varying heights of .content. The image remains in the flow of the document. I Added some additional padding to the bottom of .row to account for the text and put in a simple clear fix (I suggest using a better option in your production code)
Hope this helps solve your problem or possibly ignites an idea or two!
This is what I have:
and this is what I want:
I have a container div around all of the smaller divs, and the smaller divs are floated left. How can I get them to align in perfect rows like the bottom image? This would be easy but the catch is I don't want to use a container div for each row since I want the number of images per row to be fluid (container width is variable). Is this even possible without JS hacks?
You could just change the float:left to display:inline-block. That will lay the images out in rows, just like text layout, which sounds like what you want to do.
I post this with some apprehension because I don't know what you qualify as a Javascript hack... There is a plug-in that would work well for this, Masonry JS. But if you consider a plug-in a hack then I would suggest applying a display:inline-block; to the elements that you want in a line and removing the float:left; property.
I'm building a HTML template for my site and would like to have a main content pane on the left and a navigation pane on the right (similar to Twitter).
I'm assuming DIVs are not the preferred approach since they are by defaulted listed top-to-bottom. I've played around with float:left and float:right but those cause the parent div to not expand appropriately vertically.
I've seen references to using tables (seems like a step backwards) and SPANs (which I haven't been able to use to produce the right effect).
What is the best practice for accomplishing side-by-side panes in HTML?
Any advice or examples would be greatly appreciated.
I'm assuming DIVs are not the preferred approach since they are by defaulted listed top-to-bottom.
Why would you assume that when the example you gave, Twitter, uses them?
The parent div can be made to expand to the height of the larger of the two columns by putting a div below the two columns within the container div with clear: both as its CSS.
DIVs with float is probably your best bet. What is your problem with the height? Have you tried doing height: auto for the div?