Your answer is right in the docs: Body padding required The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high. body { padding-top: 70px; } Make sure to include … Read more
2021 Update… Bootstrap 5 (beta) For aligning within a flexbox div or row… ml-auto is now ms-auto mr-auto is now me-auto For text align or floats.. text-left is now text-start text-right is now text-end float-left is now float-start float-right is now float-end Bootstrap 4+ pull-right is now float-right text-right is the same as 3.x, and … Read more
You’d normally use .row to wrap two columns, not .col-md-12 – that’s a column encasing another column. Afterall, .row doesn’t have the extra margins and padding that a col-md-12 would bring and also discounts the space that a column would introduce with negative left & right margins. <div class=”container”> <div class=”row”> <h2>OntoExplorer<span style=”color:#b92429″>.</span></h2> <div class=”col-md-4 … Read more
Here is my solution to the problem, a bit late perhaps. But it could maybe help others: // Javascript to enable link to tab var hash = location.hash.replace(/^#/, ”); // ^ means starting, meaning only match the first hash if (hash) { $(‘.nav-tabs a[href=”#”https://stackoverflow.com/questions/7862233/+ hash +””]’).tab(‘show’); } // Change hash for page-reload $(‘.nav-tabs a’).on(‘shown.bs.tab’, function … Read more
Bootstrap 3 Here are the selectors used in BS3, if you want to stay consistent: @media(max-width:767px){} @media(min-width:768px){} @media(min-width:992px){} @media(min-width:1200px){} Note: FYI, this may be useful for debugging: <span class=”visible-xs”>SIZE XS</span> <span class=”visible-sm”>SIZE SM</span> <span class=”visible-md”>SIZE MD</span> <span class=”visible-lg”>SIZE LG</span> Bootstrap 4 Here are the selectors used in BS4. There is no “lowest” setting in BS4 … Read more
Why is everyone trying to do it the hard way? Sure, some of these approaches will work, but they’re more complicated than is necessary. OK, first – you need an image that will fit within your navbar. You can adjust your image via css height attribute (allowing width to scale) or you can just use … Read more
The Flexible box way Vertical alignment is now very simple by the use of Flexible box layout. Nowadays, this method is supported in a wide range of web browsers except Internet Explorer 8 & 9. Therefore we’d need to use some hacks/polyfills or different approaches for IE8/9. In the following I’ll show you how to … Read more
Ok, I’ve got it to work. change <div id=”myModal” class=”modal hide fade” tabindex=”-1″ role=”dialog” aria-labelledby=”myModalLabel” aria-hidden=”true”> <div class=”modal-header”> <button type=”button” class=”close” data-dismiss=”modal” aria-hidden=”true”>×</button> <h3 id=”myModalLabel”>Panel</h3> </div> <div class=”modal-body” style=”max-height: 800px”> to <div id=”myModal” class=”modal hide fade” role=”dialog” aria-labelledby=”myModalLabel” aria-hidden=”true”> <div class=”modal-header”> <button type=”button” class=”close” data-dismiss=”modal” aria-hidden=”true”>×</button> <h3 id=”myModalLabel”>Panel</h3> </div> <div class=”modal-body” style=”max-height: 800px”> (remove tabindex=”-1″ … Read more
For Bootstrap 4 Bootstrap 4 now uses flexbox by default, so you get access to its magical powers straight out of the box. Check out the auto layout columns that dynamically adjust width depending on how many columns are nested. Here’s an example: <div class=”row”> <div class=”col”> 1 of 5 </div> <div class=”col”> 2 of … Read more
When you decide between fixed width and fluid width you need to think in terms of your ENTIRE page. Generally, you want to pick one or the other, but not both. The examples you listed in your question are, in-fact, in the same fixed-width page. In other words, the Scaffolding page is using a fixed-width … Read more