Floating elements get mixed with things that don't float. The breadcrumbs and the "right" section of your page are floating elements (they have "pull-left" and "pull-right" classes, which set the "float" css property left/right). So your H1 title was mixed with those floating elements and this was causing the bad layout. Bootstrap containers provide a clean separation between the sections, so elements in different containers never get mixed.
Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.
In other words, a navbar is a bar on the top used for navigation. It may include links, dropdowns and even inputs (e.g., search). If you make the window very narrow, it will adjust and move the elements into a dropdown (it uses the hamburger icon, I know you don't like it, but you can replace it if needed).
The link doesn't work. I guess that helps make it modern, the fact that links don't work.
I hate Bootstrap, but I hate the alternatives even more. I looked at at least 10 other similar systems. This isn't urgent, but let's discuss this. For now, I am disgusted with modern HTML and I will take a break from it.
I thought more about Bootstrap last night and now I really hate it. It is pure modern culture. I feel about it like this:
The original HTML idea made sense. Everything developed after that was garbage. What should have happened is that a lower level rendering system should have been developed. Browsers should have supported a standard virtual machine with a standard rendering API. This would have allowed programs written in any language render or interact with HTML.
We discussed this. This is a complex phenomenon that is not only affected by modern culture. The are many variables and it is hard to think of a solution that would have worked smoothly.
We can certainly look into a technology that makes HTML simpler and more elegant. We both agree that we won't be able to do everything browsers support, but it would be great for people who wants simplicity.
I don't understand the need for the div tag. The breadcrumbs separator should default. You can allow an override parameter, but I wouldn't use it. All items should be in "li" tags. This makes it clear and explicit and allows me to put whatever I want there, not just links. I am not sure how centering should work, but certainly not with a class. I think the dropdown text should just be the text in the dropdown tag that isn't part of an item.