CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-4bootstrap-4
JQuery Mobile
JQuery Mobile

Reputation: 6301

Bootstrap - Customizing Cards

I'm working on an app that uses the Bootstrap 4 Alpha. I'm trying to create some cards. I'm trying to recreate something that looks like a course card on this site. But, I'm trying to use the default bootstrap styling. In other words, I'm trying to create a card that looks like this:

+------------------------------------------------------------+
| [icon]                                          04.07.2016 |
+------------------------------------------------------------+
| intro                                                      |
| heading                                                    |
| a description that takes a couple of lines. It may         |
| have two or three lines of text and they'll wrap           |
| like this.                                                 |
|                                                            |
| [tag 1] [tag 2]                                            |
+------------------------------------------------------------+

I've been experimenting with recreating this here. The date isn't on the same line as the icon. My code looks like this:

<br>
<div class="container">
  <div class="card">
    <div class="card-header">
      <i class="fa fa-circle"></i>
      <div class="text-xs-right">04.07.2016</div>
    </div>
    <div class="card-block">
      <div class="text-muted">intro</div>
      <h4 class="card-title">Heading</h4>
      <p class="card-text"> a description that takes a couple of lines. It may have two or three lines of text and they'll wrap like this.</p>
      <ul class="list-inline text-muted">
        <li class="list-inline-item"><i class="fa fa-tag"></i> tag 1</li>
        <li class="list-inline-item"><i class="fa fa-tag"></i> tag 2</li>        
      </ul>
    </div>
  </div>
</div>

What am I doing wrong?

Upvotes: 2

Views: 4483

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362380

For Bootstrap 4 it would look like..

<div class="container">
  <div class="card">
    <div class="card-header">
      <i class="fa fa-circle"></i>
      <div class="pull-xs-right">04.07.2016</div>
    </div>
    <div class="card-block">
      <div class="text-muted">intro</div>
      <h4 class="card-title">Heading</h4>
      <p class="card-text"> a description that takes a couple of lines. It may have two or three lines of text and they'll wrap like this.</p>
      <ul class="list-inline text-muted">
        <li class="list-inline-item"><i class="fa fa-tag"></i> tag 1</li>
        <li class="list-inline-item"><i class="fa fa-tag"></i> tag 2</li>        
      </ul>
    </div>
  </div>
</div>

Updated Bootply: http://www.bootply.com/2EY9ZfMrdl

EDIT - As of BS4 alpha 6, pull-right has changed to float-right.

Upvotes: 2

G.L.P
G.L.P

Reputation: 7207

Try like this:

 <div class="card-header clearfix">
      <i class="fa fa-circle pull-left"></i>
      <div class="text-xs-right pull-right">04.07.2016</div>
    </div>

Upvotes: 0

Related Questions