The Spectre Divider is used to create a divider between similar kinds of components if you design login and Signup on the page but want to divide them side by side vertically or horizontally, then we can do that.
Spectre Divider Class:
- divider: This class is used to divide the contents.
- divider-vert: This class is used to create a vertical divider between contents.
Spectre Divider attribute:
- data-content: This attribute holds the text value you want to show on the divider line.
Syntax:
<div class="divider"> .... </div>
- Element with text:
<div class="divider text-center" data-content="OR"> .... </div>
The below examples illustrate the Spectre Divider.
Example 1: In this article, we will see without text and with the text divider.
HTML
<!DOCTYPE html> < html >
< head >
< link rel = "stylesheet" href =
< link rel = "stylesheet" href =
< link rel = "stylesheet" href =
</ head >
< body >
< center >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< strong >Spectre Divider Class</ strong >
< br >
</ center >
< strong >Spectre CSS:</ strong >
< div class = "divider" ></ div >
< p >
Spectre is a lightweight, responsive,
and modern CSS framework, which
provides the extensible with faster
development. It facilitates the
responsive layout system based on
the flexbox property, along with
providing the basic elements &
typography stylings. It solves many
problems that we had once like the
cross-browser compatibility issue.
In the current scenario, the
websites are perfect for all the
browsers (IE, Firefox, and Chrome)
and for all sizes of screens
(Desktop, Tablets, Phablets, and Phones).
</ p >
< br >
< strong >Can Spectre Replace Bootstrap</ strong >
< p >
Spectre is much more lighter than the
Bootstrap but there are few drawback in
this frameworks. There are few classes
used in bootstrap that can not be done
in spectre. If you can avoid those
things then yes it can other wise not.
</ p >
<!-- divider element with text -->
< div class = "divider text-center" data-content = "OR" ></ div >
< strong >Can Spectre Replace Tailwind</ strong >
< p >
In my opinion, no, Spectre can not
replace the Tailwind. Tailwind CSS
is the future of designing of websites.
</ p >
</ body >
</ html >
|
Output:
Example 2: In this example, we will see the divider-vert class.
HTML
<!DOCTYPE html> < html >
< head >
< link rel = "stylesheet" href =
< link rel = "stylesheet" href =
< link rel = "stylesheet" href =
</ head >
< body >
< center >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< strong >Spectre Divider Class</ strong >
< br >
</ center >
<!-- vertical divider element with text -->
< div class = "columns" >
< div class = "column" >
< strong >Can Spectre Replace Bootstrap</ strong >
< p >
Spectre is much more lighter than the Bootstrap
but there are few drawback in this frameworks.
There are few classes used in bootstrap that
can not be done in spectre. If you can avoid those
things then yes it can other wise not.
</ p >
</ div >
< div class = "divider-vert" data-content = "OR" >
</ div >
< div class = "column" >
< strong >Can Spectre Replace Tailwind</ strong >
< p >
In my opinion no, Spectre can not replace
the Tailwind. Tailwind CSS is the future
of designing of websites.
</ p >
</ div >
</ div >
</ body >
</ html >
|
Output:
Reference: https://picturepan2.github.io/spectre/utilities/divider.html