CODEWITHSUNDEEP
htmlcss
VitorZF
VitorZF

Reputation: 13

How can i fix it? Card out of DIV

I'm trying to list side by side an anime list with images and name on a card, but the DIV ends and the image ignores and continues, how can I solve this?

URL: Here

Image: The image

css: 

.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    min-width: 199px;
    max-width: 200px;
    float:left;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-left:5px;
    margin-top:10px;
}

HTML: 

<div class="container">
    <div class="card">
    <button class="btn btn-success add" onclick="novoEpisodio(85)"><span class="fa fa-plus"></span> Adicionar Episódio</button>
                <img onclick="escolherAnime(85)" src="https://4.bp.blogspot.com/-TYMOypUwSGI/WcqOASxepZI/AAAAAAAAK2w/-_V0RHPcEj8d0IO79AyUf2oUFTRRa3TjgCLcBGAs/s1600/Black-Clover-anime-poster-visual-v1.jpg" style="min-width:199px; max-width:200px; min-height:299px; max-height: 300px;">
                <div class="container">
                  <h4><b>Black Clover</b>

                  </h4>

                </div>
                 </div>

Upvotes: -1

Views: 712

Answers (1)

Millhorn
Millhorn

Reputation: 3176

First of all, you're site's Bootstrap version is out of date with the HTML syntax you're using. Cards replaced panels from Bootstrap 3. You're using Bootstrap 3, view here which uses panels.

A lot of things changed between Bootstrap 3 and 4. I highly recommend you go with Bootstrap 4. Additionally, your HTML syntax doesn't line up with the traditional layout. 

container > row > column > card

Here is a Codepen you can fork and play with.

Here is an example of what you need using Bootstrap 4. 

/* Roboto Font */
@import url('https://fonts.googleapis.com/css?family=Roboto');

html, body {
  height: 100%;
}

body {
  font-family: 'Roboto', sans-serif;
}


/* Custom CSS */
.text-strong {
  font-weight: bold;
}

.card-body {
  padding: .5rem;
}

.card-title {
  margin: 0;
}

.card {
  border: 2px dashed black;
  box-shadow: 0px 10px 20px rgba(150,150,150,.5);
}

.card:hover {
  box-shadow: 0px 10px 20px  rgba(60, 141, 188,0.5);
}
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js'></script>

<div class="container-fluid p-5">
  <div class="row no-gutters">
    <div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
      <div class="card">
        <img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
        <div class="card-body">
          <h5 class="card-title text-strong">Bleach</h5>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
      <div class="card">
        <img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
        <div class="card-body">
          <h5 class="card-title text-strong">Black Clover</h5>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
      <div class="card">
        <img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
        <div class="card-body">
          <h5 class="card-title text-strong">Boku dake ga in...</h5>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
      <div class="card">
        <img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
        <div class="card-body">
          <h5 class="card-title text-strong">Dragon Ball Super</h5>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
      <div class="card">
        <img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
        <div class="card-body">
          <h5 class="card-title text-strong">Nanatsu no Taizai</h5>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
      <div class="card">
        <img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
        <div class="card-body">
          <h5 class="card-title text-strong">Naruto Shippuden</h5>
        </div>
      </div>
    </div>    
  </div>
</div>

Upvotes: 1

Related Questions