Πίνακας 5: Bootstrap CSS Classes

Class Περιγραφή Παράδειγμα  Ενότητ

(link στη α
σελίδα του
w3schools.c
om)

.active Adds a grey background Try it Tables

color to the table row
(<tr> or table cell (<td>)
(same color used on hover)

.active Adds a gray background Try it Navbar

color to the active link in a
default navbar. Adds a
black background and a
white color to the current
link inside an inverted
navbar.

.active Adds a blue background Try it List

color to the active list Groups
item in a list group

.active Adds a blue background Try it Buttons

Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

color to simulate a
"pressed" button

.active Animates a Try it Progress

striped progress bar Bars

.active Adds a blue background Try it Dropdow

color to the ns
active dropdown item in
a dropdown

.active Adds a blue background Try it Paginatio

color to the n
active pagination link (to
highlight the current page)

.affix The Affix plugin allows an Try it Affix

element to become affixed
(locked/sticky) to an area
on the page. It
toggles position:fixed o
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

n and off

.alert Creates an alert message Try it Alerts

box

.alert- Red alert box. Indicates a Try it Alerts

danger dangerous or potentially
negative action

.alert- Together with Try it Alerts

dismissab the .close class, this class
le
is used to close the alert

.alert- Light-blue alert box. Try it Alerts

info Indicates some information

.alert- Used on links inside alerts Try it Alerts

link to add matching colored
links
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

.alert- Green alert box. Indicates Try it Alerts

success a successful or positive
action

.alert- Yellow alert box. Indicates Try it Alerts

warning caution should be taken
with this action

.badge Creates a circular badge Try it Badges

(grey circle - often used as
a numerical indicator)

.bg- Adds a red background Try it Helpers

danger color to an element.
Represents danger or a
negative action

.bg-info Adds a light-blue Try it Helpers

background color to an
element. Represents some
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

information

.bg- Adds a blue background Try it Helpers

primary color to an element.
Represents something
important

.bg- Adds a green background Try it Helpers

success color to an element.
Indicates success or a
positive action

.bg- Adds a yellow background Try it Helpers

warning color to an element.
Represents a warning or a
negative action
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

.breadcru A pagination. Indicates the Try it Paginatio

mb current page's location n
within a navigational
hierarchy

.btn Creates a basic button Try it Buttons

(gray background and
rounded corners)

.btn- Creates a block level Try it Buttons

block button that spans the
entire width of the parent
element

.btn- Red button. Indicates Try it Buttons

danger danger or a negative action

.btn- Default button. White Try it Buttons

default background and grey
border
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

.btn- Groups buttons together on Try it Button

group a single line Groups

.btn- Makes a group of buttons Try it Button

group- span the entire width of Groups
justified the screen

.btn- Large button group (makes Try it Button

group-lg all buttons in a button Groups
group larger - increased
font-size and padding)

.btn- Small button group (makes Try it Button

group-sm all buttons in a button Groups
group smaller)

.btn- Extra small button group Try it Button

group-xs (makes all buttons in a Groups
button group extra small)
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

.btn- Makes a button group Try it Button

group- appear vertically stacked Groups
vertical

.btn-info Light-blue button. Try it Buttons

Represents information

.btn-link Makes a button look like a Try it Buttons

link (get button behavior)

.btn-lg Large button Try it Buttons

.btn- Blue button. Try it Buttons

primary

.btn-sm Small button Try it Buttons

Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

.btn- Green button. Indicates Try it Buttons

success success or a positive action

.btn- Yellow button. Represents Try it Buttons

warning warning or a negative
action

.btn-xs Extra small button Try it Buttons

.caption Adds a caption text inside Try it Images

a .thumbnail

.caret Creates a caret arrow Try it Dropdow

icon , which indicates that ns
the button is a dropdown

.carousel Creates a carousel Try it Carousel

(slideshow)
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

.carousel Creates a caption text for Try it Carousel

-caption each slide in the carousel

.carousel Container for next and Try it Carousel

-control previous links

.carousel Adds little dots/indicators Try it Carousel

- at the bottom of each slide
indicator (which indicates how many
s
slides there is in the
carousel, and which slide
the user are currently
viewing)

.carousel Container for slide items Try it Carousel

-inner

.center- Centers any element (Sets Try it Helpers

block an element
to display:block with mar
gin-right:auto and marg
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

in-left:auto)

.checkbox Container for checkboxes Try it Inputs

.checkbox Makes multiple checkboxes Try it Inputs

-inline appear on the same line

.clearfix Clears floats Try it Helpers

.close Indicates a close icon Try it Helpers

.col-*-* Responsive grid (span 1-12 Try it Grid

column). Extra small
devices Phones (< 768px),
Small devices Tablets
(≥768px), Medium devices
Desktops (≥992px), Large
devices Desktops
(≥1200px). Column values
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

can be 1-12.

.col-*- Move columns to the right. Try it Grid

offset-* These classes increase the
left margin of a column by
* columns

.col-*- Changes the order of the Try it Grid

pull-* grid columns

.col-*- Changes the order of the Try it Grid

push-* grid columns

.collapse Indicates collapsible Try it Collapse

content - which can be
hidden or shown on
demand
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

.collapse Show the collapsible Try it Collapse

in content by default

.containe Fixed width container with Try it Containe

r widths determined by rs
screen sites. Equal margin
on the left and right.

.containe A container that spans the Try it Containe

r-fluid full width of the screen rs

.control- Allows a label to be used Try it Forms

label for form validation

.danger Adds a red background to Try it Tables

the table row (<tr> or
table cell (<td>). Indicates
a dangerous or potentially
negative action
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

.disabled Disables a button (adds Try it Buttons

opacity and a "no-parking-
sign" icon on hover)

.disabled Disables a dropdown item Try it Dropdow

(adds a grey text color and ns
a "no-parking-sign" icon on
hover)

.disabled Disables a pagination link Try it Paginatio

(cannot be clicked - adds a n
grey text color and a "no-
parking-sign" icon on
hover)

.disabled Disables a list item in a list Try it List

group (cannot be clicked - Groups
adds a grey background
color and a "no-parking-
sign" icon on hover)
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

.divider Used to separate links in Try it Dropdow

the dropdown menu with a ns
thin horizontal border

.dl- Lines up the Try it Typogra

horizonta terms <dt> and phy
l
descriptions <dd> in <dl> e
lements side-by-side.
Starts off like
default <dl>s, but when
the browser window
expands, it will line up
side-by-side

.dropdown Creates a toggleable menu Try it Dropdow

that allows the user to ns
choose one value from a
predefined list

.dropdown Used to add headers inside Try it Dropdow

-header the dropdown menu ns
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

.dropdown Adds the default styles for Try it Dropdow

-menu the dropdown menu ns
container

.dropdown Right-aligns a dropdown Try it Dropdow

-menu- menu ns
right

.dropdown Used on the button that Try it Dropdow

-toggle should hide and show ns
(toggle) the dropdown
menu

.dropup Indicates a dropup menu Try it Dropdow

(upwards instead of ns
downwards)

.embed- Container for embedded Try it Images

responsiv content. Makes videos or
e slideshows scale properly
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

on any device

.embed- Container for embedded Try it Images

responsiv content. Creates an 16:9
e-16by9 aspect ratio embedded
content

.embed- Container for embedded Try it Images

responsiv content. Creates an 4:3
e-4by3 aspect ratio embedded
content

.embed- Used inside .embed- Try it Images

responsiv responsive. Scales the
e-item
video nicely to the parent
element

.fade Adds a fading effect when Try it Alerts

closing an alert box
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

.form- Used on input, textarea, Try it Forms

control and select elements to
span the entire width of
the page and make them
responsive

.form- Form validation class Try it Inputs 2

control-
feedback

.form- Adds plain text next to a Try it Inputs 2

control- form label within a
static horizontal form

.form- Container for form input Try it Forms

group and label

.form- Makes a <form> left- Try it Forms

inline aligned with inline-block
controls (This only applies
to forms within viewports
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

that are at least 768px

wide)

.form- Aligns labels and groups of Try it Forms

horizonta form controls in a
l horizontal layout

.glyphico Creates an icon. Bootstrap Try it Glyphico

n provides 260 free ns
glyphicons from
the Glyphicons Halflings set

.has- Adds a red color to the Try it Forms

danger label and a red border to
the input, as well as an
error icon inside the input
(used together with .has-
feedback)

.has- Adds feedback icons for Try it Forms

feedback inputs (checkmark,
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

warning and error signs)

.has- Adds a green color to the Try it Forms

success label and a green border to
the input, as well as a
checkmark icon inside the
input (used together
with .has-feedback)

.has- Adds a yellow/orange color Try it Forms

warning to the label and a
yellow/orange border to
the input, as well as a
checkmark icon inside the
input (used together
with .has-feedback)

.help- A block of help text that Try it Input

block breaks onto a new line and Sizing
may extend beyond one
line.
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

.hidden Forces an element to be Try it Helpers

hidden (display:none)

.hidden-* Hides content depending Try it Helpers

on screen size

.hide Deprecated. Use .hidden i Try it Helpers

nstead

.h1 - .h6 Makes an element look like Try it Typogra

a heading of the chosen phy
class (h1-h6)

.icon-bar Used in the navbar to Try it Navbar

create a hamburger menu
(three horizontal bars)

.icon- Unicode icon (arrow Try it Carousel

next pointing right), used in
carousels. This is often
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

replaced with a glyphicon

.icon- Unicode icon (arrow Try it Carousel

prev pointing left), used in
carousels. This is often
replaced with a glyphicon

.img- Shapes an image to a circle Try it Images

circle (not supported in IE8 and
earlier)

.img- Adds rounded corners to Try it Images

rounded an image

.img- Shapes an image to a Try it Images

thumbnail thumbnail (borders)

.in Fades in tabs Try it Tabs

Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

.info Adds a light-blue Try it Tables

background to the table
row (<tr> or table cell
(<td>). Indicates a neutral
informative change or
action

.initiali Displays the text inside Try it Typogra

sm an <abbr> element in a phy
slightly smaller font size

.input- Container to enhance an Try it Inputs

group input by adding an icon,
text or a button in front or
behind it as a "help text"

.input- Large input group Try it Inputs

group-lg
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

.input- Small input group Try it Inputs

group-sm

.input- Together with the .input- Try it Inputs

group- group class, this class
addon
makes it possible to add an
icon or help text next to
the input field

.input- Together with the .input- Try it Inputs

group-btn group class, this class
attaches a button next to
an input. Often used as a
search bar

.input-lg Large input field Try it Input

Sizing

.input-sm Small input field Try it Input

Sizing
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

.invisibl Makes an element invisible Try it Helpers

e (visibility:hidden). Not
e: Even though the
element is invisible, it will
take up space on the page

.item Class added to each Try it Carousel

carousel item. May be text
or images

.jumbotro Creates a padded grey box Try it Jumbotr

n with rounded corners that on
enlarges the font sizes of
the text inside it. Creates a
big box for calling extra
attention to some special
content or information

.label Adds a grey rounded box Try it Labels

to an element. Provides
additional information
about something (e.g.
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

"New")

.label- Red label Try it Labels

danger

.label- Light-blue label Try it Labels

info

.label- Green label Try it Labels

success

.label- Yellow label Try it Labels

warning

.lead Increase the font size and Try it Typogra

line height of a paragraph phy
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

.left Used to identify the left Try it Carousel

carousel control

.list- Creates a bordered list Try it List

group group for <li> elements Group

.list- Added to Try it List

group- each <li> element in the Group
item
list group

.list- Creates a list group Try it List

group- heading (used on other Group
item- elements besides <li>)
heading

.list- Used for item text inside Try it List

group- the list group (used on Group
item-text other elements
besides<li>)
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

.list- Red background color for a Try it List

group- list item in a list group Group
item-
danger

.list- Light-blue background Try it List

group- color for a list item in a list Group
item-info group

.list- Green background color for Try it List

group- a list item in a list group Group
item-
success

.list- Yellow background color for Try it List

group- a list item in a list group Group
item-
warning

.list- Places all list items on a Try it Tabs

inline single line (horizontal
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

menu)

.list- Removes all default list- Try it Typogra

unstyled style (bullets, left margin, phy
etc.) styling from
a <ul> or <ol> list

.mark Highlights text: Highlighted Try it Typogra

text phy

.media Aligns media objects (like Try it Media

images or videos - often Objects
used for comments in a
blog post etc)

.media- Text that should appear Try it Media

body next to a media object Objects

.media- Creates a heading inside Try it Media

heading the media object
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

Objects

.media- Nested media lists Try it Media

list Objects

.media- Indicates a media object Try it Media

object (image or video) Objects

.modal Identifies the content as a Try it Modals

modal and brings focus to
it

.modal- Defines the style for the Try it Modals

body body of the modal. Add
any HTML markup here (p,
img, etc)

.modal- Styles the modal (border, Try it Modals

content background-color, etc).
Inside this, add the
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

modal's header, body and

footer, if needed

.modal- Sets the proper width and Try it Modals

dialog margin of the modal

.modal- The footer of the modal Try it Modals

footer (often contains an action
button and a close button)

.modal- The header of the modal Try it Modals

header (often contains a title and
a close button)

.modal-lg Large modal (wider than Try it Modals

default)

.modal- Used on Try it Modals

open the <body> element to
prevent page scrolling
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

(overflow:hidden)

.modal-sm Small modal (less width) Try it Modals

.modal- The title of the modal Try it Modals

title

.nav nav- Indicates a tabbed menu Try it Tabs

tabs

.nav nav- Indicates a pill menu Try it Tabs

pills

.nav .nav Used on a <ul> container Try it Navbar

bar-nav that contains the list items
with links inside a
navigation bar

.nav- Centers tabs/pills. Note Try it Tabs

Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

justified that on screens smaller

than 768px the items are
stacked (content will
remain centered)

.nav- Vertically stack tabs or pills Try it Tabs

stacked

.nav-tabs Creates a tabbed menu Try it Tabs

.navbar Creates a navigation bar Try it Navbar

.navbar- Added to a link or a header Try it Navbar

brand element inside the navbar
to represent a logo or a
header

.navbar- Vertically aligns a button Try it Navbar

btn inside a navbar
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

.navbar- Collapses the navbar Try it Navbar

collapse (hidden and replaced with
a menu/hamburger icon on
mobile phones and small
tablets)

.navbar- Creates a default Try it Navbar

default navigation bar (light-grey
background color)

.navbar- Makes the navbar stay at Try it Navbar

fixed- the bottom of the screen
bottom (sticky/fixed)

.navbar- Makes the navbar stay at Try it Navbar

fixed-top the top of the screen
(sticky/fixed)

.navbar- Added to form elements Try it Navbar

form inside the navbar to
vertically center them
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

(proper padding)

.navbar- Added to a container Try it Navbar

header element that contains the
link/element that represent
a logo or a header

.navbar- Creates a black navigation Try it Navbar

inverse bar (instead of light-grey)

.navbar- Aligns nav links, forms, Try it Navbar

left buttons, or text, in the
navbar to the left

.navbar- Styles an element to look Try it Navbar

link like a link inside the navbar
(anchors get proper
padding and an underline
on hover, while other
elements like p or span
gets a default hover effect
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

- white color in an inversed

navbar and a black color in
a default navbar)

.navbar- Used on a <ul> container Try it Navbar

nav that contains the list items
with links inside a
navigation bar

.navbar- Aligns nav links, forms, Try it Navbar

right buttons, or text in the
navbar to the right.

.navbar- Removes left, top and right Try it Navbar

static- borders (rounded corners)
top from the navbar (default
navbar has a gray border
and a 4px border-radius by
default)

.navbar- Vertical align any elements Try it Navbar

Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

text inside the navbar that are

not links (ensures proper
padding)

.navbar- Styles the button that Try it Navbar

toggle should open the navbar on
small screens. Often used
together with three .icon-
bar classes to indicate a
toggleable menu icon
(hamburger/bars)

.next Used in the carousel Try it Carousel

control to identity the next
control

.next Used to align pager Try it Pager

buttons to the right side of
the page (next button)

.page- Adds a horizontal line Try it Page

Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

header under the heading (+ adds Header

some extra space around
the element)

.pager Creates previous/next Try it Pager

buttons (used
on <ul> elements)

.paginati Creates a pagination Try it Paginatio

on (Useful when you have a n
web site with lots of pages.
Used on <ul> elements)

.paginati Large pagination (each Try it Paginatio

on-lg pagination link gets a font- n
size of 18px. Default is
14px)

.paginati Small pagination (each Try it Paginatio

on-sm pagination link gets a font- n
size of 12px. Default is
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

14px)

.panel Creates a bordered box Try it Panels

with some padding around
its content

.panel- Container for content Try it Panels

body inside the panel

.panel- Collapsible panel (toggle Try it Collapse

collapse between hiding and
showing panel(s))

.panel- Red panel. Indicates Try it Panels

danger danger

.panel- Light-blue panel. Indicates Try it Panels

info information
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

.panel- Green panel. Indicates Try it Panels

success success

.panel- Yellow panel. Indicates Try it Panels

warning warning

.panel- Creates a panel footer Try it Panels

footer (light background color)

.panel- Used to group many panels Try it Panels

group together. This removes the
bottom margin below each
panel

.panel- Creates a panel header Try it Panels

heading (light background color)

.panel- Used inside a .panel- Try it Panels

title heading to adjust the
styling of the text
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

(removes margins and

adds a font-size of 16px)

.popover Popup-box that appears Try it Popover

when the user clicks on an
element

.pre- Makes a <pre> element Try it Helpers

scrollabl scrollable (max-height of
e
350px and provide a y-axis
scrollbar)

.prev Used in carousels to Try it Carousel

indicate a "previous" link

.previous Used to align pager Try it Pager

buttons to the left side of
the page (previous button)

.progress Container for progress bars Try it Progress

Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

Bars

.progress Creates a progress bar Try it Progress

-bar Bars

.progress Red progress bar. Indicates Try it Progress

-bar- danger Bars
danger

.progress Light-blue progress bar. Try it Progress

-bar-info Indicates information Bars

.progress Creates a striped progress Try it Progress

-bar- bar Bars
striped

.progress Green progress bar. Try it Progress

-bar- Indicates success Bars
success
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

.progress Yellow progress bar. Try it Progress

-bar- Indicates warning Bars
warning

.pull- Float an element to the left Try it Helpers

left

.pull- Float an element to the Try it Helpers

right right

.right Used to identify the right Try it Carousel

carousel control

.row Container for responsive Try it Grid

columns

.show Shows an element Try it Helpers

(display:block)
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

.small Creates a lighter, Try it Typogra

secondary text in any phy
heading

.sr-only Hides an element on all Try it Helpers

devices except for screen
readers

.sr-only- Hides an element on all Try it Helpers

focusable devices except for screen
readers

.success Adds a green background Try it Tables

color to a table row
(<tr> or table cell (<td>).
Indicates success or a
positive action

.tab- Used together with .tab- Try it Tabs

content pane to creates
toggleable/dynamic
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

tabs/pills

.tab-pane Used together with .tab- Try it Tabs

content to creates
toggleable/dynamic
tabs/pills

.table Adds basic styling to a Try it Tables

table (padding, bottom
borders, etc)

.table- Adds borders on all sides of Try it Tables

bordered the table and cells

.table- Makes a table more Try it Tables

condensed compact by cutting cell
padding in half

.table- Creates a hoverable table Try it Tables

hover (adds a grey background
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

color on table rows on

hover)

.table- Makes a table responsive Try it Tables

responsiv (adds a horizontal scrollbar
e when needed)

.text- Indicates capitalized text Try it Typogra

capitaliz phy
e

.text- Center-aligns text Try it Typogra

center phy

.text- Red text color. Indicates Try it Typogra

danger danger phy
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

.text- Hides text (helps replace Try it Typogra

hide an element's text content phy
with a background image)

.text- Light-blue text color. Try it Typogra

info Indicates information phy

.text- Indicates justified text Try it Typogra

justify phy

.text- Aligns the text to the left Try it Typogra

left phy

.text- Changes text to lowercase Try it Typogra

lowercase phy

.text- Grey text color Try it Typogra

muted phy
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

.text- Prevents the text from Try it Typogra

nowrap wrapping phy

.text- Blue text color Try it Typogra

primary phy

.text- Aligns text to the right Try it Typogra

right phy

.text- Green text color. Indicates Try it Typogra

success success phy

.text- Makes text uppercase Try it Typogra

uppercase phy

.text- Yellow/orange text color. Try it Typogra

warning Indicates warning phy

.thumbnai Adds a border around an Try it Images

Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

l element (often images or

videos) to make it look like
a thumbnail

.tooltip Popup-box that appears Try it Tooltip

when the user moves the
mouse pointer over an
element

.visible- Deprecated as of Try it Helpers

* v3.2.0. Used to show
and/or hide content by
device. Note: Use .hidden
-* instead

.visible- Displays the element Helpers

print- (display:block) in print
block
(pre)view

.visible- Displays the element Helpers

print- (display:inline) in print
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

inline (pre)view

.visible- Displays the element Helpers

print- (display:inline-block)
inline-
in print (pre)view
block

.hidden- Hides the element Helpers

print (display:none) in print
(pre)view

.warning Adds a yellow background Try it Tables

color to the table row
(<tr> or table cell (<td>).
Indicates a warning

.well Adds a rounded border Try it Wells

around an element with a
gray background color and
some padding
Class Περιγραφή Παράδειγμα  Ενότητ
(link στη α
σελίδα του
w3schools.c
om)

.well-lg Large well (more padding) Try it Wells

.well-sm Small well (less padding) Try it Wells