0 Replies - 616 Views - Last Post: 29 July 2019 - 04:53 PM Rate Topic: -----

#1 jstanley6   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 54
  • Joined: 22-January 17

Regarding Bootstrap 4 Cards with a Django website

Posted 29 July 2019 - 04:53 PM

Hello, Ok I am building a website and using the Django framework, which I am not too familiar with. So I made bootstrap cards that get put together with a for loop that calls information out of the database and displays it on these cards, well I am trying to only make one card flip at a time to display information from that specific "Guild" on the back of the card. I am just having trouble with that part and these cards seem very sensitive because just to make them look right it took a lot of work. I can send images as well to show you what it is doing and I will paste the whole CSS into this thread instead of only the part that does the transitioning, and a little bit of JS is being used but everything seems to work it just flips everything as one whole container and if I try to move anything the cards break and I end up having to redo what I already have.. Any help on this would be awesome..Here is the code starting with the HTML:

% extends "base.html" %}
{% block body_block %}
    {% include "navbar.html" %}

    <div class="container flip-container">
<div class="card-columns flipper">
{% for guild in guildinfo %}
  <div class="card col-xs-12">
    <img class="card-img-top img-thumbnail" src="{{ guild.guild_logo.url }}" alt="{{ guild.guild_name }}">
    <div class="card-body">
      <h5 class="card-title">{{ guild.guild_name }}</h5>
      <p class="card-text">{{ guild.guild_desc }}</p>
    </div>
  <div class="card back">
    <p>Testing</p>

        </div>
  </div>
{% endfor %}

</div>
    </div>

{% endblock %}



CSS
body {
    background-color: #cccccc;

}

.contentCSS {
      margin:50px 0;
    padding:0;
    text-align:center;
     -webkit-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
        box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
}

h1 {
    color: red;
}

a {
    color: red;
}

#logo {
    position: absolute;
    width: 30%;
    max-height: 70%; /* height of the navbar */

}

.card {
    width: 100%;
    height: 100%;
}

.navbar-brand {
    display: flex;
    align-items: center;

}

.navbar {
    margin-bottom: 10%;
}

.guildLogos {
     max-width: 5%;
   height: auto;
}

.flip-container.hover .flipper {
    transform: rotateY(180deg);
}


/* flip speed */

.flipper {
    transition: 0.8s;
    transform-style: preserve-3d;
    position: relative;
}


/* hide back of pane during swap */

.back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}


/* front pane, placed above back */

.front {
    z-index: 2;
    transform: rotateY(0deg);
    backface-visibility: hidden;
}


/* back, initially hidden pane */

.back {
    transform: rotateY(180deg);
    background-color: #fff;
}


@media (min-width: 34em) {
    .card-columns {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}

@media (min-width: 48em) {
    .card-columns {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}

@media (min-width: 62em) {
    .card-columns {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }
}

@media (min-width: 75em) {
    .card-columns {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }
}



Thank you for looking at it. Like I said I can also post images of what it looks like right now if needed

Is This A Good Question/Topic? 0
  • +

Page 1 of 1