Dionext software development notes

Bootstrap

Overview

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains HTML, CSS and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components. https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)

Official site: https://getbootstrap.com/

Installation

Include via CDN

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

Bootstrap uses modern CSS and HTML developments, so you need to be careful when supporting older browsers. Supported browsers https://getbootstrap.com/docs/5.3/getting-started/browsers-devices/

Themes

https://themes.getbootstrap.com/guide/ Guide

Bootstrap Themes Shops

https://themes.getbootstrap.com/

https://themeforest.net/ (Envato Market)

https://startbootstrap.com/

https://themewagon.com/theme-category/admin-dashboard/?swoof=1&pa_price=free&paged=1&pa_frameworks=bootstrap-5&really_curr_tax=15-product_cat (Filter: free admin themes for bootstrap 5)

Examples

https://prium.github.io/phoenix/v1.20.1/index.html from $39

https://themesbrand.com/velzon/spring-boot.html from $25

https://www.creative-tim.com/product/material-dashboard free (pro from $79)

https://adminlte.io/ free

https://keenthemes.com/metronic/bootstrap from $49

Tutorial

Text

<p class="display-2"> But, wait... </p> 

<p class="text-justify">How is it that you have no ears </p> <p class="font-weight-bold"> How sad, Mr Bunny </p>

<p class="font-italic">See him hop, hop, hop about on legs so very strong.</p>

<strong class="font-weight-normal"> But ears, he has none </strong>

Quotes

<figure>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

https://getbootstrap.com/docs/5.0/content/typography/#blockquotes

https://mdbootstrap.com/docs/standard/extended/quotes/

Lists

<ul class="list-unstyled">  
	<li>Thank you</li>  
	<li>Muchas Gracias</li> 
	<li>Merci</li>
</ul>


<ul class="list-inline"> 
	<li class="list-inline-item">Thank you</li> 
	<li class="list-inline-item">Muchas Gracias</li>
	<li class="list-inline-item">Merci</li>
</ul>

Colors


<p class="text-secondary">Hello World</p>
<p class="text-success">Hello World</p>
<p class="text-danger">Hello World</p>
<p class="text-warning">Hello World</p>
<p class="text-info">Hello World</p>
<p class="text-light">Hello World</p>
<p class="text-dark">Hello World</p>

Picture


<img src="https://static.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg" class="img-fluid"/>
<img src="..." alt="..." class="img-thumbnail">

Picture with text https://getbootstrap.com/docs/4.0/content/figures/


<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>

https://bootsnipp.com/snippets/9jA https://bootsnipp.com/snippets/92e5X


<img src="https://static.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg"     class="img-fluid rounded"/>

img {   border-radius: 50px } 


<img src="https://static.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg"     class="img-fluid rounded-circle"/> 
<img src="https://static.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg"       class="rounded-circle float-left"/>

Centered


<div class="text-center">   <img src="https://static.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg" class="rounded img-restricted"/>
</div>

Video


<div class="embed-responsive embed-responsive-16by9"> <iframe 
	class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" 
	allowfullscreen></iframe> 
</div>

Layout

https://getbootstrap.com/docs/5.0/layout/containers/


<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div> 
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div> 
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div> 
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>

Cards

https://getbootstrap.com/docs/5.0/components/card/

.page-header h1 {
  margin-top: 0px;
}
.page-header {
  height: 60px;
  margin-top: 0px;
  background-size: cover;
  background-image: url(some/parth/to/image);
}

<div class="page-header">
  <h1 class="text-primary">My awesome page header</h1>
</div>

https://www.geeksforgeeks.org/how-to-change-navigation-bar-color-in-bootstrap/ Colors

Code

https://getbootstrap.com/docs/4.0/content/code/#inline-code

https://www.geeksforgeeks.org/how-to-display-code-with-bootstrap/

Additional libraries

Lightbox (ekko-lightbox) is a JavaScript library that displays images and videos by filling the screen, and dimming out the rest of the web page

Note: For bootstrap 5 use https://trvswgnr.github.io/bs5-lightbox/

Using in Spring Boot projects

https://www.youtube.com/watch?v=u0uO5Q0GcM4 4 ways to use Bootstrap in Spring Boot

References

Countries flag css https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.1.0/css/flag-icon.min.css https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.1.0/flags/4x3/fr.svg

https://www.quackit.com/bootstrap/bootstrap_4/tutorial/ Bootstrap 4 Tutorial

https://proglib.io/p/bootstrap-4-part-1/ https://proglib.io/p/bootstrap-4-grid/ Bootstrap 4 Tutorial

Migrating to v5 https://getbootstrap.com/docs/5.0/migration/ https://getbootstrap.com/docs/5.0/components/navbar/

Interesting themes: