top-row px-4 css classes in Blazor project

Question

I'm trying to modify the standard layout that comes with any Blazor project e.g. WASM or server but I'm a bit confused about the top-row px-4 css classes.

Here's the HTML that seems to define the top row/header section: <div class="top-row px-4">

I can't find any reference to top-row in the app.css file. Where is this class defined? I'm nowhere near a CSS expert but I don't find any mention of it in Bootstrap file either i.e. bootstrap.min.css.

Also, I did find the definition of px-4 in boostrap.min.css file but on Bootstrap website, I see no documentation about it.

Are they standard Bootstrap classes or specific to this layout? If top-row is specific to this layout, how come I can't find its definition anywhere? Similarly, I see px-4 defined in bootstrap.min.css but no mention of it in Bootstrap documentation! Could someone help me understand where these classes come from -- preferably a link to some documentation?

BTW, the version of Bootstrap used in Blazor project templates seems to be 5.1.0

Answer 1

top-row is defined in Mainlayout.razor.css. Line 15 onwards for various media widths.

.top-row {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

/... lots more

px-4 - is short for padding x direction. See: https://getbootstrap.com/docs/5.0/utilities/spacing/#notation