Nested flexbox layout for library catalog v2

Developer
Martin Boyce
Size
3,409 Kb
Views
24,288
  1. Nested flexbox layout for library catalog v2 Previews
  2. Nested flexbox layout for library catalog v2 HTML Codes
  3. Nested flexbox layout for library catalog v2 CSS Codes

How do I make an nested flexbox layout for library catalog v2?

What is a nested flexbox layout for library catalog v2? How do you make a nested flexbox layout for library catalog v2? This script and codes were developed by Martin Boyce on 20 September 2022, Tuesday.

Nested flexbox layout for library catalog v2 Previews
IQ Test

Nested flexbox layout for library catalog v2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>nested flexbox layout for library catalog v2</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container-fluid"> <h2>Result List</h2> <div class="briefcit-list"> <div class="panel panel-default briefcit-item"> <div class="panel-body"> <div class="briefcit-num"> <a name="anchor_1"></a> 1 </div> <div class="briefcit-detail"> <h3 class="panel-title"><a href="#">The last American man</a></h3> <p>Elizabeth Gilbert.</p> <p>Book</p> <p class="hidden-xs">2 copies available at Engadine Biography collection and Sutherland Biography collection.</p> <p class="hidden-xs"><a href="#">Show Full Details</a></p> </div> <div class="briefcit-jacket"> <a href="#"><img src="http://lorempixel.com/170/240/abstract" /></a> </div> </div> <div class="panel-footer"> <div class="primary-actions visible-xs"><a href="#" class="btn btn-primary btn-sm">Check Availability</a></div> <div class="secondary-actions"><a class="btn btn-default btn-sm" href="#">Add to basket</a> <a class="btn btn-default btn-sm" href="#">Place hold</a></div> </div> </div> <div class="panel panel-default briefcit-item"> <div class="panel-body"> <div class="briefcit-num"> <a name="anchor_2"></a> 2 </div> <div class="briefcit-detail"> <h3 class="panel-title"><a href="#">Big magic: creative living beyond fear</a></h3> <p>Elizabeth Gilbert ; read by Elizabeth Gilbert.</p> <p>eAudio</p> <p class="hidden-xs"><a href="#">Show Full Details</a></p> </div> <div class="briefcit-jacket"> <a href="#"><img src="http://lorempixel.com/220/240/people"/></a> </div> </div> <div class="panel-footer"> <div class="primary-actions visible-xs"><a href="#" class="btn btn-primary btn-sm">Check Availability</a></div> <div class="secondary-actions"><a class="btn btn-default btn-sm" href="#">Add to basket</a> <a class="btn btn-default btn-sm" href="#">Place hold</a></div> </div> </div> <div class="panel panel-default briefcit-item"> <div class="panel-body"> <div class="briefcit-num"> <a name="anchor_3"></a> 3 </div> <div class="briefcit-detail"> <h3 class="panel-title"><a href="#">Eat, pray, love one woman's search for everything across Italy, India and Indonesia</a></h3> <p>Elizabeth Gilbert.</p> <p>eBook</p> <p class="hidden-xs"><a href="#">Show Full Details</a></p> </div> <div class="briefcit-jacket"> <a href="#"><img src="http://lorempixel.com/170/240/food"/></a> </div> </div> <div class="panel-footer"> <div class="primary-actions visible-xs"><a href="#" class="btn btn-primary btn-sm">Check Availability</a></div> <div class="secondary-actions"><a class="btn btn-default btn-sm" href="#">Add to basket</a> <a class="btn btn-default btn-sm" href="#">Place hold</a></div> </div> </div> <div class="panel panel-default briefcit-item"> <div class="panel-body"> <div class="briefcit-num"> <a name="anchor_4"></a> 4 </div> <div class="briefcit-detail"> <h3 class="panel-title"><a href="#">The signature of all things</a></h3> <p>Elizabeth Gilbert.</p> <p>eBook</p> <p class="hidden-xs"><a href="#">Show Full Details</a></p> </div> <div class="briefcit-jacket"> <a href="#"><img src="http://lorempixel.com/170/240/people"/></a> </div> </div> <div class="panel-footer"> <div class="primary-actions visible-xs"><a href="#" class="btn btn-primary btn-sm">Check Availability</a></div> <div class="secondary-actions"><a class="btn btn-default btn-sm" href="#">Add to basket</a> <a class="btn btn-default btn-sm" href="#">Place hold</a></div> </div> </div> <div class="panel panel-default briefcit-item"> <div class="panel-body"> <div class="briefcit-num"> <a name="anchor_25"></a> 25 </div> <div class="briefcit-detail"> <h3 class="panel-title"><a href="#">100 things every artist should know : the artists of Walter Foster</a></h3> <p>[Elizabeth Gilbert, project editor].</p> <p>Book</p> <p class="hidden-xs">1 copy available at Engadine Non-fiction.</p> <p class="hidden-xs"><a href="#">Show Full Details</a></p> </div> <div class="briefcit-jacket"> <a href="#"><img src="http://lorempixel.com/170/240/technics"/></a> </div> </div> <div class="panel-footer"> <div class="primary-actions visible-xs"><a href="#" class="btn btn-primary btn-sm">Check Availability</a></div> <div class="secondary-actions"><a class="btn btn-default btn-sm" href="#">Add to basket</a> <a class="btn btn-default btn-sm" href="#">Place hold</a></div> </div> </div> <div class="panel panel-default briefcit-item"> <div class="panel-body"> <div class="briefcit-num"> <a name="anchor_129"></a> 129 </div> <div class="briefcit-detail"> <h3 class="panel-title"><a href="#">Committed : a sceptic makes peace with marriage</a></h3> <p>Elizabeth Gilbert.</p> <p>Book</p> <p class="hidden-xs">1 copy available at Miranda Biography collection.</p> <p class="hidden-xs"><a href="#">Show Full Details</a></p> </div> <div class="briefcit-jacket"> <a href="#"><img src="http://lorempixel.com/170/240/fashion"/></a> </div> </div> <div class="panel-footer"> <div class="primary-actions visible-xs"><a href="#" class="btn btn-primary btn-sm">Check Availability</a></div> <div class="secondary-actions"><a class="btn btn-default btn-sm" href="#">Add to basket</a> <a class="btn btn-default btn-sm" href="#">Place hold</a></div> </div> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
</body>
</html>

Nested flexbox layout for library catalog v2 - Script Codes CSS Codes

.briefcit-list { max-width: 800px; margin: 0 auto;
}
.panel-body { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 4px; position: relative;
}
.briefcit-jacket { margin-right: 8px; width: 70px; min-height: 100px; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1;
}
.briefcit-jacket img { max-width: 100%;
}
@media (min-width: 768px) { .briefcit-jacket { width: 120px; min-height: 170px; }
}
.briefcit-num { position: absolute; top: 8px; left: 8px; padding: 1px 5px; border-radius: 2px; background-color: #fff; opacity: 0.75; font-size: 0.75em;
}
.briefcit-detail { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2;
}
.briefcit-detail .panel-title { font-weight: 600;
}
.panel-footer { padding: 0; background-color: #D9EDF7; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-flow: column nowrap; flex-flow: column nowrap;
}
.panel-footer a { width: 100%;
}
@media (min-width: 480px) { .panel-footer { -ms-flex-flow: row nowrap; flex-flow: row nowrap; padding: 4px; }
}
@media (min-width: 768px) { .panel-footer { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
}
.secondary-actions { display: none;
}
@media (min-width: 480px) { .secondary-actions { display: -webkit-box; display: -ms-flexbox; display: flex; } .secondary-actions a { margin-left: 6px; }
}
Nested flexbox layout for library catalog v2 - Script Codes
Nested flexbox layout for library catalog v2 - Script Codes
Home Page Home
Developer Martin Boyce
Username boycetrus
Uploaded September 20, 2022
Rating 3
Size 3,409 Kb
Views 24,288
Do you need developer help for Nested flexbox layout for library catalog v2?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Martin Boyce (boycetrus) Script Codes
Name
Test Case for ajax fail on single result v2
Using Google Spreadsheets as JSON Source
Sutherland Shire Libraries Catalogue Search
Google Analytics Event Tracking using html5 data attributes
AJAX content from an RSS feed using jQuery
Scratchpad
Nested flexbox layout for library catalog
Flexbox login form
Flexbox horozontal scrolling booklist
Google Maps API test
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!