Ranjan Kumar Satpathy Ranjan Kumar Satpathy - 1 month ago 14
CSS Question

Bootstrap class to adjust the width of a panel

I am using Bootstrap panel for my dashboard so for that I have to place 5 bootstrap panel inline so for that I tried

class="col-lg-2 col-md-3"
or
class="col-lg-3 col-md-3"
these two classes but these two classes are only possible for even nos like 4 or 6 but its not applying for odd nos like 5 and 7 So I tried inline css like
style="width: 200px"
but its not working in all browsers so what should I do now.

I am attaching a snap for this please take a look into this.
snap Img

so far what I tried

<section class="content">
<!-- Small boxes (Stat box) -->
<div class="row">
<div class="col-lg-2 col-md-3" style="width: 220px">
<!-- small box -->
<div class="small-box bg-primary">
<div class="inner">
<h3>
<span id=claimedAmount></span>
</h3>

<p>Total Claimed</p>
</div>
<div class="icon">
<i class="fa fa-inr bg-icon"></i>
</div>
<a href="${pageContext.request.contextPath}/localConveyance/list" class="small-box-footer">More info <i
class="fa fa-arrow-circle-right"></i></a>
</div>
</div>

<div class="col-lg-2 col-md-3" style="width: 220px">
<!-- small box -->
<div class="small-box bg-yellow">
<div class="inner">
<h3>
<span id=pendingAmount></span>
</h3>

<p>Pending Approval</p>
</div>
<div class="icon">
<i class="fa fa-inr bg-icon"></i>
</div>
<a href="${pageContext.request.contextPath}/localConveyance/list" class="small-box-footer">More info <i
class="fa fa-arrow-circle-right"></i></a>
</div>
</div>

<div class="col-lg-2 col-md-3" style="width: 220px">
<!-- small box -->
<div class="small-box bg-green">
<div class="inner">
<h3>
<span id=settledAmount></span>
</h3>

<p>Settled</p>
</div>
<div class="icon">
<i class="fa fa-inr bg-icon"></i>
</div>
<a href="${pageContext.request.contextPath}/localConveyance/list" class="small-box-footer">More info <i
class="fa fa-arrow-circle-right"></i></a>
</div>
</div>

<!-- ./col -->
<div class="col-lg-2 col-md-3" style="width: 218px">
<!-- small box -->
<div class="small-box bg-navy">
<div class="inner">
<h3>
<span id=pendingSettledAmount></span>
</h3>

<p>Pending Settlement</p>
</div>
<div class="icon">
<i class="fa fa-inr bg-icon"></i>
</div>
<a href="${pageContext.request.contextPath}/localConveyance/list" class="small-box-footer">More info <i
class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- ./col -->

<!-- ./col -->


<!-- ./col -->
<div class="col-lg-2 col-md-3" style="width: 218px">
<!-- small box -->
<div class="small-box bg-red">
<div class="inner">
<h3>
<span id=rejectedAmount></span>
</h3>

<p>Rejected</p>
</div>
<div class="icon">
<i class="fa fa-inr bg-icon"></i>
</div>
<a href="${pageContext.request.contextPath}/localConveyance/list" class="small-box-footer">More info <i
class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
</div>
<!-- /.row -->
<!-- Main row -->

</section>

Answer

Try Below code and remove inline css, and see Updeted Bootply Demo

HTML:

<section class="content">
    <!-- Small boxes (Stat box) -->
                <div class="row"> 
                    <div class="col-lg-2 col-md-3">
                        <!-- small box -->
                        <div class="small-box bg-primary">
                            <div class="inner">
                                <h3>
                                    <span id=claimedAmount></span>
                                </h3>

                                <p>Total Claimed</p>
                            </div>
                            <div class="icon">
                                <i class="fa fa-inr bg-icon"></i>
                            </div>
                            <a href="${pageContext.request.contextPath}/localConveyance/list" class="small-box-footer">More info <i
                                class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>

                    <div class="col-lg-2 col-md-3">
                        <!-- small box -->
                        <div class="small-box bg-yellow">
                            <div class="inner">
                                <h3>
                                    <span id=pendingAmount></span>
                                </h3>

                                <p>Pending Approval</p>
                            </div>
                            <div class="icon">
                                <i class="fa fa-inr bg-icon"></i>
                            </div>
                            <a href="${pageContext.request.contextPath}/localConveyance/list" class="small-box-footer">More info <i
                                class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>

                    <div class="col-lg-2 col-md-3">
                        <!-- small box -->
                        <div class="small-box bg-green">
                            <div class="inner">
                                <h3>
                                    <span id=settledAmount></span>
                                </h3>

                                <p>Settled</p>
                            </div>
                            <div class="icon">
                                <i class="fa fa-inr bg-icon"></i>
                            </div>
                            <a href="${pageContext.request.contextPath}/localConveyance/list" class="small-box-footer">More info <i
                                class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>

                    <!-- ./col -->
                    <div class="col-lg-2 col-md-3">
                        <!-- small box -->
                        <div class="small-box bg-navy">
                            <div class="inner">
                                <h3>
                                    <span id=pendingSettledAmount></span>
                                </h3>

                                <p>Pending Settlement</p>
                            </div>
                            <div class="icon">
                                <i class="fa fa-inr bg-icon"></i>
                            </div>
                            <a href="${pageContext.request.contextPath}/localConveyance/list" class="small-box-footer">More info <i
                                class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->

                    <!-- ./col -->


                    <!-- ./col -->
                    <div class="col-lg-2 col-md-3">
                        <!-- small box -->
                        <div class="small-box bg-red">
                            <div class="inner">
                                <h3>
                                    <span id=rejectedAmount></span>
                                </h3>

                                <p>Rejected</p>
                            </div>
                            <div class="icon">
                                <i class="fa fa-inr bg-icon"></i>
                            </div>
                            <a href="${pageContext.request.contextPath}/localConveyance/list" class="small-box-footer">More info <i
                                class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                </div>
                <!-- /.row -->
                <!-- Main row -->

            </section>