Bu card classları neden yan yana gelmiyor?

Bootstrap
, , ,
1

Bootstrap’ten öğrendiklerimi uygulamaya çalıştığım bir uygulama yapıyorum ancak bir problem var.

2 tane card classında divlerimiz var ve bunların yan yana gelmesi gerekiyor. Ancak gelmiyor.
display: inline; yapınca, divimiz olduğu yeri kaplıyor. Çok ilginç. Display block’ta olması gerekirdi bu durum.
Display inline yapmayı denedim, position absolute kullanmayı denedim ancak hiçbir şekilde yan yana gelmiyorlar.
Ne yapılabilir ?

Son olarak şöyle bir sorun da var. Card classları ve diğer pek çok class responsive tasarıma uygun bir şekilde geliyor. Fakat oluşturduğum bu cardlar responsive değil.
Kodlar — > https://dpaste.com/GJMC8HA5Z

2

Card’larınızı şu etiketini içine alın:

<div class="col-6">Buraya Card gelecek</div>

Her ikisini de ayrı ayrı alın.

Şimdi ben size balık vermiş oldum. Şuradan da balık tutmayı öğrenebilirsiniz:

3 
<div class="col-6">
        <div class="card text-center text-white" style="width: 10%; margin-left: 50px;">
            <div class="card-header border-bottom" style="background-color: #2F47C5;">
                Weekly
            </div>
            <div class="card-body" style="background-color: #2F47C5;">
                <h1>25 $</h1>
            </div>
            <div class="card-footer" style="background-color: #2F47C5;">
                <h6>Lorem ipsum dolor sit amet.</h3>
            </div>
        </div>
    </div>

    <div class="col-6">
        <div class="card text-center text-white" style="width: 10%; margin-left: 50px;">
            <div class="card-header border-bottom" style="background-color: #2F47C5;">
                Monthly
            </div>
            <div class="card-body" style="background-color: #2F47C5;">
                <h1>50 $</h1>
            </div>
            <div class="card-footer" style="background-color: #2F47C5;">
                <h6>Lorem ipsum dolor sit amet.</h3>
            </div>
        </div>
    </div>

yanlış anlamadıysam bu şekilde olması lazımdı ancak işe yaramadı.

Ekran görüntüsü 2020-11-19 172208
Ekran görüntüsü 2020-11-19 1722081930×1089 264 KB

<div class="card text-center text-white col-6" style="width: 10%; margin-left: 50px;">
        <div class="card-header border-bottom" style="background-color: #2F47C5;">
            Weekly
        </div>
        <div class="card-body" style="background-color: #2F47C5;">
            <h1>25 $</h1>
        </div>
        <div class="card-footer" style="background-color: #2F47C5;">
            <h6>Lorem ipsum dolor sit amet.</h3>
        </div>
    </div>

    <div class="card text-center text-white col-6" style="width: 10%; margin-left: 50px;">
        <div class="card-header border-bottom" style="background-color: #2F47C5;">
            Monthly
        </div>
        <div class="card-body" style="background-color: #2F47C5;">
            <h1>50 $</h1>
        </div>
        <div class="card-footer" style="background-color: #2F47C5;">
            <h6>Lorem ipsum dolor sit amet.</h3>
        </div>
    </div>

bir de bu şekilde denedim ancak bu da bir işe yaramadı.

Ekran görüntüsü 2020-11-19 172024
Ekran görüntüsü 2020-11-19 1720241920×1080 263 KB

Sadece yanlarına border ekledi.

4

İlk yaptığınız doğru ama ben bir şeyi eksik söylemişim. Bu iki “col-6” div etiketini şunun içine yazarsanız düzelmeli:(Telefondan yazdığım için test edemiyorum.)

<div class="row"> İlk attığınız kodun tamamını buraya yazın </div>

Yine balık tutmayı öğrenmenizi tavsiye ediyorum. Bu iş daha kapsamlı bir şekilde yapılıp ekran boyutuna göre şekillendirilebiliyor.

1 Beğeni
5

Tamam bu işe yaradı. Tam olarak istediğim mesafede yan yana gelmediler ama orasını oltayı kaptıktan sonra yaparım. Çok teşekkür ederim :grinning:

1 Beğeni