Tag: CSS/UI

Let’s build a dismissible card without any custom JavaScript and only with Bootstrap CSS classes.

the combination of card-header, the Bootstrap 4 Close Icon and negative margins (here .mt-n5) on the card-body. The close icon gets nicely positioned within the card-header and the negative margins pull the card content closer into the header area.

<div class="container">
  <div id="closeablecard" class="card card-hover-shadow mt-4">
    <div class="card-header bg-transparent border-bottom-0">
      <button data-dismiss="alert" data-target="#closeablecard" type="button" class="close" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="card-body mt-n5">
      <h5 class="card-title">Your Title</h5>
      <p class="card-text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem recusandae voluptate porro suscipit numquam distinctio ut. Qui vitae, ut non inventore necessitatibus quae doloribus rerum, quaerat commodi, nemo perferendis ab.
      </p>
      <a href="#" class="card-link">Card link</a>
      <a href="#" class="card-link">Another link</a>
    </div>
  </div>
</div>

To actually close the card we can make use of the BS4 Data-API and put the the following data attributes in the button tag: data-dismiss="alert" data-target="#closeablecard". data-target is the ID of our card and data-dismiss=alert triggers the actual close event in Bootstrap.

For BS5, make changes to data-* attributes. see below;

<button data-bs-dismiss="alert" data-bs-target="#closeablecard" type="button" class="close float-end" aria-label="Close">
    <span aria-hidden="true">&times;</span>
</button>

See a Demo on JSFiddle…

References

https://stackoverflow.com/questions/43970878/how-to-add-close-button-to-bootstrap-card

https://stackoverflow.com/questions/23873005/hide-div-by-default-and-show-it-on-click-with-bootstrap

Here is the list;

BASIS OF	BOOTSTRAP 4	BOOTSTRAP 5
Grid System	It has 5 tier (xs, sm, md, lg, xl).	It has 6 tier (xs, sm, md, lg, xl, xxl).
Color	It has limited colors.	Extra colors added with the looks, A card improved color palette. there are various shades available to choose.
Jquery	It has jquery and all related plugins.	Jquery is removed and switched to vanilla JS with some working plugins
Internet Explorer	Bootstrap 4 supports both IE 10 and 11.	Bootstrap 5 doesn’t support IE 10 and 11.
Form elements	Radio buttons, checkboxes have different look in different OS and browsers. The form uses whatever default browsers provide.	The look of form elements will not change, on different OS or browser. The forms can be customized and form controls can be added, they would not depend on browser.
Utilities API	We cannot modify utilities in bootstrap 4	Bootstrap 5 gave freedom to modify and also create our own utility
Gutter	We use .glutter with fontsize in px	We use .g* with fontsize in rem
Vertical Classes	Columns can be positioned relative	Columns cannot be positioned relative
Bootstrap Icons	Bootstrap 4 doesn’t have its own SVG icons, we have to use font-awesome for icons.	Bootstrap 5 have its own SVG icons
Jumbotron	It supports.	It doesn’t support jumbotron.
Card deck	The card deck is used to create a set of cards with equal width and height.	Card deck class in removed in bootstrap
Navbar	We have inline-block property and we will get white dropdown as default for dropdown-menu-dark class.	Inline-block property is removed and we will get black dropdown as default for dropdown-menu-dark class.
Static Site Generator	Bootstrap 4 uses Jekyll software.	Bootstrap 5 uses Hugo software as it is fast static site generator.
flexbox grid	this makes easier to implement vertical designs, and the columns and rows can easily be implemented. the classes justify-center-content can directly be used to align according to the requirement.	advanced grid system is made available , also columns don’t have relative positions.
RTL Support	It does not enable RTL(Right to Left) switching.	It enables RTL(Right to Left) switching.
Offcanvas Component	It does not support Offcanvas Component.	It supports Offcanvas Component(that is it is available now).

Reference

https://jekyllrb.com/

https://gohugo.io/

Ever wonder, what is SVG path?

A path represents the outline of a shape which can be filled or stroked. A path can also be used as a clipping path, to describe animation, or position text. A path can be used for more than one of these functions at the same time. (See Filling, Stroking and Paint Servers, Clipping and Masking, Animation (‘animateMotion’), and Text on a Path.)

A path is described using the concept of a current point. In an analogy with drawing on paper, the current point can be thought of as the location of the pen. The position of the pen can be changed, and the outline of a shape (open or closed) can be traced by dragging the pen in either straight lines or curves.

Microsoft Expression Design has a handy feature of Edit->Copy Xml that copies the path data of the shape to clipboard. This data can be used like this;

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Expression Web and HTML5</title>
</head>

<body>
    
<svg width="228px" height="253px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
    fill="none"
    stroke="red"
    d="M 10,30
       A 20,20 0,0,1 50,30
       A 20,20 0,0,1 90,30
       Q 90,60 50,90
       Q 10,60 10,30 z" />
</svg>

<svg width="228px" height="253px" viewBox="0 0 228 253">
    <desc>Yellow banana demonstrating path data syntax.</desc>

<g class="banana">
      <path fill="none" stroke="#f7c562" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" d="    M8.64,223.948c0,0,143.468,3.431,185.777-181.808c2.673-11.702-1.23-20.154,1.316-33.146h16.287c0,0-3.14,17.248,1.095,30.848
      c21.392,68.692-4.179,242.343-204.227,196.59L8.64,223.948z" />
      <path fill="none" stroke="#f7c562" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" d="    M8.767,230.326c0,0,188.246,40.154,196.485-160.139" />
    </g>
  </svg>

</body>

</html>

Here is the output;

Amazing…

Reference

https://www.w3.org/TR/SVG2/paths.html

https://www.codeproject.com/Articles/237451/Using-the-Copy-XAML-Feature-in-Expression-Design-t

https://www.sitepoint.com/closer-look-svg-path-data/

Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user interface for using select inputs with the multiple attribute present. Instead of a select a bootstrap button will be shown w dropdown menu containing the single options as checkboxes.

Read more by clicking on below link;

https://davidstutz.github.io/bootstrap-multiselect/

Here is the Git repo for download

Here is a discussion about this;

https://stackoverflow.com/questions/37051697/why-did-bootstrap-4-choose-rem-and-em-instead-px