Bootstrap

Made by nerds, for nerds, for everyone to quickly create websites packed with features!

Fluid video in an iframe this was a nightmare turned good – Making Embedded YouTube Videos Responsive

I know it is sometimes faster to just grab the code you need and get the job done, however, it is beneficial to me if I also understand what makes it work. In the video below presented by Code Cascade, he explains the how and why of the CSS. Code Cascade also has a good Youtube channel covering all aspects of coding for the web.

Thank goodness for One Extra Pixel, they have tons of many wonderful articles to help solve problems like how to correctly size an iframe for responsive design. You will have to play with the spanX, x being the span of that section in order to get a video to look and resize correctly.

<iframe class="container well well-small span8" >

If this does not help, try this article “CSS Fluid Video Iframes And Embeds Quick Fix” on Ideas and Pixels

Stackoverflow also has an article titled “What is the correct way to size an Iframe in Bootstrap”.

And just for good measure, here is one more from Avex: Responsive Youtube Embed

That should do it!

Big Bad List

Each time I realized Bootstrap was missing elements, or I needed further explanation, I had to spend a lot of time searching; I came across the Big Bad List of Bootsrap resources of over 319 useful code snippets.

A simple lightbox plugin based on the bootstrap modal plugin

Jason realized that the Twitter Bootstrap library did not have a component, so he created one based off the modal component. Download the Bootstrap Lightbox modal plugin.

Oh No, out of the box Bootstrap’s menus stick open!

Yep, they stick down and never go back up. What to do you ask? Dropdown on Hover Plugin by Cameron Spear — Twitter Bootstrap dropdowns do not activate on hover. As a matter of fact they stick down and stay open. At first I thought it was funny, then realized I had to fix it. Cameron’s solution is the only one that really worked, and does not affect(mess-up) mobile. View example »

All of the code you need is on his page. Just in case the page gets lost, here is the link for the .js file for download.

The original article is here.

More Resources to Help with Bootstrap

Download Bootstrap here.

Bootstrap provides all the tools you need to help you get started.

Books and Links

What is it?

Bootstrap is a free collection of development tools for creating websites and web applications that are consistent in code, structure, look and feel. Bootstrap contains HTML and CSS-based design templates for typography, forms, buttons, charts, navigation and many other interface components, as well as JavaScript extensions.

History of Bootstrap

Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter as a framework to have consistency across internal tools. Before they made Bootstrap, developers used various libraries for interface development, that led to inconsistencies and a high maintenance burden to manage. Bootstrap was developed so all would develop using standards included within the framework of Bootstrap to maintain consistency across all tools. Read about the history of Bootstrap on thenextweb

What do you get?
  • Ready to go out of the box
  • CSS is already coded
  • JavaScript Components — that work together
  • Re-usable components
  • Out of the box framework
  • It’s FREE
  • Get Bootstrap
  • HTML5 Rocks
  • Bootstrap Snippets
  • Visit jQuery

It’s a lot of fun

Download Bootstrap