Questions #Tagged [css]

Questions: 4

How to create card deck using bootstrap?

Each card in card deck has equal width and height and are not attached to each other. Below is the sample code snippet to create card deck:<br> <pre><xmp><div class="card-deck"> <div class="card"> <img src="images/example.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is testfry.com site.</p> </div> <div class="card-footer"> <small class="text-muted">Last updated 3 mins ago</small> </div> </div> <div class="card"> <img src="images/example.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is testfry.com site.</p> </div> <div class="card-footer"> <small class="text-muted">Last updated 3 mins ago</small> </div> </div> <div class="card"> <img src="images/example.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is testfry.com site.</p> </div> <div class="card-footer"> <small class="text-muted">Last updated 3 mins ago</small> </div> </div> </div></xmp></pre>

 

#bootstrap     #html     #css    

How to create shadow effect for DIV tag using CSS?

Box-shadow attribute can be used to create shadow effect for DIV tag in CSS. Shadow length and thinckness can be changed by tweaking its parameters. Below is the code snippet:<br> <pre><xmp>.div_test { box-shadow: 0 2px 9px 0 rgba(0,0,0,0.1);</xmp></pre>

 

#html     #css    

How to create website page where content will load automatically after every page scroll?

We can achieve this by using "scroll" event listener where callback function checks if scroll position is near the end of the page then it will load more content. Below is the code snippet:<br> <pre><xmp><html> <style> .container>div { min-height: 40px; } </style> <body> <div class="container"> <div>1</div> <div>2</div> </div> <script> window.addEventListener("scroll", function () { var el = document.querySelector(".container"); if (el.scrollTop + el.offsetHeight > el.scrollHeight - 300) { console.log("Load more...") } }) </script> </body> </html></xmp></pre>

 

#html     #css     #javascript     #function    

How can we create grid panel using CSS?

In CSS we can use minmax() function to create grid panel effect. The minmax() CSS function defines a size range greater than or equal to min and less than or equal to max . The minmax() function accepts two parameters, a minimum value and a maximum value.<br> <pre>minmax(min, max)</pre> Below code can be used to create grid panel:<br> <pre><xmp>CSS: body { margin: 40px; } .wrapper { display: grid; grid-gap: 10px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr) ) ; background-color: #fff; color: #444; } .grid { background-color: #444; color: #fff; border-radius: 5px; padding: 15px; font-size: 150%; } HTML: <div class="wrapper"> <div class="grid">A</div> <div class="grid">B</div> <div class="grid">C</div> <div class="grid">D</div> </div> </xmp></pre>

 

#html     #css