Проблема с маленькой точкой останова в Bootstrap Grid

Проблема здесь в том, что слово Staatsangehörigkeit слишком длинное, чтобы его можно было разместить в предоставленной ширине столбца в размере sm.

Если вы используете последнюю версию Bootstrap v4.3, вы можете использовать служебный класс .text-break (см.: Документация по начальной загрузке) и применить его к столбцу, в котором возникает проблема. Это разобьет слово на вторую строку.

<div class = "col-sm-3 col-md-2 form-group text-break">
    <b>Staatsangehörigkeit:</b>
</div>

Если вы используете более старые версии Bootstrap, вы можете создать тот же класс в своем пользовательском CSS, а затем применить его.

.text-break {
    word-break: break-word;
    overflow-wrap: break-word;
}

Please add a class "row" in parent div. Check below:

<div class = "form-row row">              
    <div class = "col-sm-3 col-md-2 form-group">
        <b>Geburtsname:</b>
    </div>
    <div class = "col-sm-3 col-md-4 form-group">
        Mustermann
    </div>
    <div class = "col-sm-3 col-md-2 form-group ">
        <b>Staatsangehörigkeit:</b>
    </div>
    <div class = "col-sm-3 col-md-4 form-group">
        deutsch
    </div>
</div>