How to design Responsive Menu containing images using BootStrap and CSS in ASP.Net

jordan
 
on Feb 13, 2017 04:53 AM
2729 Views

i want to last product and oll like this

<div class="container">
        <div class="row">
            <div class="col-sm-4">
                <div style="border: 1px solid #ddd; border-radius: 25px; padding: 94px; padding-top: 10px;">
                    <h2 style="text-align: center;">
                        LATEST PRODUCTS</h2>
                    <img src="images/mrshoes/30816-MR-SHOES-ABERCROMBIE-FITCH-IMPORTED-MEN-S-EVA-Flip-Flop-.jpg"
                        class="img-circle" alt="Cinque Terre" width="204" height="136" style="">
                </div>
            </div>
            <div class="col-sm-4">
                <div style="border: 1px solid #ddd; border-radius: 25px; padding: 94px; padding-top: 10px;">
                    <h2 style="text-align: center;">
                        BEST SELLER</h2>
                    <img src="images/mrshoes/NIKE-AIR-MAX-TAVAS-DARK-BLUE.jpg" class="img-circle" alt="Cinque Terre"
                        width="204" height="136">
                </div>
            </div>
            <div class="col-sm-4">
                <div style="border: 1px solid #ddd; border-radius: 25px; padding: 94px; padding-top: 10px;">
                    <h2>
                        NEW ARRIVALS</h2>
                    <img src="images/mrshoes/NIKE-AIR-MAX-TAVAS-DARK-BLUE.jpg" class="img-circle" alt="Cinque Terre"
                        width="204" height="136">
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <h3 style="text-align:center; padding-bottom:10px;">
            SPORT SHOES</h3>
        <hr>
    </div>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
AnandM
 
on Feb 14, 2017 03:19 AM
on Feb 14, 2017 03:22 AM

Hi jordan,

Please refer below sample

<div>
    <br />
    <br />
    <br />
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <div style="border: 1px solid #ddd; border-radius: 25px; padding: 30px; padding-top: 10px;
                    padding-bottom: 70px;">
                    <h2 style="text-align: center;">
                        LATEST PRODUCTS</h2>
                    <img src="http://i32.photobucket.com/albums/d4/anni49/NIKE-AIR-MAX-TAVAS-DARK-BLUE_zps52lx5jov.jpg"
                      class="img-responsive"  alt="Cinque Terre" style="border-radius: 90px 90px 90px 90px" width="300" height="200" />
                </div>
            </div>
            <div class="col-sm-4">
                <div style="border: 1px solid #ddd; border-radius: 25px; padding: 30px; padding-top: 10px;
                    padding-bottom: 70px;">
                    <h2 style="text-align: center;">
                        BEST SELLER</h2>
                    <img src="http://i32.photobucket.com/albums/d4/anni49/30816-MR-SHOES-ABERCROMBIE-FITCH-IMPORTED-MEN-S-EVA-Flip-Flop-_zpstcxkilvj.jpg"
                      class="img-responsive"  alt="Cinque Terre" style="border-radius: 90px 90px 90px 90px" width="300" height="200" />
                </div>
            </div>
            <div class="col-sm-4">
                <div style="border: 1px solid #ddd; border-radius: 25px; padding: 30px; padding-top: 10px;
                    padding-bottom: 70px;">
                    <h2 style="text-align: center;">
                        NEW ARRIVALS</h2>
                    <img src="http://i32.photobucket.com/albums/d4/anni49/SL2_zpsjgz1tmpg.jpg" alt="Cinque Terre"
                      class="img-responsive"  width="300" style="border-radius: 90px 90px 90px 90px" height="200" />
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <h3 style="text-align: center; padding-bottom: 10px;">
            SPORT SHOES</h3>
        <hr />
    </div>
</div>
<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</div>

Demo