A complete guide to Bipo-klub styles and interface elements.
.col-
.col-sm-
.col-md-
.col-lg-
.col-xl-
.col-xxl-
100%
1412px
.text-success
Example
.text-warning
.text-danger
.text-info
.text-secondary-1
.text-secondary-2
.text-secondary-3
.text-secondary-4
.text-primary-1
.text-primary-2
.text-primary-3
.text-primary-4
.text-primary-5
.text-dark-gray
.text-medium-gray
.text-gray
.text-light-gray-2
.text-light-gray
.text-white
.bg-primary-1
.bg-primary-2
.bg-primary-3
.bg-primary-4
.bg-primary-5
.bg-secondary-1
.bg-secondary-2
.bg-secondary-3
.bg-secondary-4
.bg-success
.bg-warning
.bg-danger
.bg-info
.bg-dark-gray
.bg-medium-gray
.bg-gray
.bg-light-gray-2
.bg-light-gray
.bg-white
font-size: 4.8rem
line-height: 1.3333333333333
6.4rem
.fl-1
font-size: 4rem
line-height: 1.2
4.8rem
.fl-2
font-size: 3.2rem
line-height: 1.25
4rem
.fl-3
font-size: 2.4rem
3.2rem
.fl-4
font-size: 2rem
2.4rem
.fl-5
font-size: 1.8rem
.fl-6
font-size: 1.6rem
line-height: 1.5
.fl-7
font-size: 1.4rem
line-height: 1.1428571428571
1.6rem
.fl-8
font-size: 1.2rem
.fl-9
Lorem ipsum dolor and a link, consectetur adipisicing elit. Recusandae, rerum perferendis quos aspernatur ullam eos voluptate quo cupiditate assumenda facilis, iste animi doloremque, quasi eveniet laboriosam. Dolor perferendis debitis dolore. Repellendus laudantium, quas excepturi ducimus reiciendis, eligendi unde quia perspiciatis voluptatibus pariatur repellat quibusdam, molestiae cum quaerat ex a modi neque? Id officiis doloremque nisi, veritatis fugit fugiat eveniet placeat?
Officia, veniam. Molestias harum quasi, explicabo nesciunt fugit dicta provident natus veniam eveniet eos doloremque dolor, similique voluptates qui adipisci repudiandae iste sit nobis soluta error dolore accusamus fugiat, porro.
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Unordered list:
Ordered list:
Definition list:
Use .list-unstyled or extend %list-unstyled to get an unstyled list. This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.
.list-unstyled
%list-unstyled
Use .list-styled to add styling too lists. This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well. Only <ul> and <ul> lists are supported.
.list-styled
<ul>
Kada uistinu dođe taj trenutak – stojite ispred vrata vrtićke sobe i znate da sad svatko ide svojim putem – učinite to što brže.
To add a source of the quote add a <footer> or <cite> in the <blockquote>.
<footer>
<cite>
<blockquote>
Kada uistinu dođe taj trenutak – stojite ispred vrata vrtićke sobe i znate da sad svatko ide svojim putem – učinite to što brže. Marija Marković - 25 Director of sales at Tvrtka, Zagreb
<mark> - You can use the mark tag to highlight text.
<mark>
<del> - This line of text is meant to be treated as deleted text.
<del>
<s> - This line of text is meant to be treated as no longer accurate.
<s>
<ins> - This line of text is meant to be treated as an addition to the document.
<ins>
<u> - This line of text will render as underlined
<u>
<small> - This line of text is meant to be treated as fine print.
<small>
<strong> - This line rendered as bold text.
<strong>
<em> - This line rendered as italicized text.
<em>
<b> - This line rendered as bold text.
<b>
<i> - This line rendered as italicized text.
<i>
<a> - hyperlink hyperlink:hover hyperlink:active
<a>
.tt-lower
.tt-upper
.tt-cap
.tt-none
.fw-normal
.fw-bold
.fs-normal
.fs-italic
.ta-md-right
.ta-lg-center
.ta-right
.ta-center
.ta-left
All buttons when disabled 50% opacity + cursor not allowed
All buttons when loading 80% opacity + cursor loading
Add icons in text or buttons. The default size of the icon is 2.4rem x 2.4rem. All <svg> elements have fill: currentColor set so the color follows the parent color.
<svg>
fill: currentColor
NOTE: Don't forget to add aria-hidden="true" on the icon, and in case there is no text to explain the icon aria-label attribute on the parent with some explanation of the icon meaning.
aria-hidden="true"
aria-label
icon-alarm
icon-arrow-down
icon-arrow-left
icon-arrow-right
icon-arrow-up
icon-blog
icon-caret-down
icon-caret-up
icon-close
icon-credit-card
icon-facebook
icon-info
icon-length
icon-pinterest
icon-sale
icon-scale
icon-search
icon-star
icon-twitter
Some other text
Use .form-control to style all input elements except where otherwise noted.
.form-control
For file and range, use .form-control-file.
.form-control-file
NOTE: this is not a modifier of .form-control.
Add the disabled attribute on an input to prevent user interactions and change the styling or add disabled to a <fieldset> to disable all fields.
disabled
<fieldset>
NOTE: type="file" and type="range" don't have any special styling for disabled except the browser defaults.
type="file"
type="range"
Adding disabled to every input example:
Adding disabled to a <fieldset> example:
Use attr readonly to disable interactions and change the style. Also use .form-control--text to make a readonly field look like plain text.
readonly
.form-control--text
Each checkbox and radio <input> and <label> pairing is wrapped in .form-check.
<input>
<label>
.form-check
Browsers that support appearance property will get the styled checkbox and the ones that don't support it will get the default browser styled checkbox. Check this section in Internet Explorer 11 to se how the default fallback looks like.
appearance
Inline checkbox and radios are not supported in Internet Explorer (bug). If you need that option to work in Internet Explorer 11 use the grid and .col-auto to achieve a similar result or add min-width to .form-check--inline.
.col-auto
min-width
.form-check--inline
Useful for adding links to terms in checkbox and similar.
.form-block
.form-label
.form-text
.sr-only
Here is some text that is just a paragraph with a smaller bottom margin than default.
Here is some text that is just a paragraph.
Add .is-valid or .is-invalid class to .form-block.
.is-valid
.is-invalid
NOTE: Requires all form elements to be wrapped in .form-block because we are changing the appearance of some of the additional form elements based on the form field validation state.
Use the buttons bellow to check all the states.
Baby tekući deterđent za pranje rublja
Default alert:
Contextual alerts with modifier classes:
.alert--success
.alert--warning
.alert--danger
.alert--info
All <a> are also styled to follow the alert color. Use .alert__link for additional links in the .alert that get aligned to the right of the .alert.
.alert__link
.alert
Accordions are built with collapse for more info check Bootstrap accordions docs.
Pogodnosti Bipo kluba počinju vrijediti od trenutka kada se učlaniš u Bipo klub program vjernosti na prodajnom mjestu.
Oh, lonely death on lonely life! Oh, now I feel my topmost greatness lies in my topmost grief. Ho, ho! from all your furthest bounds, pour ye now in, ye bold billows of my whole foregone life, and top this one piled comber of my death! Towards thee I roll, thou all-destroying but unconquering whale; to the last I grapple with thee; from hell’s heart I stab at thee; for hate’s sake I spit my last breath at thee. Sink all coffins and all hearses to one common pool! and since neither can be mine, let me then tow to pieces, while still chasing thee, though tied to thee, thou damned whale! Thus, I give up the spear!