I'm attempting to have a div append multiple other divs with the class "card" from Bootstrap, but instead of being created in a horizontal line, they are stacked on top of each other.
I have tried to modify the "card" class by adding display: inline-block, but unfortunately, it did not yield the desired result.
Here is my jQuery code:
let newCard = document.createElement("div");
newCard.className = "card";
$( ".cardsContain" ).append(newCard);
And here is the accompanying CSS:
.cardsContain{
width: 79%;
margin-left: 9%;
height: 100%;
}
.card{
display: inline-block;
background-image: url('img/facebook.png');
background-size: 100%;
width: 100px;
height: 100px;
}
The "cardsContain" div is responsible for appending each card.
Is there a way to display these cards in a single line as intended?