Lately ive been curious about how hr(short line) is used from user experience perspective. Many website used this as separator or divider in title. What is good and bad things about this?
In this specific example, it probably has little effect either way. Just leaving the space between the header and the body text would not decrease readability or usability in any way. Arguably it would remove a little visual clutter, but it's such a small element on an already sparse page that it doesn't much matter. So in this case, it's really just a stylistic choice.
In general, most visual designers I've worked with would argue that in the first instance, given free creative reign, you should try to use space alone as a separator between blocks of content, and use lines only when additional visual guidance is required for clarity. But that's not to say that lines aren't sometimes useful or essential to help to convey a particular tone, brand or visual style, even if they aren't entirely "necessary".
Frequently, lines are used in design to divide sections of a page or layout, and to join sections that are related to each other. On websites and in magazines we see lines used to frame photographs, separate sidebars and join articles together.
In this case, these 2 sections are related to each other: Title - content I believe that it highlights the message "We've got what you need!" and it makes it looks better aesthetically. As for the user experience, the user is attracted by the message and the design tries to convince them that Start bootstrap is what they need!
Different people will have different opinions about this, as you can either use a space or a solid line to visually and logically break up sections on a page.
There are possible reasons based on stylistic preferences due to branding, or other design elements on the pages that will make the line stand out more than just whitespace.
If you want to contemplate about just how little (or how much) difference it can make, try to compare a very thin line to whitespace and see what the difference in the visual impact is.
This type of short separator serves different purpose than its longer cousin.
Long separator is used as a way to divide content.
However, this short separator is more akin to a 'pipe' flipped side way.
It serves mainly as a way to join two related pieces of content that happen to be stylistically or hierarchically different.