Hi guys, I want to know if it is possible to make 3 columns from one only col-md-4 column, I mean if i can adjust height or something else
Your question is ambiguous. Yes, you can make 3 columns from 1 column. Can't understand why you would even need to ask the question. Yes, you can adjust height. Again, I am at a loss as why you would even ask such a question.
I agree with @mmerlinn that the question is unclear and incomplete. As a guess, is this what you're looking for?[ <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <meta content= "width=device-width; height=device-height; initial-scale=1" name="viewport"> <title> Test document </title> <style type="text/css"> /*<![CDATA[*/ body { background-color: white; color: black; font: 100%/1.5 sans-serif; margin: 0 1.5em; padding: 0;} p { font-size: 1em;} h1, h2 { font-family: serif;} h2#resp::after { content: "\a0three columns";} p#example { -moz-columns: 3; -webkit-columns: 3; columns: 3; -moz-column-gap: 1.5em; -webkit-column-gap: 1.5em; column-gap: 1.5em; -moz-column-rule: thin solid black; -webkit-column-rule: thin solid black; column-rule: thin solid black;} @media (max-width: 35em) { h2#resp::after { content: "\a0two columns";} p#example { -moz-columns: 2; -webkit-columns: 2; columns: 2;}} @media (max-width: 30em) { h2#resp::after { content: "\a0one column";} p#example { -moz-columns: 1; -webkit-columns: 1; columns: 1;}} /*]]>*/ </style> </head> <body> <h1> Going from one column to one, two or three </h1> <h2> All in one column </h2> <p> Proin auctor lacinia nulla, eget auctor tortor semper id. Sed pellentesque metus suscipit felis suscipit vestibulum. Nulla vulputate, sapien sed imperdiet pulvinar, mi risus tempor metus; eu imperdiet lectus ex eget massa. Suspendisse sit amet semper ante. Quisque diam felis, egestas id egestas non, auctor id nulla. Donec vitae aliquam felis, et maximus nunc. Integer vestibulum nisl sem, nec aliquam diam faucibus sit amet. Aliquam a vulputate risus. Nulla non nisi a felis mattis dictum at ut sem. Maecenas dignissim pellentesque ante nec auctor! Duis ut dolor nec ipsum semper condimentum. </p> <h2 id="resp"> Now in </h2> <p id="example"> Proin auctor lacinia nulla, eget auctor tortor semper id. Sed pellentesque metus suscipit felis suscipit vestibulum. Nulla vulputate, sapien sed imperdiet pulvinar, mi risus tempor metus; eu imperdiet lectus ex eget massa. Suspendisse sit amet semper ante. Quisque diam felis, egestas id egestas non, auctor id nulla. Donec vitae aliquam felis, et maximus nunc. Integer vestibulum nisl sem, nec aliquam diam faucibus sit amet. Aliquam a vulputate risus. Nulla non nisi a felis mattis dictum at ut sem. Maecenas dignissim pellentesque ante nec auctor! Duis ut dolor nec ipsum semper condimentum. </p> </body> </html> Code (markup): cheers, gary
Something like this may work: http://jsfiddle.net/pgysLzr4/4/ I am not a big fan of bootstrap though...
Do keep in mind that continuing columns are not paricularly user friendly. If a column extends below the fold (where you have to scroll down), the user must scroll back up to continue reading at the beginning of the next column. Newspapers and magazines (print media) work very hard to avoid that happening in their pages. Their pages have fixed dimensions, which would be stupid in a web environment, yet still require a lot of work to make work correctly. Glad I could help. cheers, gary
That's the nature of the beast. You have to restrict content to what will fit the area available without scrolling. Or, you can limit the content and provide a link to another page for the balance. Multiple columns are especially bad for small screen devices. Your response should probably be to eliminate multi-columns for them. This is a display that is a print paradigm and doesn't really belong on a web page except in very limited use. Ask yourself if there is some compelling reason to have continuing columns and if there isn't some other way that isn't so user-unfriendly. If you're doing it for appearance's sake, you've screwed the pooch; that's the wrong reason. cheers, gary
Cuz the main problem is that I have a col-md-4 column, and I want to divide it in 3 columns, that's the big problem
Have you not posted a link to the page, or did I miss it? If that's from some so-called platform or grid system, I can tell you without looking the code is a pile of crap. Let us see what you have (especially the content) and perhaps I can suggest a more robust solution. cheers, gary
My site, which I'm having problems (I want that large column to split it into 3 columns without creating any column, I mean if there is a way to reduce it into 3 columns) : http://stuntrr.com/
You have been misleading us about the columns. We ASSuMEd that you meant 1 column of TEXT divided into 3 columns. Instead, you have blocks of approximately the same size containing an image and some text. One possible solution, though I don't know how to accomplish it with your content, is to put everything in a single row and let the browser determine how many columns to use, whether it be 1, 2, 3, or more columns. EDIT: One of your problems might related to the BOOTCRAP that you are using.
Ah, I see people have been doing my hobby for me... Ragging on bootcrap before I even got here. As I often say, go find a stick to scrape that off with before you track it all over the Internet's carpets! Pretty much the reason this was even ASKED is that you have been DUPED into thinking that Bootcrap is doing a damned thing for you that's worth doing. It has TRICKED you into creating content elements that to be frank have ZERO business on a website in the first place... The biggest offender being equal width equal height non dynamic content elements. It's print thinking and artsy fartsy methodology that forces you into inaccessible fixed size fonts, gibberish code, little if anything remotely resembling semantic markup... It's a laundry list of how not to build a website and a giant middle finger to usability and accessibility. ... and much of that blame falls right in the lap of bootcrap which has taught you flawed methodologies, obviously prevented you from learning to use HTML or CSS properly, and has resulted in a site that is a poster child for everything wrong with pretty much ALL HTML, CSS, and even JavaScript frameworks. This is evident from the scripttardery resulting in dozens of separate slow loading scripts on a page that isnt' doing a damned thing that warrants the presence of JavaScript... from the idiotic shiv/shim/polyfill rubbish to the bloated asshattery that is jQuery... It gets even worse digging into the markup with the static style in the markup, <style> tag in the body where it's completely invalid, endless pointless meta and redundant meta that ZERO legitimate user agents actually give a flying **** about. (of all of them you have there, the only ones that serve a legitimate purpose are twitter:site and og:image) ... and that's just the tip of the iceberg... endless pointless DIV for nothing, endless pointless presentational classes for nothing, little if anything resembling logical document structure or semantic markup, unless you count the pointless redundancies of the HTML 5 bloat which no existing user agents actually do a damned thing with, lists on single elements, no lists on obvious list items, broken incomplete forms, improper use of <hr> for non-semantic purposes, static style in the markup, strong on something that shouldn't be receiving "more emphasis"... Hardly a shock it has 105k of markup to deliver 1.6k of plaintext and MAYBE a dozen content elements -- likely ten times the code that should be in there. Likewise the ape-shit insane 5.2 megs of scripttardery spanning 36 files, 978k of style spanning 17 files -- all doing the job of MAYBE 32k in 3 files TOTAL (that's HTML+CSS+SCRIPTS).. though I suspect some of the reason I think it needs less scripting is there's zero graceful degradation scripting off/blocked, and even adblock plus is making a right mess of things. Pitch that entire mess in the bin, learn to use HTML and CSS properly, take some time to learn a bit about accessibility, and come back at it without the ignorant framework asshattery. There is nothing in that mess I'd even try to salvage.