locked
Design Question about displaying images in Bootstrap RRS feed

  • Question

  • 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

  • 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
  • User248267340 posted

    Thanks!!! I should have known   :)

    Monday, October 26, 2020 8:51 PM