Bootstrap card bg-dark not working with react

Question

I am using react and trying to use the dark background cards in bootstrap, but they are not showing up. I will show you what my code is and what I am seeing.

I have tried the normal card and it seems to work just fine, but for some reason this does not. Also the card is not formatted correctly here either, when I used the original they were formatted just fine.

UPDATE: from messing around more it seems like a lot of the styling is working, if I add an image it does not format it correctly either. I am also using the card-deck div and it is not formatting that correctly at all, neither the card-footer

What I am seeing:

Here is the code:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import swal from 'sweetalert2/dist/sweetalert2.all.min.js';
import { Link } from 'react-router-dom';

import { CreatePost } from '../view';
import { Account } from '../containers';
import actions from '../../actions';

class Posts extends Component {
  componentDidMount() {
    if (this.props.post.all == null) {
      this.props
        .fetchPosts({})
        .then(response => {})
        .catch(err => {
          console.log(err);
        });
    }
  }

  createPost(params) {
    const { currentUser } = this.props.user;
    if (currentUser == null) {
      swal({
        title: 'Oops...',
        text: 'Please Login or Register before posting',
        type: 'error'
      });
      return;
    }

    const updated = Object.assign({}, params, { profile: currentUser });

    this.props
      .createPost(updated)
      .then(data => {
        swal({
          title: 'Post Created',
          text: `Title: ${data.title}`,
          type: 'success'
        });
      })
      .catch(err => console.log(err));
  }

  render() {
    const posts = this.props.post.all;

    const { currentUser } = this.props.user;
    return (
      <div>
        <h1>Posts</h1>
        <div className="row">
          <div className="col-sm-8">
            <div className="card-deck">
              {posts == null
                ? null
                : posts.map(post => {
                    return (
                      <div key={post.id} className="card text-white bg-dark mb-3">
                        <img className="card-img-top" src="..." alt="Card image cap" />
                        <div className="card-body">
                          <h4 className="card-title">Card title</h4>
                          <p className="card-text">
                            This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit
                            longer.
                          </p>
                        </div>
                        <div className="card-footer">
                          <small className="text-muted">Last updated 3 mins ago</small>
                        </div>
                      </div>
                    );
                  })}
            </div>
          </div>
          <div className="col-sm-4">
            <Account />
            {currentUser == null ? null : (
              <div>
                <h3>Create a Post</h3>
                <CreatePost onCreate={this.createPost.bind(this)} />
              </div>
            )}
          </div>
        </div>
      </div>
    );
  }
}

const stateToProps = state => {
  return {
    post: state.post,
    user: state.user
  };
};

const dispatchToProps = dispatch => {
  return {
    createPost: params => dispatch(actions.createPost(params)),
    fetchPosts: params => dispatch(actions.fetchPosts(params))
  };
};

export default connect(stateToProps, dispatchToProps)(Posts);

Answer 1

You might want to try the react-bootstrap npm module: https://react-bootstrap.github.io/

I am not sure if they have Cards, though. If not, you can try this, which is another alternative that has Cards built in: https://reactstrap.github.io/