CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
baao
baao

Reputation: 73301

Margin between my boxes CSS

I have those 3 boxes

enter image description here

and I want to have some margin inbetween them. As soon as I add margin, the 3rd one goes to the next row. Here's the code:

CSS:

#hotels {
    background: url('../img/PICS/19427110_ml.jpg');
    background-size: 100%;
    height:10px;
    color:whitesmoke;
}

.contenhotelsclass {
    border-radius:10px;
    padding: 70px;
    height: 700px;
    background: rgba(0, 0, 13, 0.6);
}
.contentsfirst {

    padding-top: 100px;
    padding-bottom: 100px;


}

If I add 

.marginyes {
    margin: 0 30px;
}

The next row thing happens.

HTML:

<section id="hotels">
    <div class="row">
        <div class="col-md-12 contentsfirst" id="contenthotels">
            <div class="col-md-4 contenhotelsclass">
                <img src="{{ URL::asset('img/PICS/18911510_ml.jpg') }}" class="img-circle img-responsive"> </img>
                <span><h2>{{ Str::upper($wording['training']->container) }}</h2></span>
                <span style="padding-top: 100px">{{ Str::limit($wording['training']->wording , 400, '...') }}</span>
                <span ><p style="padding-top: 30px;"><button id="trainbutton" class="btn btn-success">Read more!</button></p></span>
            </div>
            <div class="col-md-4 contenhotelsclass marginyes">
                <img src="{{ URL::asset('img/PICS/20360155_m.jpg') }}" class="img-circle img-responsive"> </img>
                <span><h2>{{ Str::upper($wording['taste']->container) }}</h2></span>
                <span style="padding-top: 100px">{{ Str::limit($wording['taste']->wording ,400,'...') }}</span>
                <span><p style="padding-top: 30px;"><button id="eatbutton" class="btn btn-success">Read more!</button></p></span>
            </div>
            <div class="col-md-4 contenhotelsclass">
                <img src="{{ URL::asset('img/PICS/31786072_ml.jpg') }}" class="img-circle img-responsive"> </img>
                <span><h2>{{ Str::upper($wording['relax']->container) }}</h2></span>
                <span style="padding-top: 100px">{{ Str::limit($wording['relax']->wording ,400,'...') }}</span>
                <span><p style="padding-top: 30px;"><button id="relaxbutton" class="btn btn-success">Read more!</button></p></span>
            </div>
        </div>
    </div>
</section>

I'm using bootstrap 3.

How could I solve this?

Upvotes: 0

Views: 60

Answers (3)

Alien
Alien

Reputation: 3678

there is a solution. change your DOM

old:

 <div class="col-md-4 contenhotelsclass">
              ........
 </div>

new:

<div class="col-md-4">
<div class="contenhotelsclass">
.....
</div>
</div>

add following css:

.contenhotelsclass {margin:0px 10px;}

jsFiddle http://jsfiddle.net/mp9napL3/1/

Upvotes: 2

Vipul Hadiya
Vipul Hadiya

Reputation: 882

It is obvious, you are using col-md-4 means 25% of parent and when you set extra margin your div covers greater than 25%, the only way is to override col-md-4 class and reduce width from 25% to less.

Upvotes: 0

Okx
Okx

Reputation: 363

Firstly, I don't understand why you use margin: 0 30px;, I usually use just margin:30px;.

Secondly, the answer is that you have so much spacing between your boxes, your browser just puts the last box on the next line. Use a wider browser and your 3rd box won't go on the next line.

Upvotes: 0

Related Questions