JavaScript seems to be disabled in your browser. For the best experience on our site, be sure to turn on Javascript in your browser.
Kaikki piilolinssit
Katso kaikki myymälät
Optikon palvelut
Silmälääkäripalvelut
Yleistä näkemisestä
Silmien terveys
Varaa aika
See also: Bluefoot Guide
Always add "btn" class to a button.
Some button classes can be combined:
<a class="btn btn-primary btn-lg btn-block" href="#">Large primary block button</a>
<button>Button tag</button>
<a class="btn" href="#">Button</a>
<a class="btn btn-default" href="#">Default button</a>
<a class="btn btn-primary" href="#">Primary button</a>
<a class="btn btn-disabled" href="#">Disabled button</a>
<a class="btn btn-block" href="#">Block button</a>
<a class="btn btn-xs" href="#">Button XS</a>
<a class="btn btn-sm" href="#">Button SM<a>
<a class="btn btn-lg" href="#">Button LG</a>
<a class="btn btn-nowrap" href="#">Nowrap</a>
<a class="btn btn-dropdown" href="#">Dropdown</a>
<a class="btn btn-selected" href="#">Selected</a>
<a class="btn btn-invert" href="#">Invert button</a>
<a class="btn btn-raised" href="#">Raised button</a>
Use when adding multiple buttons next to each other. This class adds some margin around the buttons.
<div class="btns"> <a href="#" class="btn">Button 1</a> <a href="#" class="btn">Button 2</a> <a href="#" class="btn">Button 3</a> </div>
<div class="line-container"> <span> <a href="#" class="btn btn-primary">Button</a> </span> </div>
<h1>Title H1</h1>
<h1 class="brand">Brand H1</h1>
Get margin-bottom value and set it as margin-top
<h2 class="even-margin">Even margin</h2>
CSS class font-size-140 makes this text 140% bigger, but heading size stays the same when using h-pixel-size class!
<div class="font-size-140 h-pixel-size"> <h2>Heading</h2> <p>Text that gets bigger!</p> </div>
We are using limited version of Bootstrap v4.0.0-beta.2. Only grid, float and display features added.
xs: 0 → sm: 576px → md: 768px → lg: 992px → xl: 1200px →
Documentation
Always use container/container-fluid and row wrappers for Bootstrap grids! Grids do not work without them in Magento.
<div class="container"> <div class="row"> <div class="col-md-3"> Column width 3/12 </div> <div class="col-md-9"> Column width 9/12 </div> </div> </div>
<div class="float-right">Float right</div>
<div class="float-right">Float left</div>
<div class="float-none">Do not float</div>
<div class="float-md-right">Float right on viewports sized MD (medium) or wider</div>
<div class="d-none">Display none</div>
<div class="d-block">Display block</div>
<div class="d-none d-md-block">Hide on viewports below MD (medium)</div>
* = bold, black, light, thin, regular, medium, base
Bold: Instru: BrandonText-Bold | Nissen: AvenirLTStd-Black | Keops: Lato Black: Instru: BrandonText-Black | Nissen: AvenirLTStd-Black | Keops: Lato Light: Instru: BrandonText-Light | Nissen: AvenirLTStd-Book | Keops: Lato Thin: Instru: BrandonText-Thin | Nissen: AvenirLTStd-Book | Keops: Lato Regular: Instru: BrandonText-Regular | Nissen: AvenirLTStd-Book | Keops: Lato Medium: Instru: BrandonText-Medium | Nissen: AvenirLTStd-Book | Keops: Lato Base: Instru: Helvetica Neue | Nissen: AvenirLTStd-Book | Keops: Arial
<span class="font-family-bold">Bold text</span>
* = 50, 60, 70, ..., 200, 250, 300
<span class="font-size-50">Font size is 50% from the original</span>
Left, center, right
<div class="text-left">Left aligned text</div>
<div class="text-center">Centered text</div>
<div class="text-right">Right aligned text</div>
<span class="brand-color">Brand colored text</span>
Font Awesome 5.0.9
Search icons
<i class="fa fa-user-circle" aria-hidden="true"></i>
Glyphicons are currently disabled - FontAwesome should be enough.
Glyphicons from Bootstrap 3.3.7
Available glyphs
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<ul class="nav nav-tabs"> <li><a href="#">First item</a></li> <li class="active"><a href="#">Second item</a></li> <li><a href="#">Third item</a></li> <li><a href="#">Fourth item</a></li> <li><a href="#">Fifth item</a></li> <li><a href="#">Sixth item</a></li> <li><a href="#">Seventh item</a></li> <li><a href="#">Eighth item</a></li> <li><a href="#">Ninth item</a></li> <li><a href="#">Tenth item</a></li> </ul>
<ul class="nav nav-pills"> <li><a href="#">First item</a></li> <li class="active"><a href="#">Second item</a></li> <li><a href="#">Third item</a></li> <li><a href="#">Fourth item</a></li> <li><a href="#">Fifth item</a></li> <li><a href="#">Sixth item</a></li> <li><a href="#">Seventh item</a></li> <li><a href="#">Eighth item</a></li> <li><a href="#">Ninth item</a></li> <li><a href="#">Tenth item</a></li> </ul>
Inline blocks in mobile, blocks in desktop.
<nav class="nav sidebar-links"> <ul> <li><a href="#">Item 1</a></li> <li class="active"><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a></li> </ul> </nav>
<div class="panel">Panel</div>
<div class="panel invert">Panel Invert</div>
Example form with Magento's form validation.
<form action="" method="get" data-mage-init='{"validation":{}}'> <div class="fields"> <div class="field required"> <label for="fname">Firstname</label> <div><input id="fname" type="text" name="firstname" data-validate='{"required":true}' /></div> </div> <div class="field required"> <label for="lname">Lastname<</label> <div><input id="lname" type="text" name="lastname" data-validate='{"required":true}' /></div> </div> <div class="field"> <label for="email">Email</label> <div><input id="email" type="text" value="" name="email" data-validate='{"validate-email":true}' /></div> <div><div class="tooltip"><div>?</div><div>Email address is not used for marketing.</div></div></div> </div> <div class="field"> <label>Sex</label> <div class="label-buttons"> <input type="radio" value="male" id="male" name="sex" checked="checked" /><label for="male">Male</label> <input type="radio" value="female" id="female" name="sex" /><label for="female">Female</label> </div> </div> <div class="field"> <label> </label> <div><input type="submit" class="btn btn-primary" value="Submit" /></div> </div> </div> </form>
Label needs to be right after the input element.
<div class="label-buttons"> <input type="radio" value="1" name="rb" id="rb1" checked="checked" /><label for="rb1">First</label> <input type="radio" value="1" name="rb" id="rb2" /><label for="rb2">Second</label> <input type="radio" value="1" name="rb" id="rb3" /><label for="rb3">Third</label> <input type="radio" value="1" name="rb" id="rb4" /><label for="rb4">Fourth</label> </div>
<div class="label-buttons"> <input type="checkbox" value="1" name="cb" id="cb1" checked="checked" /><label for="cb1">First</label> <input type="checkbox" value="1" name="cb" id="cb2" /><label for="cb2">Second</label> <input type="checkbox" value="1" name="cb" id="cb3" /><label for="cb3">Third</label> <input type="checkbox" value="1" name="cb" id="cb4" /><label for="cb4">Fourth</label> </div>
<div class="bg-gradient-top-grey">Gradient: top grey, bottom white</div>
<div class="bg-gradient-bottom-grey">Gradient: top white, bottom grey</div>
<div class="bg-brand">Brand color as background color</div>
<div class="bg-panel">Panel color as background color</div>
Promo Tile 1Nov 20. 2017
Promo Tile 2Nov 20. 2017
Promo Tile 3Nov 20. 2017
Promo Tile 4Nov 20. 2017
Promo Tile 5Nov 20. 2017
Promo Tile 6Nov 20. 2017
Show all
<div class="promo-grid"> <div class="promo-tile"> <a href="#"> <img /> </a> <h4> <a href="#">First promo tile!</a> </h4> <p>Promo Tile 1<br>Nov 20. 2017</p> </div> <div class="promo-tile"> ... </div> </div>
Show All button:
<button onClick="jQuery('.promo-grid').removeClass('limited'); jQuery(this).fadeOut(200);">Show All</button>
Use figure and figcaption tags when image has a caption.
<figure> <img /> <figcaption>Caption text</figcaption> </figure>
Version v.2.2.1
See available options here: Owl Carousel options
It is recommended to use images or divs in the slider.
<div class="owl-carousel" data-mage-init='{"owl" : {}}'> <img /> <img /> <img /> </div>
Slider needs to be wrapped in .owl-carousel-wrapper div, that also contains .owl-carousel-tabs ul-element. Also "tabs" needs to be set to true in Owl options.
Set active class for the first tab item!
.owl-carousel-tabs do not have any default styles. Use "big-light-tabs" class with the "owl-carousel-wrapper" class to use the white tabs seen in the preview.
<div class="owl-carousel-wrapper big-light-tabs" data-mage-init='{"owl" : {"nav": false, "autoplayTimeout": 3000, "tabs": true, "tabChangeSpeed": 300}}'> <div class="owl-carousel"> <div>Blue slide</div> <div>Green slide</div> <div>Red slide</div> <div>Yellow slide</div> </div> <ul class="owl-carousel-tabs"> <li class="active">Blue</li> <li>Green</li> <li>Red</li> <li>Yellow</li> </ul> </div>
.brand-arrows (brand colored arrows)
<table>
<table class="table table-bordered">
<table class="table table-lined">
<table class="table table-bordered table-compact">
<table class="table table-bordered light-borders">
<table class="table table-bordered inner-borders">
Class page-wide removes container's margins (by adding negative margins), making the banner page wide when using Wide layout.
<section class="page-wide" data-image-src="image.jpg" data-mage-init='{"parallax" : ""}'><section>
Add code to CMS block and inject it to a page with a widget. Use "Sidebar Additional" container in the widget.
<ul class="sidebar-menu"> <li><a href="#">Item 1</a></li> <li> <div class="toggler">Item 2</div> <ul> <li><a href="#">Subitem 2-1</a></li> <li><a href="#">Subitem 2-2</a></li> <li><a href="#">Subitem 2-3</a></li> </ul> </li> <li> <div class="toggler">Item 3</div> <ul> <li><a href="#">Subitem 3-1</a></li> <li><a href="#">Subitem 3-2</a></li> <li><a href="#">Subitem 3-3</a></li> </ul> </li> </ul>
badge-block badge-calendar
badge-block badge-phone
badge-block badge-store
badge-block badge-3m
badge-block badge-30percent
badge-block badge-insurance
badge-block badge-repair
badge-block badge-recipe6m
badge-block badge-term6m
<div class="badge-block badge-phone"> <h4>Call us!</h4> <p>09-1234 5000</p> </div>
Add border and some margin and padding to top/bottom of an element.
<div class="divider-at-top">Divider at top</div> <div class="divider-at-bottom">Divider at bottom</div>
Open/close containers. Toggler class adds an arrow next to the element, and hides the next sibling element. When toggler is clicked, visibility (CSS display) of the next sibling element is changed. Toggler do not add any styles to the element, except the arrow icon. Examples below have some inline styles added.
Content is hidden in all viewport sizes.
<div class="toggler">Toggle</div> <div>Content</div>
In desktop view, arrow icon is hidden and content is shown. In mobile view works like a normal toggler.
<div class="mobile-toggler">Toggle</div> <div>Content</div>
Toggler with animation. Animation speed is 200ms.
<div class="slide-toggler">Toggle</div> <div>Content</div>
In desktop view, toggler is hidden and content is shown. In mobile view works like a normal slide toggler.
<div class="mobile-slide-toggler">Toggle</div> <div>Content</div>
List of togglable items.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porta dui metus, quis molestie est euismod eget. Donec sagittis mauris vestibulum massa vehicula, eu tincidunt neque faucibus. Sed consequat finibus turpis at vulputate. Curabitur ut fermentum tortor. Duis venenatis nec justo vitae vestibulum. Praesent aliquet mauris et tortor interdum, non congue eros fringilla. Mauris mattis sagittis felis, et aliquam sem. Fusce tempor sem eget nibh scelerisque, sit amet tincidunt tortor semper. Sed scelerisque eros lorem, vitae aliquet dui egestas non.
In hac habitasse platea dictumst. Nunc posuere, mi nec ornare feugiat, lorem ipsum pretium nulla, non molestie arcu mi blandit arcu. Ut sollicitudin viverra justo, pulvinar lacinia eros elementum sit amet. Fusce consequat est id mauris bibendum semper. In tempor nisl ac mauris pharetra, lacinia gravida mauris congue. Nullam faucibus imperdiet nunc vitae ullamcorper. Nam tempor nec elit vel molestie.
Vestibulum egestas tristique nulla vel pharetra. Pellentesque in tristique nisl. Curabitur venenatis consequat dui sed placerat. Etiam dictum ante sit amet diam vulputate consectetur. Mauris sed leo varius, malesuada mi a, ornare lorem. Aenean sit amet dapibus arcu, ut dictum eros. Maecenas lacinia rutrum lacinia. Quisque sed gravida risus. Praesent et nisi sit amet orci sollicitudin euismod sed eu justo. Suspendisse ut vehicula mi. Praesent sed purus sit amet sapien eleifend convallis. Aliquam pellentesque mauris vitae leo dictum, vitae accumsan ipsum vehicula. Integer nec nisl dui. In in ornare est. Sed congue tristique nisl nec molestie.
<div class="toggle-panel"> <div class="slide-toggler plusminus">Title</div> <div> Content </div> </div> <div class="toggle-panel"> ... </div>
Show toggle button only in mobile view.
<div class="toggler visible-mobile-only">Toggle</div> <div>Content</div>
Arrow icon is replaced with +/- signs.
<div class="toggler plusminus">Toggle</div> <div>Content</div>
Arrow icon is hidden.
ModalWidget module helps adding modals to CMS pages.
In CMS page/block, create elements for the open button and for the modal content. Then add Ambientia ModalWidget and fill the options.
<button id="openmymodal">Open Modal</button> <div id="mymodal">Modal content goes here!</div> {{widget type="Ambientia\ModalWidget\Block\Widget\Modal" title="Modal Title" open="#openmymodal" modal="#mymodal"}}
Update active item in navigation while scrolling.
data-mage-init='{"scrollspy" : {"offset": 200} }'
Sticky/following element
data-mage-init='{"affix" : { "offset": {"top": 50, "bottom": 850} }}'
<nav id="faq-nav" class="faq-nav" data-mage-init='{"scrollspy" : {"offset": 130}, "affix" : { "offset": {"top": 50, "bottom": 850} }}'> <ul class="nav"> <li><a href="#item1">Item 1</a></li> <li><a href="#item2">Item 2</a></li> <li><a href="#item3">Item 3</a></li> </ul> </nav>
<div class="faq-content"> <div id="item1"> <h2>Item 1</h2> <p>Lorem ipsum...</p> </div> <div id="item2"> <h2>Item 2</h2> <p>Lorem ipsum...</p> </div> <div id="item3"> <h2>Item 3</h2> <p>Lorem ipsum...</p> </div> </div>
Customize page layout in CMS pages.
<referenceContainer name="page.top"> <referenceBlock name="breadcrumbs" remove="true" /> </referenceContainer>
<referenceContainer name="banner.area.hero"> <block class="Ambientia\Banners\Block\Widget\Banner"> <arguments> <argument name="identifier" xsi:type="string">IDENTIFIER-HERE</argument> </arguments> </block> </referenceContainer>