A collection of useful utility classes to style your content.

Container

Add the .uk-container class to a block element to give it a max-width and wrap the main content of your website. For large screens it applies a different max-width.

Centering

To center the container, use the .uk-container-center class. For any other block element, you additionally need to apply a width.

Example

Centered block element

Markup

<div class="uk-width-medium-1-2 uk-container-center">...</div>

Floating is fundamental for creating all kinds of layouts. But floats need to be cleared or in the worst case, you might end up with a scrambled site. The following classes will help you to setup basic layouts.

Class	Description
`.uk-float-left`	Float the element to the left.
`.uk-float-right`	Float the element to the right.
`.uk-clearfix`	Add this class to a parent container to clear floats.

Markup

<div class="uk-clearfix">
    <div class="uk-float-right">...</div>
    <div class="uk-float-left">...</div>
</div>

New block formatting context

Instead of using the .uk-clearfix class, you can create a new block formatting context to clear floats. Depending on your setup, you can evaluate which method is more suited.

Class	Description
`.uk-nbfc`	Sets overflow to hidden to create a new block formatting context.
`.uk-nbfc-alt`	Sets display to table-cell to create a new block formatting context.

Alignment of images and objects

Align images or other elements with spacing between the text and the element.

Class	Description
`.uk-align-left`	Floats the element to the left and creates right and bottom margin.
`.uk-align-right`	Floats the element to the right and creates left and bottom margin.
`.uk-align-medium-left`	Only affects device widths of 768px and higher.
`.uk-align-medium-right`	Only affects device widths of 768px and higher.
`.uk-align-center`	Centers the element and creates bottom margin.

Example

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.

Markup

<p class="uk-clearfix">
    <img class="uk-align-medium-right" src="" alt="">
    ...
</p>

Vertical alignment

To align objects vertically, you need to create a parent container to which the object itself will be aligned.

Class	Description
`.uk-vertical-align`	Add this class to the parent container. This container needs a specific height.
`.uk-vertical-align-middle`	Add this class to the child element to center your content.
`.uk-vertical-align-bottom`	Add this class to the child element to align your content to the bottom.
`.uk-height-1-1`	This helper class applies a height of 100%.

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Markup

<div class="uk-vertical-align">
    <div class="uk-vertical-align-middle">
    ...
    </div>
</div>

<div class="uk-vertical-align">
    <div class="uk-vertical-align-bottom">
    ...
    </div>
</div>

NOTE The object you align needs to have a width or max-width that is smaller than its parent container.

Center the entire page

The .uk-height-1-1 class comes in handy, if you want to extend the <html> and <body> elements to the full height of the page. This can be very useful when creating error pages.

Markup

<html class="uk-height-1-1">
    ...
    <body class="uk-height-1-1">
        <div class="uk-vertical-align">
            <div class="uk-vertical-align-middle">...</div>
        </div>
    </body>
</html>

Center horizontally

To center your content horizontally as well, add the .uk-text-center class to the parent and the .uk-container-center class to the child element. This is necessary because of the responsive behavior.

Viewport height

To create a container that fills the height of the entire viewport, for example for fullscreen image or video teasers, just add the .uk-height-viewport class.

Position elements

UIkit provides a number of classes to position your content without having to add your own CSS.

Class	Description
`.uk-position-top`	Positions an element absolute at the top.
`.uk-position-bottom`	Positions an element absolute at the bottom.
`.uk-position-cover`	Adds absolute positioning to an element and stretches it to cover the entire parent.
`.uk-position-relative`	Adds relative positioning to an element.

Responsive objects

Images in UIkit adapt to the width of their parent container by default. If you want to apply the responsive behavior to media elements, like a video object, just add one of the following classes.

Class	Description
`.uk-responsive-width`	Adjusts the object’s width according to its parent’s width, keeping the original aspect ratio.
`.uk-responsive-height`	Adjusts the object’s height according to its parent’s height, keeping the original aspect ratio.

NOTE The .uk-responsive-width class can also be applied to an Iframe, provided its width and height attributes are set.

Example width

Example height

Markup

<video controls class="uk-responsive-width"></video>

<img class="uk-responsive-height" src="" alt="">

Margin

Add one of the following classes to add spacing to block elements.

Class	Description
`.uk-margin`	Adds the same top and bottom margins as a paragraph usually has.
`.uk-margin-top`	Adds top margin.
`.uk-margin-bottom`	Adds bottom margin.
`.uk-margin-left`	Adds left margin.
`.uk-margin-right`	Adds right margin.

Larger margin

Add one of the following classes to add larger spacing to block elements.

Class	Description
`.uk-margin-large`	Adds large top and bottom margin.
`.uk-margin-large-top`	Adds large top margin.
`.uk-margin-large-bottom`	Adds large bottom margin.
`.uk-margin-large-left`	Adds large left margin.
`.uk-margin-large-right`	Adds large right margin.

Smaller margin

Add one of the following classes to add smaller spacing to block elements.

Class	Description
`.uk-margin-small`	Adds small top and bottom margin.
`.uk-margin-small-top`	Adds small top margin.
`.uk-margin-small-bottom`	Adds small bottom margin.
`.uk-margin-small-left`	Adds small left margin.
`.uk-margin-small-right`	Adds small right margin.

Remove margin

Add one of the following classes to remove spacing from block elements.

Class	Description
`.uk-margin-remove`	Removes all margins.
`.uk-margin-top-remove`	Removes top margin.
`.uk-margin-bottom-remove`	Removes bottom margin.

Auto margin

To add spacing to stacking elements, for example inline elements that wrap on smaller vieports, just add the data-uk-margin attribute to their parent container. It will automatically add the .uk-margin-small-top to the lower element.

Example

Markup

<p data-uk-margin>
    <button class="uk-button">...</button>
    <button class="uk-button">...</button>
</p>

NOTE By default, the data attribute adds the .uk-margin-small-top class to stacking elements. To apply a bigger margin, just add the {cls:'.uk-margin-top'} option.

Border radius

To add rounded corners to an element, like an image, just add the .uk-border-rounded. To a apply a circled shape, add the .uk-border-circle class.

Example

Border rounded
Border circle

<img class="uk-border-rounded" src="" alt="">
<img class="uk-border-circle" src="" alt="">

Heading large

To increase the font size of your headings on tablets and desktops, just add the .uk-heading-large class.

Example

Heading

Markup

<h1 class="uk-heading-large">...<h1>

Link muted

If a link should not have the default link color, just add the .uk-link-muted class to the anchor element or the parent element.

Example

Heading

Markup

<a class="uk-link-muted">...<a>

<h1 class="uk-link-muted"><a>...<a><h1>

<ul class="uk-link-muted">
    <li><a>...<a></li>
    <li><a>...<a></li>
    <li><a>...<a></li>
</ul>

Scrollable preformatted text

Add the .uk-scrollable-text class to set a max-height and provide a vertical scrollbar. This is very useful for preformatted text, if you don’t want your code blocks to take too much space.

Example

<!-- This is sample code to demonstrate preformatted text with a scrollbar. -->

<div class="uk-grid">
    <div class="uk-width-medium-1-2">
        <div class="uk-panel uk-panel-box uk-text-left">...</div>
    </div>
    <div class="uk-width-medium-1-2">
        <div class="uk-panel uk-panel-box uk-text-right">...</div>
    </div>
</div>
<div class="uk-grid">
    <div class="uk-width-medium-1-2">
        <div class="uk-panel uk-panel-box uk-text-center">...</div>
    </div>
    <div class="uk-width-medium-1-2">
        <div class="uk-panel uk-panel-box uk-text-justify">...</div>
    </div>
</div>

<div class="uk-grid">
    <div class="uk-width-medium-1-2">
        <div class="uk-panel uk-panel-box uk-text-break">...</div>
    </div>
    <div class="uk-width-medium-1-2">
        <div class="uk-panel uk-panel-box"><p class="uk-margin-remove uk-text-truncate">...</p></div>
    </div>
</div>

Scrollable box

Add the .uk-scrollable-box class to create a panel-like box which has a max-height and provides a vertical scrollbar. It can contain any kind of content.

Example

Markup

<div class="uk-scrollable-box">
    <ul class="uk-list">
        <li><label><input type="checkbox">...</label></li>
        <li><label><input type="checkbox">...</label></li>
    </ul>
</div>

Overflow container

To create a container that provides a horizontal scrollbar whenever the elements inside it are wider than the container itself, just add the .uk-overflow-container class to a <div> element. This comes in useful when having to handle tables on a responsive website, which at some point would just get too big.

Example

Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading
Table Footer	Table Footer	Table Footer	Table Footer	Table Footer	Table Footer	Table Footer	Table Footer
Table Data	Table Data	Table Data	Table Data	Table Data	Table Data	Table Data	Table Data
Table Data	Table Data	Table Data	Table Data	Table Data	Table Data	Table Data	Table Data
Table Data	Table Data	Table Data	Table Data	Table Data	Table Data	Table Data	Table Data

Markup

<div class="uk-overflow-container">...</div>

Display utilities

Add one of these classes to change the display properties of an element.

Class	Description
`.uk-display-block`	Forces the element to behave like a block element.
`.uk-display-inline`	Forces the element to behave like an inline element.
`.uk-display-inline-block`	Forces the element to behave like an inline-block element.

Visibility utilities

Class	Description
`.uk-hidden`	Hides the element on any device.
`.uk-hidden-touch`	Hides the element on touch devices.
`.uk-hidden-notouch`	Hides the element on non-touch devices.
`.uk-invisible`	Hides the element without removing it from the flow.
`.uk-visible-hover`	Displays hidden content on hover using `display: block`. Add this class to the parent element.
`.uk-visible-hover-inline`	Displays hidden content on hover using `display: inline-block`. Add this class to the parent element.

Example

Hover me…

Bazinga!

Markup

<div class="uk-visible-hover">
    <div class="uk-hidden">...</div>
</div>

Responsive visibility

You can show or hide content on specific viewport widths. Breakpoints are set through variables and can easily be modified. Since the line between different device sizes keeps blurring, class names are kept general and do not refer to particular devices.

Class	Small (Phones) up to 767	Medium (Tablets) 768 to 959	Large (Desktops) 960 and larger
`.uk-visible-small`	Visible	Hidden	Hidden
`.uk-visible-medium`	Hidden	Visible	Hidden
`.uk-visible-large`	Hidden	Hidden	Visible
`.uk-hidden-small`	Hidden	Visible	Visible
`.uk-hidden-medium`	Visible	Hidden	Visible
`.uk-hidden-large`	Visible	Visible	Hidden

Deshmitë e Pacientëve

Family Hospital Albania

4.7

Based on 98 reviews

review us on

Romina Brakaj

15:22 23 Apr 25

Rosanna Rosa

05:19 20 Apr 25

I went to this hospital for a breast augmentation. Before my arrival I always kept in touch with Olga, my contact person, a wonderful person to say the least... when I arrived at the hospital, a well-kept and clean facility, everyone was very kind, the girls at the reception were all very nice and professional, not to mention the girls' nurses, who were all very nice, kind and caring, they didn't leave me alone for a moment, I felt really at ease... I met the doctor on the day of the operation, I can't speak much about him having seen him very little but I assure you the results are wonderful. upon discharge from the hospital they transferred me to the hotel and there too the organization is top notch they take you and bring the taxis you contact them without waiting a moment everything is super organised... girls/girls don't have any doubts it's a place that I recommend with my eyes closed it's really the top... THANK YOU FAMILY OSPITAL

em re

17:25 04 Apr 25

I underwent rhinoseptoplasty and turbinoplasty surgery in this hospital, I immediately felt at ease, from the first contact with the very kind contact person Franceska 💓 always available and present even a month after the operation.The hospital is very organised, the receptionists were very welcoming, in general all the nurses and staff are always kind and present, even in the operating room all the operators were very nice, most of the employees speak Italian.I met Doctor Minaroli on the day of the operation, he was explanatory and precise regarding how he would operate and the aesthetic changes he would make to the nose, I chose this clinic precisely because I wanted to be operated on by him, who I had been following on social media for a long time, today I am happy to have flown to Tirana for him because, even if I am still swollen, the result is super natural but above all, I am finally breathing well! 👃🏻The operation went very well, the pre-operative was quick and without too much waiting, before and after the operation I didn't feel any pain, just a little discomfort from removing the swabs, but don't worry because it lasts a few seconds.The support hotel is simple but functional, the breakfast is good, it can be reached with a walk, but for every trip you will have a driver (be aware that in Albania there is wifi in taxis).In the hospital street there are many pharmacies, remember to buy the medicines they prescribe for you directly downstairs, because the prices are very advantageous.I absolutely recommend contacting them if you have respiratory problems, I know they also do other aesthetic operations and I have no doubt that they are professionals in other fields too 👍🏻💯

Giusy Marino

18:05 27 Mar 25

I chose Family Hospital in Tirana for my rhinoplasty surgery and I am very satisfied. Professional staff, helpful and attentive to my every need.The final result exceeded my expectations, natural, harmonious and perfectly in line with what I wanted. I highly recommend Family Hospital to anyone considering rhinoplasty surgery or other cosmetic procedures.

Esilda Mile

14:26 26 Mar 25

I recently visit the hospital for check up and i would like to share my personal opinion.The medical staff, including doctors and nurses, were professional, compassionate and careful. The hospital was very clean and organized .The waiting time as was reasonable.And other positive experience is the appointment scheduling the clear communication with the staff and my follow-up 🤗🤗 truly recommend it

Suela Topi

11:01 26 Mar 25

Great service and excellent care**I was recently admitted to “Family Hospital” and I would like to express my gratitude for the treatment I received. From the moment I arrived, the staff was very welcoming and professional. The facilities are modern and well maintained, which made my stay more comfortable than I expected.A special thank you goes to all the doctors and nurses who took such care of me. They were always available to answer any questions and explained all the procedures clearly. My experience was overall positive, with care that exceeded my expectations.I would highly recommend this hospital for its efficiency and professionalism.

Desjana Hasula

09:13 26 Mar 25

I had rhinoplasty done at Family Hospital and I am extremely satisfied not only with the result but with my entire experience in this hospital😍 I thank Dr. Tedi Minarolli and all the staff for their dedicated care and dedication. You are the best

Gentjana Xhaferi

09:12 26 Mar 25

Excellent experience at Family Hospital Albania!I had the pleasure of receiving treatment at Family Hospital Albania and I was extremely satisfied. The facility is modern, clean and well-organized, offering a welcoming and reassuring environment.The medical staff is highly qualified, professional and always available to answer any questions with kindness and competence. The service is fast and efficient, with cutting-edge technologies that guarantee precise diagnoses and effective treatments.I would highly recommend Family Hospital Albania to anyone looking for high-quality medical care in a safe and comfortable environment!

Redian Jaupi

09:05 26 Mar 25

An excellent experience! ⭐️⭐️⭐️⭐️⭐️My wife recently had a rhinoplasty at this clinic and we couldn't be happier with the result. From the first meeting, the medical team proved to be extremely professional, attentive and available to clarify any doubts. The surgeon was able to listen to my wife's needs, advising her in the best possible way to obtain a natural and balanced result.The surgery was managed with great competence and the post-op was surprisingly simpler than expected, thanks to the detailed instructions received. The clinic is modern, well equipped and the staff is always ready to assist us every step of the way.Now, 5 months later, the change is evident and extraordinary, without losing the harmony of the face. We are truly grateful for the excellent work done and recommend this clinic to anyone looking for high quality service and impeccable results.

Ilva Gjika

09:03 26 Mar 25

"Excellent hospital! Kind staff, clean environments, short waiting times. Competent and caring doctors. Impeccable assistance, I felt safe!"

Kerkoni Këtu

Utility

Deshmitë e Pacientëve

Centering

Example

Markup

Markup

New block formatting context

Alignment of images and objects

Example

Markup

Example

Markup

Center the entire page

Markup

Center horizontally

Example width

Example height

Markup

Larger margin

Smaller margin

Remove margin

Example

Markup

Example

Example

Heading

Markup

Example

Markup

Example

Example

Markup

Example

Markup

Example

Markup

Responsive visibility