Why is my Bootstrap column not centering its content?`

I have the following basic layout, in which to show a flash-card - the detail-card:

<div></div>
<div> @Html.Partial("_DetailCard", cardModel)
</div>
<div></div>

I know I could just use col-offset but I have plans for the other two columns.

My vision here was to divide the page into three columns, give the middle one, detail-card-container, class text-center so that the content of that div should be horizontally centered inside it.

Yet when I start up the app, I get a display as follows:

The blue is the available space in the detail-card-container for the 'detail-card, outlined in red. The detail card is fixed width 200, and the available space is about 400+ .This is displaying at the left of its available space, not in the centre as intended. The empty spaces to the left and right of the green in the image are the emptycol-md-4` divs.

What am I doing wrong?

2 Answers

Maybe you could give a specific width, display: block, plus margin-left: auto, margin-right: auto.

Use

<div align="center">