locked
Bootstarp in ASP RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-90830185 posted

    While on a normal large screen, I like to display 6 small images in the same row. But when viewing the same page on a Mobile phone I want to view 2 small images per row (i.e. a total of 3 rows). I am trying to achieve the above using Bootstrap responsive grid but not been able to know how to do it. Therefore, I would appreciate if someone can assist please?

    Tuesday, November 24, 2020 1:48 PM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-939850651 posted

    Hi Moodhi,

    According to your description, you could use Bootstrap Grid System to achieve your requirement. And need to add the corresponding meta tag in the head.

    Something like this:

    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link href="/Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-6 col-sm-2">
                <img src="/img/1.png" alt="Alternate Text" />
            </div>
            <div class="col-6 col-sm-2">
                <img src="/img/1.png" alt="Alternate Text" />
            </div>
            <div class="col-6 col-sm-2">
                <img src="/img/1.png" alt="Alternate Text" />
            </div>
            <div class="col-6 col-sm-2">
                <img src="/img/1.png" alt="Alternate Text" />
            </div>
            <div class="col-6 col-sm-2">
                <img src="/img/1.png" alt="Alternate Text" />
            </div>
            <div class="col-6 col-sm-2">
                <img src="/img/1.png" alt="Alternate Text" />
            </div>
        </div>
    </div>
</body>

    Result:

    Best regards,

    Xudong Peng

    Wednesday, November 25, 2020 5:45 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-2054057000 posted

    You can easily understand how Bootstrap grid system works from Bootstrap to Create Responsive Design.

    Wednesday, November 25, 2020 5:50 AM