Bootstrap: How can I set the width and height of a DIV in the responsive way?

Question

I have a JSP file where I generate boxes with data inside of them. These "boxes" are dynamically generated, inside a for loop. Below is the code

<div class="row pdb-30">

                    <c:choose>
                        <c:when test="${fn:length(adList)==0}">
                            <h3 style='color: #B2BABB; position: relative; left: 30%;'>
                               <fmt:message key="sorry_no_products" />
                            </h3>
                        </c:when>

                        <c:otherwise>
                            <c:forEach var="list" items="${adList}" varStatus="loop">
                                <div class="col-md-6" style="height: 300px; width: 50%;">

                                    <div class="row padd10 list-box">
                                        <div class="col-md-4"><img alt="" src="${list.productAdPhotoLocation.location}" class="img-responsive" ></div>
                                        <div class="col-md-8">
                                            <div class="row pdb-10">
                                                <div class="col-md-6"><h5 style="color:#F66334"><strong>${list.userName}</strong></h5></div>
                                                <!--                                        <div class="col-md-6"><span class="light-color text-center">1 Hour Ago<br>Expiring in week</span></div>-->
                                            </div>
                                            <div class="row pdb-10">
                                                <div class="col-md-6 col-sm-6 col-xs-6"><fmt:message key="type" /></div>
                                                <div class="col-md-6 col-sm-6 col-xs-6">: ${list.productSellAdvertisement.type}</div>
                                            </div>
                                            <div class="row pdb-10">
                                                <div class="col-md-6 col-sm-6 col-xs-6"><fmt:message key="quantity" /></div>
                                                <div class="col-md-6 col-sm-6 col-xs-6">: ${list.productSellAdvertisement.quantity} ${list.productUnitName}</div>
                                            </div>
                                            <div class="row pdb-10">
                                                <div class="col-md-6 col-sm-6 col-xs-6"><fmt:message key="unit_price" /> (Rs)</div>
                                                <div class="col-md-6 col-sm-6 col-xs-6">: ${list.productSellAdvertisement.unitPrice}</div>
                                            </div>
                                            <div class="row pdb-10">
                                                <div class="col-md-6 col-sm-6 col-xs-6"><fmt:message key="location" /> </div>
                                                <div class="col-md-6 col-sm-6 col-xs-6">: ${list.productSellAdvertisement.location}</div>
                                            </div>
                                            <div class="row pdb-10">
                                                <div class="col-md-12"><a href="LoadSingleSellAd?idSellAd=${list.productSellAdvertisement.idproductSellAdvertisement}" class="btn btn-primary green maxwidth"><fmt:message key="details" /></a></div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </c:forEach>
                        </c:otherwise>
                    </c:choose>
                </div>

As you can see I have set the width and height manually in the below line. That is because otherwise the "boxes" get various sizes depending on the data and images inside them. I need 2 "boxes" per line.

<div class="col-md-6" style="height: 300px; width: 50%;">

How can I make this responsive ?

Answer 1

You seem to be using bootstrap classes. One option would be to remove your inlined styling, add the bootstrap css and look up how the bootstrap grid system works in the link here .