DEV Community

Cover image for Day 16 of #100DaysOfCode: Design a Layout for Articles with Bootstrap Card
Jen-Hsuan Hsieh
Jen-Hsuan Hsieh

Posted on

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

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 ```HTML

...

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
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)

}


</code></pre></div><h2>
  <a name="articles" href="#articles">
  </a>
  Articles
</h2>

<p>There are some of my articles. Feel free to check if you like! </p>

<ul>
<li>My blog-posts for software developing: <a href="https://medium.com/a-layman">https://medium.com/a-layman</a>
</li>
<li>My web resume: <a href="https://jenhsuan.github.io/ALayman/cover.html">https://jenhsuan.github.io/ALayman/cover.html</a>
</li>
<li>Facebook page: <a href="https://www.facebook.com/imalayman">https://www.facebook.com/imalayman</a>
</li>
</ul>
Enter fullscreen mode Exit fullscreen mode
Enter fullscreen mode Exit fullscreen mode

Top comments (0)