Search code examples
c#htmlcssmarginblazorise

Add space between two cards and around them (with Margin) in Blazorise


How can I add some space around my cards in Blazorise? I added some margin with classes in Column but this didn't work because only the "New Survey" gets moved down and I did it for both Columns and I also changed the Row Gutter numbers, didn't helped me out...

Heres my Image: Cards

Here's the corresponding code:

        <Column ColumnSize="ColumnSize.Is6">
            <Card>
                <CardHeader>
                    <CardTitle>
                        @localizer["SurveyPreviewTitle"]
                    </CardTitle>
                </CardHeader>
                <CardBody>
                    <SurveyPreviewView />
                </CardBody>
            </Card>
        </Column>
        <Column ColumnSize="ColumnSize.Is6">
            <Card>
                <CardHeader>
                    <CardTitle>@localizer["StatisticTitle"]</CardTitle>
                </CardHeader>
                <CardBody>
                    <SurveyStatsView />
                </CardBody>
            </Card>
        </Column>
    </Row>

Solution

  • I've a wide screen so I also had to do a larger space between both cards. Because it's a high-resolution display (3440 * 1440)

    To consider this I had to use larger numbers for <Row Gutter="(64, 50)"

    I hope this helps people to get rid of the docs and answers which goes to much in details so just adjust the row gutter to "larger".