Remove From My Forums

Design Question about displaying images in Bootstrap

Question
0

Sign in to vote

User248267340 posted

I'm working on a "Detail" page for a store, with Bootstrap. I've noticed that if I place an image in 100% col-md-6 it looks too big, and if I use col-5, it looks kinda small. (I'm testing with 1300px wide, centered).

Is there a good size for an image that you have come across for a detail page, that fits within bootstrap rather nicely, without being too large or too small?

I started testing with 540x720, but it fits as if it were 5 1/2 columns.

Friday, October 23, 2020 11:12 PM

Answers

User-939850651 posted

Hi coreysan,

According to your description, I think you can design a suitable style based on the styles defined in Bootstrap as a reference.

This is part of the CSS style parameters you mentioned:

  .col-md-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-md-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }

This is a custom style:

<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <script src="Scripts/jquery-3.5.1.min.js"></script>
    <style>
        .col-md-mt5 {
            -ms-flex: 0 0 45.8333333%;
            flex: 0 0 45.8333333%;
            max-width: 45.8333333%;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-1">md-5:</div>
            <div class="col col-md-5" style="border:1px solid red;background-color:aquamarine"></div>
            <br />
        </div>
        <div class="row">
            <div class="col-md-1">md-mt5:</div>
            <div class="col col-md-mt5" style="border:1px solid red;background-color:aquamarine"></div>
            <br />
        </div>
        <div class="row">
            <div class="col-md-1">md-6:</div>
            <div class="col col-md-6" style="border:1px solid red;background-color:aquamarine"></div>
            <br />
        </div>
        <br />
    </div>
</body>

Result:

Hope this can help you.

Best regards,

Xudong Peng

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Monday, October 26, 2020 8:43 AM

All replies