MrShadow MrShadow - 5 months ago 31
CSS Question

Bootstrap Grid unevenly arranged in Mozilla Firefox

I am building a website using Bootstrap. I have used

Grid
.
The grids are evenly arranged in Google Chrome But are unevenly arranged when viewed in Mozilla Firefox and Microsoft Edge.
The basic structure is as follows:

<row>
<div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
<div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
<div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
<div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
</row>
<row>
<div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
<div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
<div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
<div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
</row>
.
.
</row> //n-th row


You can view the website for the output:
Link to Website

Answer

add <div class="clearfix"></div>

before every <row> tag is closed...like below

    <row>
        <div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
        <div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
        <div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
        <div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
    <div class="clearfix"></div>
    </row>
    <row>
        <div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
        <div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
        <div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
        <div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
    <div class="clearfix"></div>
    </row>
    .
    .
    <div class="clearfix"></div>
    </row> //n-th row