Çözüldü Bootstrap Card kodları nasıl özelleştirilebilir?

Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.
dgknbzglu

dgknbzglu

Kilopat
Katılım
5 Mart 2019
Mesajlar
1.418
Çözümler
49
Yer
İstanbul/Maltepe
Daha fazla  
Cinsiyet
Erkek
Meslek
PHP Developer
Merhaba arkadaşlar, pek bilgili değilim Bootstrap konusunda, yani işimi görebileceğim kadar biliyorum. Bugün bir yerde tıkandım yardımlarınızı bekliyorum.
Aşağıdaki gibi bir kodum var, istediklerimden bahsedeyim:
Koyulan fotoğraflar hangi boyutta olursa olsun fixlediğim bir boyutta görünsün. (biri büyük biri küçük durmasın yani)
Bir de görsel olarak göstereceğim;

1710455094936.png

Masaüstü görünümünde problem yok istediğim şekli verebildim.

Daha küçük ekranda da istediğim şekli verebildim bunda da problem yok.
1710455147238.png

Fakat ekran genişliği 575px'in altına düştüğünde fotoğraf altta kalıyor. 575px'in altına düştüğünde de üstteki gibi görmek istiyorum.

1710455237749.png


Ne yapmam gerekiyor? Yardımcı olur musunuz?

HTML: 
<div class="container-fluid mt-5">
  <div class="row">

    <div class="col-md-6 col-sm-12">
      <div class="card mb-3 bg-gri">
        <div class="row g-0">
          <div class="col-md-5 col-sm-8 col-xs-8 order-md-1 order-sm-1">
            <div class="card-body">
              <h3 class="card-title">HABER BAŞLIĞI HABER BAŞLIĞI HABER BAŞLIĞI</h3>
            </div>
          </div>
          <div class="col-md-1 col-sm-1 col-xs-1 order-md-2 order-sm-2 align-self-end">
            <div class="flex-container">
              <p>tıkla</p>
              <i class="fas fa-chevron-right"></i>
            </div>
          </div>
          <div class="col-md-6 col-sm-3 col-xs-3 order-md-3 order-sm-3">
            <img src="https://placehold.co/600x400" class="img-fluid rounded-start" style="max-width: 100%; height: auto;">
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-6 col-sm-12">
      <div class="card mb-3 bg-gri">
        <div class="row g-0">
          <div class="col-md-5 col-sm-8 col-xs-8 order-md-1 order-sm-1">
            <div class="card-body">
              <h3 class="card-title">HABER BAŞLIĞI HABER BAŞLIĞI HABER BAŞLIĞI</h3>
            </div>
          </div>
          <div class="col-md-1 col-sm-1 col-xs-1 order-md-2 order-sm-2 align-self-end">
            <div class="flex-container">
              <p>tıkla</p>
              <i class="fas fa-chevron-right"></i>
            </div>
          </div>
          <div class="col-md-6 col-sm-3 col-xs-3 order-md-3 order-sm-3">
            <img src="https://placehold.co/600x400" class="img-fluid rounded-start" style="max-width: 100%; height: auto;">
          </div>
        </div>
      </div>
    </div>

  </div>
</div>
 
Tarihe göre sırala Puana göre sırala
HTML: 
<div class="container-fluid mt-5">
  <div class="row">

    <div class="col-md-6 col-sm-12">
      <div class="card mb-3 bg-gri">
        <div class="row g-0">
          <div class="col-md-5 col-sm-8 order-md-1 order-sm-1">
            <div class="card-body">
              <h3 class="card-title">HABER BAŞLIĞI HABER BAŞLIĞI HABER BAŞLIĞI</h3>
            </div>
          </div>
          <div class="col-md-1 col-sm-1 order-md-2 order-sm-2 align-self-end">
            <div class="flex-container">
              <p>tıkla</p>
              <i class="fas fa-chevron-right"></i>
            </div>
          </div>
          <div class="col-md-6 col-sm-3 order-md-3 order-sm-3">
            <img src="https://placehold.co/600x400" class="img-fluid rounded-start" style="width: 100%; height: auto;">
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-6 col-sm-12">
      <div class="card mb-3 bg-gri">
        <div class="row g-0">
          <div class="col-md-5 col-sm-8 order-md-1 order-sm-1">
            <div class="card-body">
              <h3 class="card-title">HABER BAŞLIĞI HABER BAŞLIĞI HABER BAŞLIĞI</h3>
            </div>
          </div>
          <div class="col-md-1 col-sm-1 order-md-2 order-sm-2 align-self-end">
            <div class="flex-container">
              <p>tıkla</p>
              <i class="fas fa-chevron-right"></i>
            </div>
          </div>
          <div class="col-md-6 col-sm-3 order-md-3 order-sm-3">
            <img src="https://placehold.co/600x400" class="img-fluid rounded-start" style="width: 100%; height: auto;">
          </div>
        </div>
      </div>
    </div>

  </div>
</div>
 
Artı 0 Eksi
kinder dedi:
HTML: 
<div class="container-fluid mt-5">
  <div class="row">

    <div class="col-md-6 col-sm-12">
      <div class="card mb-3 bg-gri">
        <div class="row g-0">
          <div class="col-md-5 col-sm-8 order-md-1 order-sm-1">
            <div class="card-body">
              <h3 class="card-title">HABER BAŞLIĞI HABER BAŞLIĞI HABER BAŞLIĞI</h3>
            </div>
          </div>
          <div class="col-md-1 col-sm-1 order-md-2 order-sm-2 align-self-end">
            <div class="flex-container">
              <p>tıkla</p>
              <i class="fas fa-chevron-right"></i>
            </div>
          </div>
          <div class="col-md-6 col-sm-3 order-md-3 order-sm-3">
            <img src="https://placehold.co/600x400" class="img-fluid rounded-start" style="width: 100%; height: auto;">
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-6 col-sm-12">
      <div class="card mb-3 bg-gri">
        <div class="row g-0">
          <div class="col-md-5 col-sm-8 order-md-1 order-sm-1">
            <div class="card-body">
              <h3 class="card-title">HABER BAŞLIĞI HABER BAŞLIĞI HABER BAŞLIĞI</h3>
            </div>
          </div>
          <div class="col-md-1 col-sm-1 order-md-2 order-sm-2 align-self-end">
            <div class="flex-container">
              <p>tıkla</p>
              <i class="fas fa-chevron-right"></i>
            </div>
          </div>
          <div class="col-md-6 col-sm-3 order-md-3 order-sm-3">
            <img src="https://placehold.co/600x400" class="img-fluid rounded-start" style="width: 100%; height: auto;">
          </div>
        </div>
      </div>
    </div>

  </div>
</div>
Genişletmek için tıkla...

Sonuç değişmedi.

1710504558790.png


Kendi alanımızda herkese yardımcı olmaya çalışıyoruz, yardım istediğimizde kimse cevap vermiyor. Yazık gerçekten. Ben çözdüm sorunu, buraya da paylaşmıyorum. Konuya cevap veren arkadaşım teşekkürler yine de. Konu kilit, kolay gelsin.
 
Son düzenleme:
Artı 0 Eksi

Benzer konular

dogckr
  • Çözüldü
Çözüldü  Bootstrap-resim üstüne yazı nasıl yazılır?
Mesaj
2
Görüntüleme
3B
Berkay Davas
Berkay Davas
Zose
  • Soru
VS Code bootstrap kodlarını tahmin etmiyor
Mesaj
1
Görüntüleme
2B
Mirac Selim
Mirac Selim
M
Bootstrap düzenleme
Mesaj
2
Görüntüleme
4B
Mustafa_64
M
Zembla
Bootstrap ile tamamen esnek bir yapı nasıl oluşturulur?
Mesaj
2
Görüntüleme
362
uyildirim
uyildirim
SVF
Bootstrap kullanılmıyor
Mesaj
5
Görüntüleme
271
delikarga
delikarga

Yeni konular

Yeni mesajlar

Geri
Yukarı