Konular

Bootstrap Class Referansı

Bootstrap v4.3.0 Class Listesi

Bootstrap Class Referansı

Class Name Preview Description Category
.align-* Bootstrap Class Referansı A set of utility classes that are equivelant to writing the css property vertical-align:middle;You can use this on inline and table cell elements. .align-(baseline, top, middle, bottom) Utility
.align-content-* Bootstrap Class Referansı Added to the parent flexbox container to determing how the elements are aligned horizontally. .align-content-(start (browser default), end, center, between, around, or stretch) Utility
.align-items-* Bootstrap Class Referansı Class added to flexbox child items to specify if it should align towards the top or bottom of the container (start, end) Utility
.align-self-* Bootstrap Class Referansı Used on flexbox items to align them vertically in relation to the parent container. If columns are used the items will align verticall. (start, end, center, baseline, or stretch (browser default) Utility
.align-text-* Bootstrap Class Referansı A set of utility classes that are equivelant to writing the css property vertical-align:text-bottom; You can use this on inline and table cell elements. .align-text-(top, bottom) Utility
.badge-* Bootstrap Class Referansı Used for labels and counters in applications .badge-(light, dark primary, secondary, transparent, white, warning, success, info, danger) Badge
.bg-* Bootstrap Class Referansı Background color utility classes: .bg-(light, dark primary, secondary, transparent, white, warning, success, info, danger) Utilities
.border-* Bootstrap Class Referansı A versatile border utility class that lets you add/remove borders on a side or change a border color. .border-(light, dark primary, secondary, transparent, white, warning, success, info, danger, 0, top-0, right-0, bottom-0, left-0, top, right, bottom, left) Utility
.btn-outline-* Bootstrap Class Referansı A button variation to have outlined buttons instead of a solid background. .btn-outline-(light, dark primary, secondary, transparent, white, warning, success, info, danger) Buttons
.carousel-control-* Bootstrap Class Referansı When you have an image carousel with pagination you will use this class on the previous and next anchor links. .carousel-control-(prev, next) Carousel
.carousel-fade n/a Animates the slide transition with a crossfade instead of a slide Utility
.col Bootstrap Class Referansı Flexbox items are automatically equal width so this class is used when you want your columns to be equal width and then go 100% on the xs breakpoint. Grid
.col-* Bootstrap Class Referansı This class is used for grid columns to determin the column width and the breakpoint you would like it to be active. The classes work from the breakpoint you set and everything larger. .col-(sm, md, lg, xl)-(1-12) Grid
.custom-range Bootstrap Class Referansı Changes the default styling of a form input range Forms
.d-flex n/a Sets the element to have have the style property display:flex; Utility
.d-none n/a Sets the element to have have the style property display:none; Utility
.d-*-* n/a A responsive display utility class that lets you specify when a display property is applied to the element. .d-(sm, md, lg, xl)-(none, inline, inline-block, block, table, table-cell, table-row, flex, inline-flex ) Utility
.d-print-* n/a Changes the display of elements when you print the document. .d-print-(flex, inline-flex, table, table-cell, table-row) Utility
.fixed-* n/a This class makes an element fixed to the top/bottom of the browser window. Here is what the CSS ruleset looks like. .fixed-bottom {position: fixed;right: 0;bottom: 0;left: 0;z-index: 1030;} Utility
.flex-*-*-* n/a Change the flexbox items layout, alignment, or size. .flex-(sm, md, lg, xl)-(row, row-reverse, column) Utility
.flex-fill-* n/a Add to all sibling elements you would like to force into equal widths and fill all available horizontal space. .flex-fill-(sm, md, lg, xl) Utility
.flex-(grow|shrink)-* n/a Forces an element to grow or shrink to use more or less of the space available .flex-(grow, shrink)-(0, 1) Utility
.float-*-* n/a Responsive utility to float an element. .float-(sm, md, lg, xl)-(none, left, right) Utility
.form-control-plaintext Bootstrap Class Referansı Use the .form-control-plaintext class to remove the default form field styling and preserve the correct margin and padding. Forms
.form-row Bootstrap Class Referansı Works similar to a grid .row but is more compact to make the form look more uniform Forms
.h-* Bootstrap Class Referansı Height utility class that makes the element a percentage height of its parent element. h-(25,50,78,100, auto) Utility
.invalid-feedback Bootstrap Class Referansı This class can be added with server side form validation to add a feedback message to an invalid field Forms
.is-* n/a If you do server side form validation you can use this class to set feedback colors on inputs or error message. .is-(valid, invalid) Forms
.justify-content-*-* Bootstrap Class Referansı Class specifies where the flex items will be positioned inside the container. .justify-content-(sm, md, lg, xl)-(start, end, center, between, around) Utility
.m*-*-* n/a Applies margin to an element using responsive breakpoints {property}{sides}-{breakpoint}-{size} 
m(t,b,r,l,x,y)-(sm, md, lg, xl)-(0, 1, 2, 3, 4, 5)
Utility
.p*-*-* n/a Applies padding to an element using responsive breakpoints {property}{sides}-{breakpoint}-{size} 
p(t,b,r,l,x,y)-(sm, md, lg, xl)-(0, 1, 2, 3, 4, 5)
Utility
.progress-bar-animated Bootstrap Class Referansı When this class is added to a progressbar the progress will be animated using css3 animations Progress
.nav-fill Bootstrap Class Referansı Makes all nav items use all available horizontal space. Nav items are different widths baded on their content. Navs
.nav-justified Bootstrap Class Referansı Makes all nav items equal width and use all available horizontal space. Navs
.navbar-collapse n/a The nav links that are collapsed and shown when toggled on mobile widths. Navbar
.navbar-expand-* n/a Since the navbar is displayed collapse on mobile first, this class specifies what breakpoint you want the navbar to not be collapsed Navbar
.navbar-text n/a Vertically centers text inside a navbar Navbar
.navbar-toggler-icon Bootstrap Class Referansı The cheeseburger navigation icon is set using an svg background image of three horizontal lines Navbar
.no-gutters n/a Removes the negative margin on the .row and padding from the child columns. Helpful when you want an image to expand to the edges of the browser without padding on the left and right edges. Grid
.order-*-* Bootstrap Class Referansı This class is used to control how the elements are ordered on the page regardless of their order in the source code. So you can rearrange your layout as needed. Grid
.rounded-* Bootstrap Class Referansı The .img-rounded class was renamed to this and is primarily used with images. However, the class just adds a border radius so you could use this on other elements that you would like a radius applied. You can also add .rounded-sm or .rounded-lg to increase the size of the radius. Images
.visible n/a Hides the visibility of an element but does not change their display property. Utility
.w-* Bootstrap Class Referansı Width utility class that makes the element a percentage width of its parent element. w-(25,50,78,100, auto) Utility
.was-validated Bootstrap Class Referansı This class is set by Bootstrap's javascript to apply sub class validation styles to the form inputs. Forms
.alert-heading Bootstrap Class Referansı This class is added to headings inside alerts. It applies color:inherit so the colors match. Alerts
.blockquote Bootstrap Class Referansı Add to blockquote elements to apply the proper spacing and bottom margin to seperate it from other text. Blockquotes
.blockquote-footer Bootstrap Class Referansı Wrapping class for citation text underneath a blockquote. Used to lighten the text color. Blockquotes
.btn-group-lg Bootstrap Class Referansı Increases the default button group size Button Group
.btn-group-sm Bootstrap Class Referansı Decreases the default button group size Button Group
.btn-group-toggle Bootstrap Class Referansı This class replaces an input checkbox with a custom style that is toggable on click Button Group
.btn-lg Bootstrap Class Referansı Increases the default button size Buttons
.btn-outline-* Bootstrap Class Referansı Transparent background with colored text and border (danger|info|primary|secondary|success|warning) Buttons
.card Bootstrap Class Referansı The class added to the div that wraps each individual card Cards
.card-body Bootstrap Class Referansı This class is added to the first child div inside the div.card parent Cards
.card-columns Bootstrap Class Referansı The .card-columns class is added to the wrapping div of of masonry-like collection of cards Cards
.card-* Bootstrap Class Referansı First add .card-inverse and then add one of the contextual background colors (danger|info|primary|secondary|success|warning) Cards
.card-deck Bootstrap Class Referansı Similar to columns Bootstrap card decks are equal height and width Cards
.card-footer Bootstrap Class Referansı Wrap class for a card footer content area Cards
.card-group Bootstrap Class Referansı The parent wrapping class around a group of cards. Groups are similar to decks but they have no margin between each card. Cards
.card-header Bootstrap Class Referansı Wrap class for a card header content area Cards
.card-header-pills Bootstrap Class Referansı Class added in combination with .nav-pills to add pill navigation to a card header Cards
.card-header-tabs Bootstrap Class Referansı Class added in combination with .nav-pills to add tab navigation to a card header Cards
.card-img Bootstrap Class Referansı Add this class to the image you would like to have as a card background image. Used with creating cards with image overlays. Cards
.card-img-bottom Bootstrap Class Referansı Similar to a card footer you can cap the bottom of a card with an image Cards
.card-img-overlay Bootstrap Class Referansı Wrapper class used to create a card that has a background image overlay Cards
.card-img-top Bootstrap Class Referansı Similar to a card header you can cap the top of a card with an image Cards
.card-inverse Bootstrap Class Referansı Inverts the default colors to use light text on a dark background color Cards
.card-link Bootstrap Class Referansı Adds spacing around links added inside cards Cards
.card-subtitle Bootstrap Class Referansı Class added to card subtitles that adjusts the default heading styles Cards
.card-text Bootstrap Class Referansı This class wraps the container around card text Cards
.card-title Bootstrap Class Referansı The class added to titles inside cards. It applies the proper spacing. Cards
.carousel-item Bootstrap Class Referansı The wrapper class applied to each individual carousel item Carousel
.clearfix n/a Clears the floats of any child elements. Add this class to the parent element wrapping the floating elements. Utility
.col-form-label Bootstrap Class Referansı Class added to form labels to apply consistent padding and margins Forms
.col-form-label-lg Bootstrap Class Referansı Increases the font size and spacing of a form label Forms
.col-form-label-sm Bootstrap Class Referansı Decreases the font size and spacing of a form label Forms
.col-xl-* n/a Set column width for anything greater than 1200px. Specify the column span by adding 1-12 at the end Grid system
.custom-checkbox Bootstrap Class Referansı Parent class that converts a default form checkbox into a custom HTML/CSS checkbox Forms
.custom-control n/a Used on all custom form inputs and adds base styles like padding and display:inline Forms
.custom-control-inline Bootstrap Class Referansı Custom form checkboxes are set to be display:block. Use this class to make the checkbox inline Forms
.custom-control-input n/a This class is added to the default input that is going to be replaced. It adds the following: position: absolute; z-index: -1; opacity: 0; Forms
.custom-control-label Bootstrap Class Referansı When creating a custom form checkbox, this class replaces the default checkbox with custom elements using :before and :after Forms
.custom-file Bootstrap Class Referansı Class added to a label of grouped elements to create a custom file upload input Forms
.custom-file-control Bootstrap Class Referansı Similar to the custom-control-indicator class this class is added to a div to build a custom file input using CSS :before and :after. Forms
.custom-file-input n/a This class is added to the default input type="file" and hides it using CSS Forms
.custom-file-label Bootstrap Class Referansı When creating a custom form file browser, this class replaces the default file browser with custom elements using :after Forms
.custom-radio Bootstrap Class Referansı This class is added to the parent label tag along with .custom-control class to specify what kind of custom input it will be Forms
.custom-select Bootstrap Class Referansı Class added to a select tag to create a custom select menu Forms
.custom-select-sm Bootstrap Class Referansı Decreases the font size and padding on a custom select Forms
.custom-select-lg Bootstrap Class Referansı Increases the relative size of a custom form select Forms
.custom-switch Bootstrap Class Referansı Creates a custom form element that looks like a toggle switch found on touch devices. Forms
.d-* Bootstrap Class Referansı Append the following to change the element display property (block, inline, inline-block) Utility
.disabled Bootstrap Class Referansı Add this class to anchor tags to disable the click functionality but still have them visible. Buttons
.display-* Bootstrap Class Referansı This set of classes increases the font size of headings in 4 stages. These classes are used for headings outside of the main content of the page like jumbotrons and page headers. Append (1-4) to the end to adjust size. Typography
.dropdown-divider Bootstrap Class Referansı Class adds a horizontal line between dropdown link items Dropdowns
.dropdown-item Bootstrap Class Referansı This class is added to each link item shown in a dropdown menu Dropdowns
.dropdown-item-text n/a Removes the interactivity from a dropdown so it does not appear clickable Dropdowns
.dropdown-toggle-split Bootstrap Class Referansı Class added to the notched dropdown navigation. Great for providing additional actions but still having a primary action. Dropdowns
.dropleft Bootstrap Class Referansı Dropdown menu that opens left of the button Dropdowns
.dropright Bootstrap Class Referansı Dropdown menu that opens right of the button Dropdowns
.dropup Bootstrap Class Referansı Displays the dropdown menu above the button instead of below. Dropdowns
.embed-responsive-* n/a Class used to adjust responsive embed aspect ratio. Append one of the following for the desired aspect ratio (21by9, 16by9, 4by3, 1by1) Utility
.embed-responsive-item n/a By default responsive embeds apply to iframe, object, embed, and video tags. You can add .embed-responsive-item to any other element to have the same responsive styles applied Utility
.figure-caption Bootstrap Class Referansı Added to a figure figcaption element to apply font styling Content
.figure-img Bootstrap Class Referansı Classed added to images inside a figure to apply some margin Content
.font-* Bootstrap Class Referansı (italic, weight-bold, weight-light, weight-normal, monospace) Utility
.form-check Bootstrap Class Referansı The parent class of form checkboxes Forms
.form-check-inline Bootstrap Class Referansı Class used for a horizontal group of checkmarks or radio buttons Forms
.form-check-input Bootstrap Class Referansı This class is added to the input tag for checkboxes and radio buttons. Adds styles for positioning and margins. Forms
.form-check-label Bootstrap Class Referansı This class is added to checkbox and radio button labels Forms
.form-control-file Bootstrap Class Referansı The class added to input type="file" to apply font and spacing Forms
.form-control-* Bootstrap Class Referansı Apply this class to form elements to increase or decrease its size relative to the default sizing .form-control-(lg, sm) Forms
.form-inline Bootstrap Class Referansı Use this class to have a series of labels and form elements on a single horizontal row Forms
.form-text Bootstrap Class Referansı This class is used for help text alongside form elements. You can add .text-muted to make the text lighter in color Forms
.has-* Bootstrap Class Referansı The .has-(success, warning, danger) is added to the parent form element container to apply visual feedback to the user on form validation. Forms
.img-fluid Bootstrap Class Referansı This class is applied to images you would like to be responsive or fluid width across various screen sizes. This was .img-responsive in v3 Images
.input-group-* Bootstrap Class Referansı This class lets you extend form controls by adding text or buttons to the left or right of the input. .input-group-(addon|btn) Input Group
.input-group-append Bootstrap Class Referansı This class adds margin-left: -1px; to the input set to left of the group to compensate for the 1px border Input Group
.input-group-prepend Bootstrap Class Referansı This class adds margin-right: -1px; to the input set to right of the group to compensate for the 1px border Input Group
.input-group-text Bootstrap Class Referansı This class adds the background color and text styles to the text inside an input group Forms
.jumbotron-fluid Bootstrap Class Referansı A default jumbotron is not full width but adding this class removes the rounded corners and makes it extend to 100% of its parent Jumbotron
.list-group-flush Bootstrap Class Referansı When adding a list group to a card add this class to the list group to remove the border. Otherwise you will have a double border. Cards
.list-group-item-action Bootstrap Class Referansı Add this class to each anchor in a list-group to remove the default anchor text color List Group
.list-inline Bootstrap Class Referansı Change ul or ol list to be listed horizontally with a little margin between each li Typography
.m*-# Bootstrap Class Referansı Sometimes you need to add some margin or padding to element without writing a custom CSS selector. Set margin or padding, the side to apply the spacing, and lastly the size of the spacing (m,p)-(t|r|b|l|x|y|a)-(0,1,2,1.5,3) Utility
.media-bottom Bootstrap Class Referansı Add this class the div wrapping the media object image to align it to the bottom Media Object
.media-left Bootstrap Class Referansı Add this class the div wrapping the media object image to align it to the left Media Object
.media-middle Bootstrap Class Referansı Add this class the div wrapping the media object image to center it vertically Media Object
.media-right Bootstrap Class Referansı Add this class the div wrapping the media object image to align it to the right Media Object
.nav-item Bootstrap Class Referansı If your nav uses a list add this class to each list item for the proper spacing Navs
.nav-link Bootstrap Class Referansı Each anchor link inside your nav is given this class in order to have the proper styling Navs
.nav-pills Bootstrap Class Referansı Use this class along with .nav to make each nav link into a button Navs
.navbar-light Bootstrap Class Referansı Add this class to your navbar if you would like it to have a light background and dark text Navbar
.navbar-toggler Bootstrap Class Referansı The infamous cheeseburger icon to signify a navigation menu on mobile Navbar
.offset-*-* Bootstrap Class Referansı Used to offset a grid column from its original position Grid System
.p*-# Bootstrap Class Referansı Sometimes you need to add some margin or padding to element without writing a custom CSS selector. Set margin or padding, the side to apply the spacing, and lastly the size of the spacing (m,p)-(t|r|b|l|x|y|a)-(0,1,2,1.5,3) Utilities
.page-item Bootstrap Class Referansı This class is added to each li inside the ul.pagination and floats the li's' Pagination
.page-link Bootstrap Class Referansı This class is added to each anchor link containing the numbers Pagination
.pagination-sm Bootstrap Class Referansı Decreases the font size and spacing of a pagination nav Pagination
.pagination-lg Bootstrap Class Referansı Increases the font size and spacing of a pagination nav Pagination
.position-* N/A Not responsive, but a group of utility classes to add common position values. .position-(absolute, fixed, relative, static, sticky) Utilities
.shadow-* Bootstrap Class Referansı Adds a black CSS box shadow to an element. .shadow-(none, sm, lg) Utility
.pos-f-t n/a Positions an element fixed to the top of the viewport and full width. Utility
.sr-only n/a Hide element to all devices except screen readers Utilities
.sr-only-focusable n/a Combine .sr-only with .sr-only-focusable to show the element again when it’s focused by a user using a keyboard Utilities
.stretched-link Bootstrap Class Referansı This class extends the clickable area of an anchor link to fill the parent container. The parent container must have a position:relative for this to work properly. Utilities
.table-* Bootstrap Class Referansı Adds a 1px stroke around the rows, columns, and table outline. You can also remove the borders entirely. .table-(bordered, borderless) Tables
.table-* Bootstrap Class Referansı Contextual classes of different color styles to provide user feedback (active|danger|info|primary|secondary|success|warning) Tables
.table-hover Bootstrap Class Referansı Adds a background color when you hover a table row Tables
.table-reflow Bootstrap Class Referansı The table header becomes the first column of the table to the left Tables
.table-sm Bootstrap Class Referansı Removes vertical padding between table rows so it does not take as much vertical space. Good for tables with a lot of rows. Tables
.table-striped Bootstrap Class Referansı Adds a light background color to every other table row for a striped effect Tables
.text-*-* Bootstrap Class Referansı Aligns text left, right or center use choose breakpoint (xs|sm|md|lg|xl) then alignment (left, right, center) Utilities
.text-break Bootstrap Class Referansı When you are building applications that have long strings or user generated content, this class breaks the long text so that it does not break the layout. Without this, the text would be as wide as the string itself. Utilities
.thead-dark Bootstrap Class Referansı The default table head styling of light background and dark text Tables
.thead-light Bootstrap Class Referansı Inverts the table head to have a dark background and light text Tables
.alert Bootstrap Class Referansı The .alert class adds base styling with padding and margin. Alerts
.alert-* Bootstrap Class Referansı Change the color of the alert to provide user feedback. (primary, secondary, success, danger, warning, info, light, dark) Alerts
.alert-dismissible Bootstrap Class Referansı Similar to a well it is a box with a border and padding. This class and a child element with a .close class lets the user close the alert. Alerts
.alert-link Bootstrap Class Referansı When you add links inside alert this class matches the font color to the parent alert class. Alerts
.active Bootstrap Class Referansı Tables contextual class to change row color Tables
.bg-danger Bootstrap Class Referansı Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Helper Classes
.bg-info Bootstrap Class Referansı Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Helper Classes
.bg-primary Bootstrap Class Referansı Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Helper Classes
.bg-success Bootstrap Class Referansı Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Helper Classes
.bg-warning Bootstrap Class Referansı Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Helper Classes
.breadcrumb Bootstrap Class Referansı Indicate the current page's location within a navigational hierarchy. Breadcrumbs
.btn Bootstrap Class Referansı This class sets the spacing and size of the button. Buttons
.btn-block Bootstrap Class Referansı By default buttons are inline this class makes it block to span the full width of its parent. Buttons
.btn-danger Bootstrap Class Referansı Defaults to a red background button Buttons
.btn-group Bootstrap Class Referansı Smushes multiple buttons together to make a pill shape. Each button is separated by a vertical line. Button groups
.btn-group-vertical Bootstrap Class Referansı Make a set of buttons appear vertically stacked rather than horizontally. Button groups
.btn-info Bootstrap Class Referansı Button for information on a topic like terms and conditions. Default is light blue. Buttons
.btn-link Bootstrap Class Referansı Keeps the spacing set with the .btn class but removes the outer border. Buttons
.btn-lg Bootstrap Class Referansı Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes. Buttons
.btn-primary Bootstrap Class Referansı Use for the primary action in a set. Buttons
.btn-sm Bootstrap Class Referansı Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes. Buttons
.btn-success Bootstrap Class Referansı Defaults to a green background button with dark border. Buttons
.btn-toolbar Bootstrap Class Referansı Used to create a row of buttons similar pagination row Button groups
.btn-warning Bootstrap Class Referansı Defaults to a yellow background button with dark border. Buttons
.carousel Bootstrap Class Referansı parent carousel class making it position relative Carousel
.carousel-caption Bootstrap Class Referansı Caption for each slide item Carousel
.carousel-indicators Bootstrap Class Referansı parent classed added to an ordered list for the little circles showing what slide you are on Carousel
.carousel-inner Bootstrap Class Referansı The div wrapper that contains the carousel slide items Carousel
.close Bootstrap Class Referansı Use the generic close icon for dismissing content like modals and alerts. Helper Classes
.col-*-* Bootstrap Class Referansı span 1-12 column. Extra small devices Phones ( < 768px), Small devices Tablets (≥768px), Medium devices Desktops (≥992px), Large devices Desktops (≥1200px). Column device Column numeric values can be 1-12. Grid system
.col-*-pull-* Bootstrap Class Referansı Easily change the order of our built-in grid columns with .col-*-push-* and .col-*-pull-* modifier classes. Pull numeric values can be 0-12. Grid system
.col-*-push-* Bootstrap Class Referansı Easily change the order of our built-in grid columns with .col-*-push-* and .col-*-pull-* modifier classes. Push numeric values can be 0-12. Grid system
.collapse Bootstrap Class Referansı hides content on hide and show component Collapse
.collapsing Bootstrap Class Referansı applied during transitions on hide and show component Collapse
.container Bootstrap Class Referansı Fixed width container with widths determined by screen sites. Equal margin on the left and right. Grid system
.container-fluid Bootstrap Class Referansı Spans the full width of the screen Grid system
.dropdown Bootstrap Class Referansı This class gives you the ability to add a dropdown to navbar, tabs, and pills so you can display a dropdown of additional navigation. Dropdowns
.dropdown-header Bootstrap Class Referansı Used to add headers inside the dropdown menu Dropdown
.dropdown-menu Bootstrap Class Referansı Adds the default styles for the dropdown menu container Dropdown
.dropdown-toggle Bootstrap Class Referansı This class is added to the button that will have the toggle action applied that will hide and show the dropdown menu Dropdown
.embed-responsive Bootstrap Class Referansı The default responsive iframe embed styles Embed
.embed-responsive-16by9 Bootstrap Class Referansı Div wrapper class to make child iframe responsive Embed
.embed-responsive-4by3 Bootstrap Class Referansı Div wrapper class to make child iframe responsive Embed
.fade Bootstrap Class Referansı To have your alerts use animation when closing, make sure they have the .fade and .in classes already applied to them. Alerts
.form-control Bootstrap Class Referansı Class added input, textarea, and select to make them 100% and responsive Forms
.form-group Bootstrap Class Referansı A div wrapper class that goes around a form input and label Forms
.h1 - .h6 Bootstrap Class Referansı Apply heading styles to other elements. Make a paragraph look like an h1 Typography
.img-thumbnail Bootstrap Class Referansı Adds rounded corners and an inset border to an image Images
.info Bootstrap Class Referansı Tables contextual class to change row color" target="_blank" href="https://getbootstrap.com/docs/4.3/content/tables/#contextual-classes Tables
.initialism Bootstrap Class Referansı Add .initialism to an abbreviation for a slightly smaller font-size. Typography
.input-group Bootstrap Class Referansı Wrapper class used to enhance an input and label group by adding a button in front or behind as help text Input groups
.invisible Bootstrap Class Referansı Make something invisible Helper Classes
.jumbotron Bootstrap Class Referansı A content section that is used to showcase important content. Commonly used on home pages and category pages. Jumbotron
.lead Bootstrap Class Referansı Increase the font size and line height of a paragraph. Good to use on the first paragraph of an article to improve readability. Typography
.list-group Bootstrap Class Referansı Wrapper ul class that contains li with borders List group
.list-group-horizontal Bootstrap Class Referansı The list group items are positioned horizontal intead of vertically. Be careful of long lists because they can break the layout. example List group
.list-group-item Bootstrap Class Referansı Class added to each li in a list-group List group
.list-group-item-text Bootstrap Class Referansı Class added to an anchor or p for a .list-group-item text under a heading List group
.list-group-item-* Bootstrap Class Referansı Change color of list group item by adding one of the following: default, warning, info, danger, primary List group
.list-inline Bootstrap Class Referansı Overrides a lists default style to be inline and block Typography
.list-unstyled Bootstrap Class Referansı Removes all bullet styling from a ul or ol list Typography
.mark Bootstrap Class Referansı For highlighting a run of text due to its relevance in another context, use the mark tag. Typography
.media Bootstrap Class Referansı Media components are image heading and description text items. Blog comments, portfolio projects, album covers, etc. Media object
.media-body Bootstrap Class Referansı The class added for the media description copy block Media object
.modal Bootstrap Class Referansı The parent wrapper class of modal content Modal
.modal-backdrop Bootstrap Class Referansı Added by the modal javascript to make the area around the modal clickable to hide the modal Modal
.modal-body Bootstrap Class Referansı The modal body content class : Header - Body - Footer Modal
.modal-content Bootstrap Class Referansı modal-content contains modal-body, modal-header, and modal-footer Modal
.modal-dialog Bootstrap Class Referansı The secondary wrapper class of the entire modal content Modal
.modal-dialog-centered Bootstrap Class Referansı Vertically and horizontally centers a modal dialog Modal
.modal-footer Bootstrap Class Referansı The footer of the modal that contains action buttons or help text Modal
.modal-header Bootstrap Class Referansı The header section of the modal that contains the title and close button Modal
.modal-lg Bootstrap Class Referansı Makes a modal wider Modal
.modal-open Bootstrap Class Referansı Javascript adds this class to the body tag to prevent scrolling with the modal is open Modal
.modal-sm Bootstrap Class Referansı Makes the modal not as wide Modal
.modal-title Bootstrap Class Referansı The title of the modal Modal
.nav Bootstrap Class Referansı nav base class added all types of navigation: tabs, pills, justified, disabled links Navs
.nav-tabs Bootstrap Class Referansı Class added to enable Bootstrap tabs Tab
.navbar Bootstrap Class Referansı Navigation header class Navbar
.navbar-brand Bootstrap Class Referansı Most navbars contain a logo or brand. This class is added to the anchor Navbar
.navbar-nav Bootstrap Class Referansı The wrapper class of the navigation elements excluding the brand Navbar
.next Bootstrap Class Referansı Used in the carousel control to identity the next control Carousel
.pagination Bootstrap Class Referansı The wrapper class that contains all of the page navigation Pagination
.pre-scrollable Bootstrap Class Referansı You may optionally add the .pre-scrollable class, which will set a max-height of 350px and provide a y-axis scrollbar. Code
.progress Bootstrap Class Referansı The parent class wrapper of a progress bar Progress bars
.progress-bar Bootstrap Class Referansı The class applied to the progress bar graphic that moves Progress bars
.progress-bar-striped Bootstrap Class Referansı Changes progress to a striped version Progress bars
.row Bootstrap Class Referansı used a parent wrapper of any vertical columns Grid system
.small Bootstrap Class Referansı Create lighter, secondary text in any heading with a generic tag or the .small class. Typography
.sr-only Bootstrap Class Referansı Hide an element to all devices except screen readers with .sr-only. Helper Classes
.success Bootstrap Class Referansı Tables contextual class to change row color Tables
.tab-pane Bootstrap Class Referansı Class added to the div that will act as a tab content area Tab
.table Bootstrap Class Referansı Adding this class to a HTML table applies the Bootstrap styles Tables
.table-sm Bootstrap Class Referansı Removes some padding from the table cells Tables
.table-bordered Bootstrap Class Referansı Adds borders to a table and its cells Tables
.table-responsive-* Bootstrap Class Referansı Makes a table responsive by cropping a wide table and makes it scrollable horizontally. .table-responsive or .table-responsive-(lg, md, sm, xl) Tables
.text-capitalize Bootstrap Class Referansı Capitalize the text or title case Typography
.text-justify Bootstrap Class Referansı Full justifys the text Typography
.text-lowercase Bootstrap Class Referansı Changes text to lowercase Typography
.text-nowrap Bootstrap Class Referansı Prevents the text from wrapping Typography
.text-* Bootstrap Class Referansı Changes text color to a contextual color or grayscale value .text-(primary, secondary, success, danger, warning, info, light, dark, body, muted, white, black-50, white-50) Color
.text-uppercase Bootstrap Class Referansı Makes text uppercase Typography
.tooltip Bootstrap Class Referansı This class is used by the tooltip javascript as the wrapper of the toolitp Tooltip
.tooltip-inner Bootstrap Class Referansı The wrapper class of tooltip text. This is generated by the Bootstrap javascript
 
Some tooltip text!
Tooltip
 

 

Kaynaklar:

 

Yorumunuzu Ekleyin
Bootstrap CSS Componentleri

Bootstrap ile kullanılan CSS destekli HTML Componentlerden bazıları..

16,175 Okunma 0 Yorum 12/01/2018 21:43:41 13/01/2018 00:44:45

Bootstrap Grid Sistemi

Bildiğiniz gibi Bootstrap ile responsive tasarımlar yapmak çok basit ve hızlı. İstediğimiz her öğe için birer yapılmış ve kopyala yapıştır yaparak hızlıca sitemizi Bootstrap ile şekillendirebiliriz.

14,092 Okunma 0 Yorum 25/10/2014 19:05:47 25/10/2014 19:06:28

Bootstrap Form Elemanları

Bootstrapın temel form mantığı ve bir kaç örnek...

12,837 Okunma 0 Yorum 11/09/2018 14:33:20 11/09/2018 14:33:52

Bootstrap 3 JavaScript Componentleri

Bootstrap ile kullanılan Javascript destekli Componentlerden bazıları... Makalenin bazı bölümleri ingilizcedir.

8,564 Okunma 0 Yorum 24/11/2014 15:36:14 20/02/2017 23:06:13

Yükleniyor...