Block.text in a single line

[staeter]

I use Block.text as presented in here but the text do not align.

viewUserDetails : UserDetails -> Html Msg
viewUserDetails ud =
  Card.config [ Card.attrs [ style "width" "47em" ] ]
    |> Card.header
        [ class "text-center" ]
        [ viewCarousel ud.pictures ud.carouselState InputUserDetailsSelectImage
        , h3 [ Spacing.mt2 ] [ Html.text ud.pseudo ]
        ]
    |> Card.block []
        [ Block.titleH4 [] [ Html.text (ud.first_name ++ " " ++ ud.last_name) ]
        , Block.titleH6 [] [ Html.text (ud.birth) ]
        , Block.titleH6 [] [ Html.text ((orientationToString ud.orientation) ++ " " ++ (genderToString ud.gender)) ]
        , Block.text [] [ Html.text ud.biography ]
        , Block.text [] [ Html.text <|
                            case ud.last_log of
                              Now -> "Is logged in"
                              AWhileAgo date -> "Last log : " ++ date
                        ]
        , Block.text [] [ Html.text ("Popularity score: " ++ String.fromInt ud.popularity_score) ]
        , Block.custom <|
            viewLikeButton ud.id ud.liked
        , Block.custom <|
            viewAngryButton "block" (Block ud.id)
        , Block.custom <|
            viewAngryButton "reprt" (Report ud.id)
        ]
    |> Card.view

Other elements of the page like the header aren't using elm-bootstrap package. It may have to do with that.

The whole code is available here.