0

Just like this

So, I have problem with the background of the padding. the problem is the padding is on, but why its still have background on the space.. look at my image to understand what I said. I want space between padding just like normal bootstrap

Am i miss something? because usually it's not like this..

*sorry for my english btw.

/* STAT OF JOBNYA */
.row#jobnya{
    margin-top: 20px;
    margin-bottom: 20px;
/*    padding-top: 20px;*/
    border-radius: 3px !important;
    border: solid 0.5px rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.1);
    padding-bottom: 10px;
    background: #fff;
}


.row#jobnya:hover{
        -moz-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
        -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
            transition: all 0.3s;
}
.col-sm-12{
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 10px;
}
/*.gambar{
    padding-left: 10px;
    padding-right: 10px;
}*/

.gambar img{
    width: 100%;
    height: 200px;
    border: 0;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
border-radius: 4px;
}

.judul{
    margin: 0px !important;
    word-wrap: break-word !important;
    font-size: 22px !important;
    line-height: 22px !important;
    letter-spacing: undefined !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    color: #484848 !important;
    font-weight: 700 !important;
}
.available-job{
  /*  background: #FFDDF5;*/
    background: #f9f9f9;
    color: #484848;
    text-align: center;
    padding: 10px;
    word-wrap: break-word !important;
    font-size: 16px !important;
    line-height: 18px !important;
    letter-spacing: 0.2px !important;
    font-weight: 300 !important;
}
.posted{
word-wrap: break-word !important;
padding: 5px 0;
font-size: 15px !important;
line-height: 18px !important;
letter-spacing: 0.2px !important;
font-weight: 400 !important;
color: rgba(0,0,0,.54) !important;
}
.harga, .tanggal{
    word-wrap: break-word !important;
    font-size: 16px !important;
    line-height: 18px !important;
    letter-spacing: 0.2px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    color: #484848 !important;
    font-weight: 300 !important;
/*    display: inline-block !important;*/
    padding: 15px 0;
    margin-right: 15px
}

 .tempat{
    word-wrap: break-word !important;
    font-size: 16px !important;
    line-height: 18px !important;
    letter-spacing: 0.2px !important;
    padding-top: 5px !important;
    padding-bottom: 0px !important;
    color: #484848 !important;
    font-weight: 300 !important;
    padding: 15px 0;
    }

.kategori{
    word-wrap: break-word !important;
    font-size: 16px !important;
    line-height: 18px !important;
    letter-spacing: 0.2px !important;
    padding-top: 10px !important;
    padding-bottom: 0px !important;
    color: #484848 !important;
    font-weight: 300 !important;
    padding: 15px 0;
}
.kategori span{
        background: #f9f9f9 !important;
        border-radius: 4px;
        border: 1px solid #e9e6e0;
        padding: 2px;
        display: inline-block;
}

.tombol{
    text-align: right;
    padding-right: 30px;
}

.tombol a.detail{
    text-transform: uppercase;
    cursor: pointer !important;
    background: #FF5C5C;
    color: #fff;
    position: relative !important;
    /*display: inline-block !important;*/
    text-align: center !important;
    text-decoration: none !important;
    width: auto !important;
    font-size: 15px !important;
    line-height: 18px !important;
    letter-spacing: 0.2px !important;
    padding: 8px 16px !important;
    font-weight: normal !important;
    border: 1px solid transparent !important;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    min-width: 51.77708763999664px !important;
    border-radius: 4px !important;
    border-color: #FF5C5C !important;
    -webkit-transition: background 0.3s, border-color 0.3s !important;
    -moz-transition: background 0.3s, border-color 0.3s !important;
    transition: background 0.3s, border-color 0.3s !important;
}

.button{
    padding-top: 16px;
    text-align: center;
}
button.booking {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 10px 15px;

    background:#FF5C5C;
    border-radius: 0;
    border: 1px solid #FF5C5C;
    color: #fff;
    -webkit-transition: background-color .3s,color .3s;
    transition: background-color .3s,color .3s;
}
button.view {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 5px;
    background: transparent;
    border-radius: 0;
    border: 1px solid #FF5C5C;
    color: #FF5C5C;
    -webkit-transition: background-color .3s,color .3s;
    transition: background-color .3s,color .3s;
}
button.profile{
cursor: pointer !important;
-webkit-transition: background 0.3s, border-color 0.3s !important;
-moz-transition: background 0.3s, border-color 0.3s !important;
transition: background 0.3s, border-color 0.3s !important;
position: relative !important;
/*display: inline-block !important;*/
text-align: center !important;
text-decoration: none !important;
border-radius: 4px !important;
width: auto !important;
font-size: 15px !important;
line-height: 18px !important;
letter-spacing: undefined !important;
padding-top: 8px !important;
padding-bottom: 8px !important;
color: #FF5C5C !important;
font-weight: normal !important;
border: 1px solid transparent !important;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
padding-right: 16px !important;
padding-left: 16px !important;
min-width: 51.77708763999664px !important;
border-color: #FF5C5C !important;
background: transparent !important;
}
.row#mobile, .col-md-4#mobile, .col-md-12#mobile{
/*  padding-top: 30px;*/
}
@media (max-width: 992px){
/*.col-md-4#mobile, .col-md-12#mobile{
  padding-top: 0px;
}*/
  .row#mobile {
  padding-top: 5px;
  }
  .col-xs-6#ketengah{
    margin-left: 50px;
  }
/*    .col-md-6#glyph{
        padding: 0;
    }*/
    .jarak{
        margin-top: -10px;
    }
    .judul{
        margin-top:20px !important;
        font-size: 20px !important;
    }
    .posted, .harga, .tanggal, .tempat,.kategori span{
        padding-top: 2px !important;
        padding-bottom: 2px !important;
        font-size: 15px !important; 
    }
    .tombol{
        margin-top: 10px;
        text-align: center;
    }
}
.ct-active{
    border-left: 5px solid #FF5C5C;
}



/* start of Card */

.cardContainer{
  background-color: #fff;
  margin-bottom: 20px;
  padding: 15px;
  padding-right: -15px;
  padding-left: -15px;
}

@media all and (max-width: 760px){

.deskripsi {
    text-align: center;
}
}

.gambar-bid img{
  border-radius: 50%;
  margin: 0 auto;
}

.row{

}

/* STAT OF JOBNYA */

.available-job{
    background: #FFDDF5;
    background: #f9f9f9;
    color: #484848;
    text-align: center;
    padding: 10px;
    word-wrap: break-word !important;
    font-size: 16px !important;
    line-height: 18px !important;
    letter-spacing: 0.2px !important;
    font-weight: 300 !important;
}

.jarak{
display: block;
height: 20px;
}
.harga, .tanggal{
    word-wrap: break-word !important;
    font-size: 16px !important;
    line-height: 18px !important;
    letter-spacing: 0.2px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    color: #484848 !important;
    font-weight: 300 !important;
    display: inline-block !important;
    padding: 15px 0;
    margin-right: 15px
}
 .tempat{
    word-wrap: break-word !important;
    font-size: 16px !important;
    line-height: 18px !important;
    letter-spacing: 0.2px !important;
    padding-top: 5px !important;
    padding-bottom: 0px !important;
    color: #484848 !important;
    font-weight: 300 !important;
    padding: 15px 0;
    }
.kategori{
    word-wrap: break-word !important;
    font-size: 16px !important;
    line-height: 18px !important;
    letter-spacing: 0.2px !important;
    padding-top: 10px !important;
    padding-bottom: 0px !important;
    color: #484848 !important;
    font-weight: 300 !important;
    padding: 15px 0;
}
.kategori span{
        background: #f9f9f9 !important;
        border-radius: 4px;
        border: 1px solid #e9e6e0;
        padding: 2px;
        display: inline-block;
}

.tombol{
    text-align: right;
    padding-right: 30px;
}

.tombol a.detail{
    text-transform: uppercase;
    cursor: pointer !important;
    background: #FF5C5C;
    color: #fff;
    position: relative !important;
    display: inline-block !important;
    text-align: center !important;
    text-decoration: none !important;
    width: auto !important;
    font-size: 15px !important;
    line-height: 18px !important;
    letter-spacing: 0.2px !important;
    padding: 8px 16px !important;
    font-weight: normal !important;
    border: 1px solid transparent !important;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    min-width: 51.77708763999664px !important;
    border-radius: 4px !important;
    border-color: #FF5C5C !important;
    -webkit-transition: background 0.3s, border-color 0.3s !important;
    -moz-transition: background 0.3s, border-color 0.3s !important;
    transition: background 0.3s, border-color 0.3s !important;
}
<div class="card">

<div class="row" style="margin-right: -10px;
margin-left: -10px;">
    <div class="card-info">

        <div class="col-md-12">
            <div class="row" id="jobnya">
               <div class="col-sm-12">
                <div class="available-job">
                    <span><?=$status == 'open' ? 'Still Selecting...': $status;?></span>
                </div>
            </div>
                <div class="col-xs-12 col-sm-3">
                    <div class="gambar">
                        <img src="<?=$client_image?>">
                    </div>
                </div>
                <div class="col-xs-12 col-sm-9">
                    <div class="judul"><?=$title?></div>
                    <div class="posted">
                        Posted on <?php echo format_date($date_added, true);?> WIB
                    </div>
                    <div class="jarak"></div>

                    <div class="harga">
                        <i class="fa fa-money"></i> <span><?=$budget?></span>
                    </div>
                    <div class="tanggal">
                        <i class="fa fa-calendar"></i> <span><?php
                        echo $date;
                        ?></span>
                    </div>
                    <div class="tempat">
                        <i class="fa fa-map-marker"></i> <span><?=$city?>, <?=$province?></span>
                    </div>
                    <div class="kategori">
                        <i class="fa fa-tags"></i> <span><?=$service_category?></span> <!-- <span>Make Up</span> <span>Make Up</span> -->
                    </div>
                </div>

            </div>

        </div>
        <!-- end of col md 12 -->
    </div>
  </div>
</div> <!-- end of card -->
    <!--  end of detail -->
    <!--         <div class="row" id="kartu-bawah"> -->
<div class="cardWrapper">
  <div class="row" style="margin-left: -10px;margin-right: -10px;">
        <!-- first Row -->
            <?php
            foreach ($applicants as $key => $value) { //loop applicants
                $mua_name = explode(' ', $value->rating['name']); 
                ?>
                <div class="col-md-6 cardContainer">
                        
                            <div class="col-xs-12 col-md-3" style="text-align: center;">
                            <div class="gambar-bid">
                                <img src="<?=SAAS_URL."/storage/images/".$value->rating['image'];?>" class="img-responsive" id="kartu" alt="" width="200px">
                                                              <?php
                                        $rating  = $value->rating['rating'] == '' ? 0 : floor($value->rating['rating']);
                                        $rat = '';
                                        if($rating > 0){
                                            for ($i=1; $i <= $rating; $i++) { 
                                                $rat .= '<i class="fa fa-heart fa-xs" style="color:#FF3B3F;"></i>';
                                            }
                                        }
                                        $rating = 5 - $rating;
                                        for ($i=1; $i <= $rating; $i++) { 
                                            $rat .= '<i class="fa fa-heart-o fa-xs" style="color:#FF3B3F;"></i>';
                                        }
                                        ?> 
                
                             <span class="deskripsi-bid-atas"><?=$rat;?></span>
                            </div>
                            </div>             
                  <div class="col-xs-12 col-md-6" style="line-height: 30px;text-align: left;">  

                        <div class="row" id="mobile">
                          <div class="col-xs-12">                         
                             <span class="deskripsi-bid"><i class="fa fa-user" style="font-size: 16px;"></i></span>
                             <span class="deskripsi-bid-atas"><?=$mua_name[0];?></span>
                           </div>
                          <div class="col-xs-12">
                             <span class="deskripsi-bid"><i class="fa fa-money" style="font-size: 16px;"></i></span>
                             <span class="deskripsi-bid-atas"> <?=number_format($value->total)?></span>
                          </div>
                          <div class="col-xs-12" id="ketengah">
                            <button type="button" class="view">Portfolio</button>
                          </div>
                        </div>

                  </div> <!-- col-xs-12 col md 6 -->  
                   <div class="col-md-3" id="mobile">
                            <?php if(!$pernah_di_booking){ ?>
                                <button type="button" value="<?=$value->job_bidding_id;?>" class="booking">Booking</button>
                                <?php } ?>
                                <button type="button" class="booking">Booking</button>
                    </div> <!-- end of row XS -->  
                </div> <!-- end of col md 6 -->

            <?php } //end loop applicants ?>
    </div> 
  </div> 
   <!--  </div> --> <!-- CARD OF WRAPPER -->
<!-- <pre>
<?php //print_r( $applicants);?>
</pre> -->
Adit Lin
  • 17
  • 4
  • Possible duplicate of [Remove padding from columns in Bootstrap 3](https://stackoverflow.com/questions/19562903/remove-padding-from-columns-in-bootstrap-3) – Chico3001 Apr 01 '18 at 06:56
  • @Chico3001the problem is i dont want to remove padding. but I want to add space between col-md – Adit Lin Apr 01 '18 at 07:01
  • Instead of col-md use col-md-offset , I understand your problem . But it is the right way to use bootstrap exact , for your need. –  Apr 02 '18 at 05:57
  • okay thank you, I think I know what I should go now – Adit Lin Apr 03 '18 at 08:00

0 Answers0