They put concrete on my dirt

Use input-group with Drupal Bootstrap

Bootstrap has some sweet components in its library. input-group is one of them. But, alas, those go on form elements and, well, Drupal has its own way of deal with forms... *sigh*. BUT WAIT, WHAT'S THAT THING BELOW?

How did I do that? Well I didn't edit the core of bootstrap or do some weird CSS hack, that's for sure! Turns out this ability is built right in to the Drupal Bootstrap project and interfaces via the Drupal Form API. All you need is a couple form attributes (like #input_group) and you're set. Check out the code below (this is the same code for the form element above):


Drupal 7 Form API: Use the Same Form for Both Creating and Editing

This is a fairly 'beginner' level tutorial. If you started learning to use the Drupal Form API recently and feel like you have a decent grip on its concepts so far, this might be for you. Sometimes we create forms to save certain information (types of content, not to be confused with Drupal Content Types), and likewise you also want the ability to edit those values after the fact. Here is an example form function of a relatively simple set of form elements that you might create.

That is your creation form. User enters their values, you would [of course] have a _submit function that saves the data entered into a database. Done. Well... turns out some people change their favorite flavors from time to time. We would also need a form that would allow the user to pull up their current values and edit them, then re-save. There are a few things you have to take into consideration... things that would be required to make such a thing happen. First, you would need the current values (feed the data into the form). Second, you would need the form to actually SHOW the current values. Third, you would need to differentiate between whether you were saving a NEW entry or UPDATING an old one. The solution is below.

Pay attention to the comments in that gist. Here we are performing all 3 steps:


Add a Full-Width Jumbotron to Drupal Bootstrap 3

In case what you're seeing on my site now doesn't look like that, I've included a screenshot. By default, the Drupal Bootstrap 3 theme cannot do this. To me, that seems odd because it's one of the more 'defining' visual features of a typical bootstrapped web page. Even the Twitter Bootstrap page itself does this currently. Now, if you so desired you could easily put in the content-width version of this out of the box. See below.

Hello, world!


Learn more

But even if you put in the recommended markup to achieve the full-width version, you are still stuck inside that block container (which is 'Top Bar', by the way... throw your jumbotron in that block region to get something like above!). The problem is that there is no block region outside of the main container (which is set to a static width). I have a solution! It isn't 'turn-key' (you can't set the background image via the GUI), but it works. Now you have 3 options... you can download my entire theme, you can download the files below and replace them in your theme, or you can scroll down a bit and see the code that I changed.


Home Construction

Bootstrap Bill?

I needed a good excuse to try out all of the different available components in the Bootstrap framework. The construction process on my new home is the perfect subject. I'll be referencing both the documentation for Drupal Bootstrap and the reference documents for Twitter Bootstrap itself. This page is going to start small and simple, then hopefully (eventually, over the course of the next 4 months) grow along with my knowledge of Bootstrap.