Bulma breadcrumbs

Developer
Dzulfikar Adi Putra
Size
1,895 Kb
Views
50,600
  1. Bulma breadcrumbs Previews
  2. Bulma breadcrumbs HTML Codes
  3. Bulma breadcrumbs CSS Codes

How do I make an bulma breadcrumbs?

Simple bulma breadcrumbs. What is a bulma breadcrumbs? How do you make a bulma breadcrumbs? This script and codes were developed by Dzulfikar Adi Putra on 31 October 2022, Monday.

Bulma breadcrumbs Previews
IQ Test

Bulma breadcrumbs - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bulma breadcrumbs</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="app" class="container"> <div class="columns"> <div class="column is-8 is-offset-2"> <h1 class="title">Bulma Breadcrumb</h1> <p>Inspired by <a class="mylink" href="http://bulma.io/documentation/elements/box/">Bulma's Box</a> & <a class="mylink" href="https://getbootstrap.com/components/#breadcrumbs">Bootstrap's Breadcrumb</a></p> <br /> <ul class="breadcrumb"> <li><a href="#">Files</a></li> <li><a href="#">folder-1</a></li> <li class="is-active">folder-1-children</li> </ul> </div> </div>
</div>
</body>
</html>

Bulma breadcrumbs - Script Codes CSS Codes

body{ background: #3FB8AF;
}
a.mylink{ color: #fff;
}
#app{ padding-top:50px; height:100vh;
}
ul.breadcrumb{ outline-style: none; box-shadow: 0 2px 3px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1); display: block; padding: 0.75rem; background: #fff;
}
ul.breadcrumb li{ display: inline-block;
}
ul.breadcrumb li.is-active{ color: #848484;
}
ul.breadcrumb>li+li:before { padding: 0 5px; color: #848484; content: "/\00a0";
}
ul.breadcrumb li a:hover{ text-decoration: underline;
}
Bulma breadcrumbs - Script Codes
Bulma breadcrumbs - Script Codes
Home Page Home
Developer Dzulfikar Adi Putra
Username superpikar
Uploaded October 31, 2022
Rating 3
Size 1,895 Kb
Views 50,600
Do you need developer help for Bulma breadcrumbs?

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!

Dzulfikar Adi Putra (superpikar) Script Codes
Name
A Pen by Dzulfikar Adi Putra
SVG Animation Follow Path - d3js
D3JS Simple JSON SVG barchart vertical
Image Map
D3js animation along path
Expand and collapse element using jquery expander
Force Layout Directed Graph using dot engine dagre-d3js library, data from JSON
Ionic tabs in the middle of the screen
Centering Image and Icon in Semantic-UI card
D3JS Simple JSON SVG barchart vertical with Axis
Create amazing captions 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!