বুটস্ট্রাপ ৪ এর সকল ক্লাসসমূহ

বুটস্ট্রাপের সকল ক্লাস একসাথে পাওয়া মুশকিল, আবার কোন ক্লাসের কি কাজ সেটাও বোঝা কষ্টদায়ক। এখানে বুটস্ট্রাপের ৪.৪.১ ভার্সনের প্রায় সকল ক্লাস দেয়া হয়েছে। এখান থেকে বুটস্ট্রাপ ক্লাসের পাশাপাশি প্রতিটা ক্লাসের লিংক করে দেয়া হয়েছে, সরাসরি ডকুমেন্ট দেখে বিস্তারিত জেনে নিতে পারবেন। এছাড়া Cheat Sheet পিডিএফ আকারে ডাউনলোড করতে এখানে ক্লিক করুন। উপকৃত হলে কমেন্ট করতে যেন ভুলবেন না

Class NameDescriptionCategory
.align-*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-*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-*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-*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-*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-*Used for labels and counters in applications .badge-(light, dark primary, secondary, transparent, white, warning, success, info, danger)Badge
.bg-*Background color utility classes: .bg-(light, dark primary, secondary, transparent, white, warning, success, info, danger)Utilities
.border-*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-*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-*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-fadeAnimates the slide transition with a crossfade instead of a slideUtility
.colFlexbox 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-*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-rangeChanges the default styling of a form input rangeForms
.d-flexSets the element to have have the style property display:flex;Utility
.d-noneSets the element to have have the style property display:none;Utility
.d-*-*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-*Changes the display of elements when you print the document. .d-print-(flex, inline-flex, table, table-cell, table-row)Utility
.fixed-*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-*-*-*Change the flexbox items layout, alignment, or size. .flex-(sm, md, lg, xl)-(row, row-reverse, column)Utility
.flex-fill-*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)-*Forces an element to grow or shrink to use more or less of the space available .flex-(grow, shrink)-(0, 1)Utility
.float-*-*Responsive utility to float an element. .float-(sm, md, lg, xl)-(none, left, right)Utility
.form-control-plaintextUse the .form-control-plaintext class to remove the default form field styling and preserve the correct margin and padding.Forms
.form-rowWorks similar to a grid .row but is more compact to make the form look more uniformForms
.h-*Height utility class that makes the element a percentage height of its parent element. h-(25,50,78,100, auto)Utility
.invalid-feedbackThis class can be added with server side form validation to add a feedback message to an invalid fieldForms
.is-*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-*-*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*-*-*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*-*-*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-animatedWhen this class is added to a progressbar the progress will be animated using css3 animationsProgress
.nav-fillMakes all nav items use all available horizontal space. Nav items are different widths baded on their content.Navs
.nav-justifiedMakes all nav items equal width and use all available horizontal space.Navs
.navbar-collapseThe nav links that are collapsed and shown when toggled on mobile widths.Navbar
.navbar-expand-*Since the navbar is displayed collapse on mobile first, this class specifies what breakpoint you want the navbar to not be collapsedNavbar
.navbar-textVertically centers text inside a navbarNavbar
.navbar-toggler-iconThe cheeseburger navigation icon is set using an svg background image of three horizontal linesNavbar
.no-guttersRemoves 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-*-*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-*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
.visibleHides the visibility of an element but does not change their display property.Utility
.w-*Width utility class that makes the element a percentage width of its parent element. w-(25,50,78,100, auto)Utility
.was-validatedThis class is set by Bootstrap’s javascript to apply sub class validation styles to the form inputs.Forms
.alert-headingThis class is added to headings inside alerts. It applies color:inherit so the colors match.Alerts
.blockquoteAdd to blockquote elements to apply the proper spacing and bottom margin to seperate it from other text.Blockquotes
.blockquote-footerWrapping class for citation text underneath a blockquote. Used to lighten the text color.Blockquotes
.btn-group-lgIncreases the default button group sizeButton Group
.btn-group-smDecreases the default button group sizeButton Group
.btn-group-toggleThis class replaces an input checkbox with a custom style that is toggable on clickButton Group
.btn-lgIncreases the default button sizeButtons
.btn-outline-*Transparent background with colored text and border (danger|info|primary|secondary|success|warning)Buttons
.cardThe class added to the div that wraps each individual cardCards
.card-bodyThis class is added to the first child div inside the div.card parentCards
.card-columnsThe .card-columns class is added to the wrapping div of of masonry-like collection of cardsCards
.card-*First add .card-inverse and then add one of the contextual background colors (danger|info|primary|secondary|success|warning)Cards
.card-deckSimilar to columns Bootstrap card decks are equal height and widthCards
.card-footerWrap class for a card footer content areaCards
.card-groupThe parent wrapping class around a group of cards. Groups are similar to decks but they have no margin between each card.Cards
.card-headerWrap class for a card header content areaCards
.card-header-pillsClass added in combination with .nav-pills to add pill navigation to a card headerCards
.card-header-tabsClass added in combination with .nav-pills to add tab navigation to a card headerCards
.card-imgAdd 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-bottomSimilar to a card footer you can cap the bottom of a card with an imageCards
.card-img-overlayWrapper class used to create a card that has a background image overlayCards
.card-img-topSimilar to a card header you can cap the top of a card with an imageCards
.card-inverseInverts the default colors to use light text on a dark background colorCards
.card-linkAdds spacing around links added inside cardsCards
.card-subtitleClass added to card subtitles that adjusts the default heading stylesCards
.card-textThis class wraps the container around card textCards
.card-titleThe class added to titles inside cards. It applies the proper spacing.Cards
.carousel-itemThe wrapper class applied to each individual carousel itemCarousel
.clearfixClears the floats of any child elements. Add this class to the parent element wrapping the floating elements.Utility
.col-form-labelClass added to form labels to apply consistent padding and marginsForms
.col-form-label-lgIncreases the font size and spacing of a form labelForms
.col-form-label-smDecreases the font size and spacing of a form labelForms
.col-xl-*Set column width for anything greater than 1200px. Specify the column span by adding 1-12 at the endGrid system
.custom-checkboxParent class that converts a default form checkbox into a custom HTML/CSS checkboxForms
.custom-controlUsed on all custom form inputs and adds base styles like padding and display:inlineForms
.custom-control-inlineCustom form checkboxes are set to be display:block. Use this class to make the checkbox inlineForms
.custom-control-inputThis 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-labelWhen creating a custom form checkbox, this class replaces the default checkbox with custom elements using :before and :afterForms
.custom-fileClass added to a label of grouped elements to create a custom file upload inputForms
.custom-file-controlSimilar 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-inputThis class is added to the default input type=”file” and hides it using CSSForms
.custom-file-labelWhen creating a custom form file browser, this class replaces the default file browser with custom elements using :afterForms
.custom-radioThis class is added to the parent label tag along with .custom-control class to specify what kind of custom input it will beForms
.custom-selectClass added to a select tag to create a custom select menuForms
.custom-select-smDecreases the font size and padding on a custom selectForms
.custom-select-lgIncreases the relative size of a custom form selectForms
.custom-switchCreates a custom form element that looks like a toggle switch found on touch devices.Forms
.d-*Append the following to change the element display property (block, inline, inline-block)Utility
.disabledAdd this class to anchor tags to disable the click functionality but still have them visible.Buttons
.display-*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-dividerClass adds a horizontal line between dropdown link itemsDropdowns
.dropdown-itemThis class is added to each link item shown in a dropdown menuDropdowns
.dropdown-item-textRemoves the interactivity from a dropdown so it does not appear clickableDropdowns
.dropdown-toggle-splitClass added to the notched dropdown navigation. Great for providing additional actions but still having a primary action.Dropdowns
.dropleftDropdown menu that opens left of the buttonDropdowns
.droprightDropdown menu that opens right of the buttonDropdowns
.dropupDisplays the dropdown menu above the button instead of below.Dropdowns
.embed-responsive-*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-itemBy 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 appliedUtility
.figure-captionAdded to a figure figcaption element to apply font stylingContent
.figure-imgClassed added to images inside a figure to apply some marginContent
.font-*(italic, weight-bold, weight-light, weight-normal, monospace)Utility
.form-checkThe parent class of form checkboxesForms
.form-check-inlineClass used for a horizontal group of checkmarks or radio buttonsForms
.form-check-inputThis class is added to the input tag for checkboxes and radio buttons. Adds styles for positioning and margins.Forms
.form-check-labelThis class is added to checkbox and radio button labelsForms
.form-control-fileThe class added to input type=”file” to apply font and spacingForms
.form-control-*Apply this class to form elements to increase or decrease its size relative to the default sizing .form-control-(lg, sm)Forms
.form-inlineUse this class to have a series of labels and form elements on a single horizontal rowForms
.form-textThis class is used for help text alongside form elements. You can add .text-muted to make the text lighter in colorForms
.has-*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-fluidThis class is applied to images you would like to be responsive or fluid width across various screen sizes. This was .img-responsive in v3Images
.input-group-*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-appendThis class adds margin-left: -1px; to the input set to left of the group to compensate for the 1px borderInput Group
.input-group-prependThis class adds margin-right: -1px; to the input set to right of the group to compensate for the 1px borderInput Group
.input-group-textThis class adds the background color and text styles to the text inside an input groupForms
.jumbotron-fluidA default jumbotron is not full width but adding this class removes the rounded corners and makes it extend to 100% of its parentJumbotron
.list-group-flushWhen 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-actionAdd this class to each anchor in a list-group to remove the default anchor text colorList Group
.list-inlineChange ul or ol list to be listed horizontally with a little margin between each liTypography
.m*-#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-bottomAdd this class the div wrapping the media object image to align it to the bottomMedia Object
.media-leftAdd this class the div wrapping the media object image to align it to the leftMedia Object
.media-middleAdd this class the div wrapping the media object image to center it verticallyMedia Object
.media-rightAdd this class the div wrapping the media object image to align it to the rightMedia Object
.nav-itemIf your nav uses a list add this class to each list item for the proper spacingNavs
.nav-linkEach anchor link inside your nav is given this class in order to have the proper stylingNavs
.nav-pillsUse this class along with .nav to make each nav link into a buttonNavs
.navbar-lightAdd this class to your navbar if you would like it to have a light background and dark textNavbar
.navbar-togglerThe infamous cheeseburger icon to signify a navigation menu on mobileNavbar
.offset-*-*Used to offset a grid column from its original positionGrid System
.p*-#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-itemThis class is added to each li inside the ul.pagination and floats the li’s’Pagination
.page-linkThis class is added to each anchor link containing the numbersPagination
.pagination-smDecreases the font size and spacing of a pagination navPagination
.pagination-lgIncreases the font size and spacing of a pagination navPagination
.position-*Not responsive, but a group of utility classes to add common position values. .position-(absolute, fixed, relative, static, sticky)Utilities
.shadow-*Adds a black CSS box shadow to an element. .shadow-(none, sm, lg)Utility
.pos-f-tPositions an element fixed to the top of the viewport and full width.Utility
.sr-onlyHide element to all devices except screen readersUtilities
.sr-only-focusableCombine .sr-only with .sr-only-focusable to show the element again when it’s focused by a user using a keyboardUtilities
.stretched-linkThis 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-*Adds a 1px stroke around the rows, columns, and table outline. You can also remove the borders entirely. .table-(bordered, borderless)Tables
.table-*Contextual classes of different color styles to provide user feedback (active|danger|info|primary|secondary|success|warning)Tables
.table-hoverAdds a background color when you hover a table rowTables
.table-reflowThe table header becomes the first column of the table to the leftTables
.table-smRemoves vertical padding between table rows so it does not take as much vertical space. Good for tables with a lot of rows.Tables
.table-stripedAdds a light background color to every other table row for a striped effectTables
.text-*-*Aligns text left, right or center use choose breakpoint (xs|sm|md|lg|xl) then alignment (left, right, center)Utilities
.text-breakWhen 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-darkThe default table head styling of light background and dark textTables
.thead-lightInverts the table head to have a dark background and light textTables
.alertThe .alert class adds base styling with padding and margin.Alerts
.alert-*Change the color of the alert to provide user feedback. (primary, secondary, success, danger, warning, info, light, dark)Alerts
.alert-dismissibleSimilar 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-linkWhen you add links inside alert this class matches the font color to the parent alert class.Alerts
.activeTables contextual class to change row colorTables
.bg-dangerSimilar 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-infoSimilar 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-primarySimilar 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-successSimilar 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-warningSimilar 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
.breadcrumbIndicate the current page’s location within a navigational hierarchy.Breadcrumbs
.btnThis class sets the spacing and size of the button.Buttons
.btn-blockBy default buttons are inline this class makes it block to span the full width of its parent.Buttons
.btn-dangerDefaults to a red background buttonButtons
.btn-groupSmushes multiple buttons together to make a pill shape. Each button is separated by a vertical line.Button groups
.btn-group-verticalMake a set of buttons appear vertically stacked rather than horizontally.Button groups
.btn-infoButton for information on a topic like terms and conditions. Default is light blue.Buttons
.btn-linkKeeps the spacing set with the .btn class but removes the outer border.Buttons
.btn-lgFancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.Buttons
.btn-primaryUse for the primary action in a set.Buttons
.btn-smFancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.Buttons
.btn-successDefaults to a green background button with dark border.Buttons
.btn-toolbarUsed to create a row of buttons similar pagination rowButton groups
.btn-warningDefaults to a yellow background button with dark border.Buttons
.carouselparent carousel class making it position relativeCarousel
.carousel-captionCaption for each slide itemCarousel
.carousel-indicatorsparent classed added to an ordered list for the little circles showing what slide you are onCarousel
.carousel-innerThe div wrapper that contains the carousel slide itemsCarousel
.closeUse the generic close icon for dismissing content like modals and alerts.Helper Classes
.col-*-*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-*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-*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
.collapsehides content on hide and show componentCollapse
.collapsingapplied during transitions on hide and show componentCollapse
.containerFixed width container with widths determined by viewport size. Equal margin on the left and right.Grid system
.container-{breakpoint}width: 100% until the specified breakpointGrid system
.container-fluidSpans the full width of the screenGrid system
.dropdownThis 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-headerUsed to add headers inside the dropdown menuDropdown
.dropdown-menuAdds the default styles for the dropdown menu containerDropdown
.dropdown-toggleThis class is added to the button that will have the toggle action applied that will hide and show the dropdown menuDropdown
.embed-responsiveThe default responsive iframe embed stylesEmbed
.embed-responsive-16by9Div wrapper class to make child iframe responsiveEmbed
.embed-responsive-4by3Div wrapper class to make child iframe responsiveEmbed
.fadeTo have your alerts use animation when closing, make sure they have the .fade and .in classes already applied to them.Alerts
.form-controlClass added input, textarea, and select to make them 100% and responsiveForms
.form-groupA div wrapper class that goes around a form input and labelForms
.h1 – .h6Apply heading styles to other elements. Make a paragraph look like an h1Typography
.img-thumbnailAdds rounded corners and an inset border to an imageImages
.infoTables contextual class to change row color” target=”_blank” href=”https://getbootstrap.com/docs/4.4/content/tables/#contextual-classesTables
.initialismAdd .initialism to an abbreviation for a slightly smaller font-size.Typography
.input-groupWrapper class used to enhance an input and label group by adding a button in front or behind as help textInput groups
.invisibleMake something invisibleHelper Classes
.jumbotronA content section that is used to showcase important content. Commonly used on home pages and category pages.Jumbotron
.leadIncrease the font size and line height of a paragraph. Good to use on the first paragraph of an article to improve readability.Typography
.list-groupWrapper ul class that contains li with bordersList group
.list-group-horizontalThe list group items are positioned horizontal intead of vertically. Be careful of long lists because they can break the layout. exampleList group
.list-group-itemClass added to each li in a list-groupList group
.list-group-item-textClass added to an anchor or p for a .list-group-item text under a headingList group
.list-group-item-*Change color of list group item by adding one of the following: default, warning, info, danger, primaryList group
.list-inlineOverrides a lists default style to be inline and blockTypography
.list-unstyledRemoves all bullet styling from a ul or ol listTypography
.markFor highlighting a run of text due to its relevance in another context, use the mark tag.Typography
.mediaMedia components are image heading and description text items. Blog comments, portfolio projects, album covers, etc.Media object
.media-bodyThe class added for the media description copy blockMedia object
.modalThe parent wrapper class of modal contentModal
.modal-backdropAdded by the modal javascript to make the area around the modal clickable to hide the modalModal
.modal-bodyThe modal body content class : Header – Body – FooterModal
.modal-contentmodal-content contains modal-body, modal-header, and modal-footerModal
.modal-dialogThe secondary wrapper class of the entire modal contentModal
.modal-dialog-centeredVertically and horizontally centers a modal dialogModal
.modal-footerThe footer of the modal that contains action buttons or help textModal
.modal-headerThe header section of the modal that contains the title and close buttonModal
.modal-lgMakes a modal widerModal
.modal-openJavascript adds this class to the body tag to prevent scrolling with the modal is openModal
.modal-smMakes the modal not as wideModal
.modal-titleThe title of the modalModal
.navnav base class added all types of navigation: tabs, pills, justified, disabled linksNavs
.nav-tabsClass added to enable Bootstrap tabsTab
.navbarNavigation header classNavbar
.navbar-brandMost navbars contain a logo or brand. This class is added to the anchorNavbar
.navbar-navThe wrapper class of the navigation elements excluding the brandNavbar
.nextUsed in the carousel control to identity the next controlCarousel
.paginationThe wrapper class that contains all of the page navigationPagination
.pre-scrollableYou may optionally add the .pre-scrollable class, which will set a max-height of 350px and provide a y-axis scrollbar.Code
.progressThe parent class wrapper of a progress barProgress bars
.progress-barThe class applied to the progress bar graphic that movesProgress bars
.progress-bar-stripedChanges progress to a striped versionProgress bars
.rowused a parent wrapper of any vertical columnsGrid system
.row-cols-*-*Instead of setting the column width on the .col you can specify the column grid on the .row. This can be used for a list of posts or for making a responsive card deck. Example .col-(sm,md,lg,xl)-(1-6)Grid system
.smallCreate lighter, secondary text in any heading with a generic tag or the .small class.Typography
.sr-onlyHide an element to all devices except screen readers with .sr-only.Helper Classes
.successTables contextual class to change row colorTables
.tab-paneClass added to the div that will act as a tab content areaTab
.tableAdding this class to a HTML table applies the Bootstrap stylesTables
.table-smRemoves some padding from the table cellsTables
.table-borderedAdds borders to a table and its cellsTables
.table-responsive-*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-capitalizeCapitalize the text or title caseTypography
.text-justifyFull justifys the textTypography
.text-lowercaseChanges text to lowercaseTypography
.text-nowrapPrevents the text from wrappingTypography
.text-*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-uppercaseMakes text uppercaseTypography
.tooltipThis class is used by the tooltip javascript as the wrapper of the toolitpTooltip
.tooltip-innerThe wrapper class of tooltip text. This is generated by the Bootstrap javascriptSome tooltip text!Tooltip

Leave a Comment