Understand the difference between the default grid and the fluid grid, To understand your problem you will have to study the grid and The image below show your problem / question (i think): In the fixed example it will overlay the grey border of the container. In the fluid example the searchbox will appear as if it's going off the screen. This occurs whether I use the fluid layout or not. It should appear alongside the column spanning 4 columns. This is stock bootstrap with all options checked at the customisation stage meaning that all of the responsive options are included. There is lots of inline css but this is just for testing purposes. My question is, why is this behaving in this way? My understanding was that as long as there were 12 columns the content would remain encased within their external container. If I continue to scale down the window, the elements stack as I expect for the mobile view. The issue is that this appears fine when the window mode is suited to a desktop however as I begin to scale the window, the contents of the div are pushed out of the overall container.

This seems to work fine however, I have then tried to include a single row contained a div spanning 3 columns that is offset by 9 columns (still totalling 12) to give the impression that the content within the div is floated right on the page. With this in mind I have conducted a small test with some text spanning 4 columns in a row along with an offset div spanning 6 columns. I have been through all of the standard documentation on their Github page and from my understanding, to use the grid layout effectively, your rows must only contain a total of twelve columns (made up of different elements or a single element). I'm currently investigating the use of Twitter bootstrap as a foundation for my future web development projects for clients.

Twitter bootstrap grids