Los elementos de Bootstrap en Ekiline. < Volver

Contents

Typography

Documentation

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a lead paragraph. It stands out from regular paragraphs.

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

A well-known quote, contained in a blockquote element.

Someone famous in Source Title
  • This is a list.
  • It appears completely unstyled.
  • Structurally, it’s still a list.
  • However, this style only applies to immediate child elements.
  • Nested lists:
    • are unaffected by this style
    • will still show a bullet
    • and have appropriate left margin
  • This may still come in handy in some situations.
  • This is a list item.
  • And another one.
  • But they’re displayed inline.

Images

Documentation
PlaceholderResponsive image
A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera200×200

Tables

Documentation
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Class Heading Heading
Default Cell Cell
Primary Cell Cell
Secondary Cell Cell
Success Cell Cell
Danger Cell Cell
Warning Cell Cell
Info Cell Cell
Light Cell Cell
Dark Cell Cell
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Figures

Documentation
Placeholder400×300
A caption for the above image.

Forms

Overview

Documentation
We’ll never share your email with anyone else.
Radios buttons

Disabled forms

Documentation
Disabled select
Disabled radios buttons

Sizing

Documentation
Open this select menu One Two Three
Open this select menu One Two Three

Input group

Documentation
@
@example.com
https://example.com/users/
$ .00
With textarea

Validation

Documentation
Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Choose… …
Please select a valid state.
Please provide a valid zip.
You must agree before submitting.

Components

Accordion

Documentation

This is the first item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Alerts

Documentation

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Primary Secondary Success Danger Warning Info Light Dark

Buttons

Documentation
PlaceholderImage cap
Card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Go somewhere
Featured
Card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Go somewhere
Card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

  • An item
  • A second item
  • A third item
PlaceholderImage
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Popovers

Documentation

Scrollspy

Documentation

First heading

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Second heading

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Third heading

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Fourth heading

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Fifth heading

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Spinners

Documentation
Loading…
Loading…
Loading…
Loading…
Loading…
Loading…
Loading…
Loading…
Loading…
Loading…
Loading…
Loading…
Loading…
Loading…
Loading…
Loading…

Toasts

Documentation

Tooltips

Documentation
<!– <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="Tooltip with HTML«>Tooltip with HTML –>
body{scroll-behavior:smooth;} .bd-heading a::before{display:inline-block;width:1em;height:1em;margin-right:.25rem;content:»»;background-image:url(«data:image/svg+xml,%3Csvg xmlns=’http://www.w3.org/2000/svg’ fill=’%25230d6efd’ viewBox=’0 0 16 16’%3E%3Cpath d=’M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z’/%3E%3Cpath d=’M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2z’/%3E%3Cpath fill-rule=’evenodd’ d=’M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z’/%3E%3C/svg%3E»);background-size:1em;} /* stylelint-disable-next-line selector-max-universal */ .bd-heading + div > * + *{margin-top:3rem;} /* Table of contents */ .bd-aside a{padding:.1875rem .5rem;margin-top:.125rem;margin-left:.3125rem;color:rgba(0,0,0,.65);text-decoration:none;} .bd-aside a:hover,.bd-aside a:focus{color:rgba(0,0,0,.85);background-color:rgba(121,82,179,.1);} .bd-aside .active{font-weight:600;color:rgba(0,0,0,.85);} .bd-aside .btn{padding:.25rem .5rem;font-weight:600;color:rgba(0,0,0,.65);border:0;} .bd-aside .btn:hover,.bd-aside .btn:focus{color:rgba(0,0,0,.85);background-color:rgba(121,82,179,.1);} .bd-aside .btn:focus{box-shadow:0 0 0 1px rgba(121,82,179,.7);} .bd-aside .btn::before{width:1.25em;line-height:0;content:url(«data:image/svg+xml,%3csvg xmlns=’http://www.w3.org/2000/svg’ width=’16’ height=’16’ viewBox=’0 0 16 16’%3e%3cpath fill=’none’ stroke=’rgba%280,0,0,.5%29′ stroke-linecap=’round’ stroke-linejoin=’round’ stroke-width=’2′ d=’M5 14l6-6-6-6’/%3e%3c/svg%3e»);transition:transform .35s ease;/* rtl:raw:transform:rotate(180deg) translateX(-2px);*/ transform-origin:.5em 50%;} .bd-aside .btn[aria-expanded=»true»]::before{transform:rotate(90deg)/* rtl:ignore */ ;} /* Examples */ .scrollspy-example{position:relative;height:200px;margin-top:.5rem;overflow:auto;} [id=»modal»] .bd-example .btn,[id=»buttons»] .bd-example .btn,[id=»tooltips»] .bd-example .btn,[id=»popovers»] .bd-example .btn,[id=»dropdowns»] .bd-example .btn-group,[id=»dropdowns»] .bd-example .dropdown,[id=»dropdowns»] .bd-example .dropup,[id=»dropdowns»] .bd-example .dropend,[id=»dropdowns»] .bd-example .dropstart{margin:0 1rem 1rem 0;} /* Layout */ @media (min-width:1200px){ body{display:grid;gap:1rem;grid-template-columns:1fr 4fr 1fr;grid-template-rows:auto;} .bd-header{position:fixed;top:0;/* rtl:begin:ignore */ right:0;left:0;/* rtl:end:ignore */ z-index:1030;grid-column:1 / span 3;} .bd-aside,.bd-cheatsheet{padding-top:4rem;} /** * 1. Too bad only Firefox supports subgrids ATM */ .bd-cheatsheet,.bd-cheatsheet section,.bd-cheatsheet article{display:inherit;/* 1 */ gap:inherit;/* 1 */ grid-template-columns:1fr 4fr;grid-column:1 / span 2;grid-template-rows:auto;} .bd-aside{grid-area:1 / 3;scroll-margin-top:4rem;} .bd-cheatsheet section,.bd-cheatsheet section > h2{top:2rem;scroll-margin-top:2rem;} .bd-cheatsheet section > h2::before{position:absolute;/* rtl:begin:ignore */ top:0;right:0;bottom:-2rem;left:0;/* rtl:end:ignore */ z-index:-1;content:»»;background-image:linear-gradient(to bottom,rgba(255,255,255,1) calc(100% – 3rem),rgba(255,255,255,.01));} .bd-cheatsheet article,.bd-cheatsheet .bd-heading{top:8rem;scroll-margin-top:8rem;} .bd-cheatsheet .bd-heading{z-index:1;} } window.addEventListener(‘scroll’, function() { setupCheat(); },{ once: true }); /* global bootstrap: false */ function setupCheat() { ‘use strict’ // Disable empty links and submit buttons document.querySelectorAll(‘[href=»#»], [type=»submit»]’) .forEach(function (link) { link.addEventListener(‘click’, function (event) { event.preventDefault() }) }) function setActiveItem() { var hash = window.location.hash if (hash === ») { return } var link = document.querySelector(‘.bd-aside a[href=»‘ + hash + ‘»]’) if (!link) { return } var active = document.querySelector(‘.bd-aside .active’) var parent = link.parentNode.parentNode.previousElementSibling link.classList.add(‘active’) if (parent.classList.contains(‘collapsed’)) { parent.click() } if (!active) { return } var expanded = active.parentNode.parentNode.previousElementSibling active.classList.remove(‘active’) if (expanded && parent !== expanded) { expanded.click() } } setActiveItem() window.addEventListener(‘hashchange’, setActiveItem) }