Border of Boostrap cards

Question

Hi I want to use Bootstrap v4.0.0-beta Cards.

First the class "card-block" not works for me. Only if I use the class "card-body" it looks like the examples.

How can I remove the double border between my cards? Every card has a border of 1px - between them there is a border of 2px, I want only 1px. Is there a simple possibility?

This is my code:

    <div class="row no-gutters">
        <div class="card col-sm-6 col-lg-3">
            <div class="card-img-top"><img src="pic.jpg" /></div>
            <div class="card-body">
                <p class="card-text">my text</div>
            <div class="card-footer">my footer</div>
        </div>
        <div class="card col-sm-6 col-lg-3">
            <div class="card-img-top"><img src="pic.jpg" /></div>
            <div class="card-body">
                <p class="card-text">my text</div>
            <div class="card-footer">my footer</div>
        </div>
        <div class="card col-sm-6 col-lg-3">
            <div class="card-img-top"><img src="pic.jpg" /></div>
            <div class="card-body">
                <p class="card-text">my text</div>
            <div class="card-footer">my footer</div>
        </div>
        <div class="card col-sm-6 col-lg-3">
            <div class="card-img-top"><img src="pic.jpg" /></div>
            <div class="card-body">
                <p class="card-text">my text</div>
            <div class="card-footer">my footer</div>
        </div>
    </div>

Thank's for your help.

Answer 1

Use the border utilities...

https://www.codeply.com/go/tukHrs1GLz

   <div class="row no-gutters">
        <div class="card col-sm-6 col-lg-3 border-right-0">
            <div class="card-img-top"><img src="pic.jpg" /></div>
            <div class="card-body">
                <p class="card-text">my text</div>
            <div class="card-footer">my footer</div>
        </div>
        <div class="card col-sm-6 col-lg-3 border-right-0">
            <div class="card-img-top"><img src="pic.jpg" /></div>
            <div class="card-body">
                <p class="card-text">my text</div>
            <div class="card-footer">my footer</div>
        </div>
        <div class="card col-sm-6 col-lg-3 border-right-0">
            <div class="card-img-top"><img src="pic.jpg" /></div>
            <div class="card-body">
                <p class="card-text">my text</div>
            <div class="card-footer">my footer</div>
        </div>
        <div class="card col-sm-6 col-lg-3">
            <div class="card-img-top"><img src="pic.jpg" /></div>
            <div class="card-body">
                <p class="card-text">my text</div>
            <div class="card-footer">my footer</div>
        </div>
    </div>

Also note, card-block changed to card-body from alpha 6 to beta

It would be better to put the cards inside the columns.