It’s definitely not the same thing and it’s important that you understand why.
<h2 class="col-xs-12">Second Text</h2>
In the first example your
h2 is child of a div, meaning that don’t necessary share the same space or width, while in the second case the colum class is attached directly to the
This means that In the first example, by splitting the “concern” of how big and how to display to the div, I can then be flexible and change anything I want in the child
h2 without directly affecting the parent (or any other sibiling)
While in the second case, everything is tied up to how
h2 is told to behave.
Generally speaking the first approach is what is considered the best, since give you more flexibility at the expense of a tiny bit more code.
I made a pen with some colour to help you visualise the difference in space they occupy: