DEV Community

loading...
Cover image for Day 16 of #100DaysOfCode: Design a Layout for Articles with Bootstrap Card

Day 16 of #100DaysOfCode: Design a Layout for Articles with Bootstrap Card

jenhsuan profile image Jen-Hsuan Hsieh ・2 min read

Introduction

For card style's design, we can use CSS Grid as I mentioned on Day 1.
Alt Text
Alt Text

However, we have to use Media query to complete the layout for the mobile version. One of advantages for using Bootstrap Card is that we don't have to write Media query additionally.

Implementations

Code

  • HTML
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="views/js/articles.js" ></script>
...
<div class="container">
    <div id="medium" class="row item"></div>
</div>
Enter fullscreen mode Exit fullscreen mode
  • JavaScript (append child nodes dynamically by AJAX)
...
function appendArticleChild(ele) {
    var div = document.createElement('div');
    div.className = 'col-md-6 col-xs-12'

    var card = document.createElement('div');
    card.className = 'card'

    var cardBody = document.createElement('div');
    cardBody.className = 'card-body'

    var cardTitle = document.createElement('h1');
    cardTitle.className = 'card-title'

    var cardBlock = document.createElement('div');
    cardBlock.className = 'card-block'

    cardBody.appendChild(cardTitle)
    cardBody.appendChild(cardBlock)
    card.appendChild(cardBody)
    div.appendChild(card)

}
Enter fullscreen mode Exit fullscreen mode

Articles

There are some of my articles. Feel free to check if you like!

Discussion (0)

pic
Editor guide