<p dir="auto">I am not an advanced user of CSS so forgive me if this issue is due to my misunderstanding.</p>
<p dir="auto">I am using the latest (v2.0.3) bootstrap Hero example to show this issue. When I create a single_long_word of text greater than about 1/2 the column size (due to a large font or simply a large number of characters in a single word), the text extends past the column before the layout adjusts as I make the browser window smaller</p>
<p dir="auto">All I had to do was change the text in the column to make a large or long word and then reduce the window size of the browser. The column layouts do eventually adjust to allow for more width, but not before the long word exceeds the boundary of the column it is in.</p>
<p dir="auto">This happens for both normal and fluid containers in with a responsive grid.</p>
<p dir="auto">It is easy to duplicate in Chrome by just going to this page and editing the text after inspecting a column element.</p>
<p dir="auto"><a href="http://twitter.github.com/bootstrap/examples/hero.html">http://twitter.github.com/bootstrap/examples/hero.html</a></p>
<p dir="auto">I have also posted the issue to <a href="http://stackoverflow.com/questions/10778699/bootstrap-grid-not-adjusting-before-text-flows-outside-of-container" rel="nofollow">http://stackoverflow.com/questions/10778699/bootstrap-grid-not-adjusting-before-text-flows-outside-of-container</a> but have not yet received any suggestions.</p>
<p dir="auto"><em>I'm mostly interested in only the <a class="team-mention js-team-mention notranslate" data-error-text="Failed to load team members" data-id="482721" data-permission-text="Team members are private" data-url="/orgs/twbs/teams/team/members" data-hovercard-type="team" data-hovercard-url="/orgs/twbs/teams/team/hovercard" href="https://github.com/orgs/twbs/teams/team">@twbs/team</a>'s feedback, so this is locked to just us for now.</em></p>
<p dir="auto">Do we need to add a FAQs section to the docs? Most of the time, I think duplicate issues stem from bugs that don't last very long. However, I have noticed a decent amount of how-to type things. Some FAQ-like docs might help a lot of folks out. The idea isn't to reproduce what's in the docs, but to build on them.</p>
<p dir="auto">A few ideas popped into my head (some better than others):</p>
<ul dir="auto">
<li>How do you change the <code class="notranslate">font-size</code>?</li>
<li>How do you override something?</li>
<li>How do you change or remove the grid gutters?</li>
<li>Why don't you use Stylus? Or the Sass syntax and HAML?</li>
<li>What are the <code class="notranslate">.map</code> files?</li>
<li>What are the typeahead options?</li>
<li>How do I add submenus to dropdowns?</li>
<li>How can I enable JavaScript form validation?</li>
<li>Other icon font options?</li>
</ul>
<p dir="auto">Things that shouldn't be FAQs and should be clearly stated in the docs (perhaps?):</p>
<ul dir="auto">
<li>How do you enable the theme?</li>
<li>What's <code class="notranslate">box-sizing: border-box;</code> and why do you use it? <em>Kind of already addressed</em></li>
<li>Adding another grid tier</li>
<li>What's mobile-first?</li>
</ul>
<p dir="auto">Maybe that distinction isn't clear, but I'm curious if folks think it's helpful to have a separate thing or just implement this stuff into the docs where appropriate.</p>