Bootstrap 5 Table Always responsive Last Updated : 30 Jul, 2024 Comments Improve Suggest changes Like Article Like Report Bootstrap 5 Table Always responsive is used for horizontal scrolling of the table across all the viewports or specific viewports. To scroll the table horizontally for all the viewports, we can add a class table-responsive.Bootstrap 5 Table Always responsive Class:table-responsive: This class is used to scroll the table horizontally.Syntax:<div class="table-responsive"> <table class="table"> ... </table></div>Example 1: In this example, we will learn about Table Always Responsive. HTML <!DOCTYPE html> <html> <head> <!-- Bootstrap CDN --> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <title>Bootstrap 5 Table Always responsive</title> </head> <body> <div class="container text-center col-6"> <h1 class="text-success"> GeeksforGeeks </h1> <h2>Bootstrap 5 Table Always responsive</h2> <div class="table-responsive"> <table class="table"> <thead> <tr> <td>State</td> <td>Capital</td> <td>State</td> <td>Capital</td> <td>State</td> <td>Capital</td> <td>State</td> <td>Capital</td> <td>State</td> <td>Capital</td> <td>State</td> <td>Capital</td> </tr> </thead> <tbody> <tr class="table-active"> <td>Uttar Pradesh</td> <td>Lucknow</td> <td>Uttar Pradesh</td> <td>Lucknow</td> <td>Uttar Pradesh</td> <td>Lucknow</td> <td>Uttar Pradesh</td> <td>Lucknow</td> <td>Uttar Pradesh</td> <td>Lucknow</td> <td>Uttar Pradesh</td> <td>Lucknow</td> </tr> <tr> <td>Punjab</td> <td>Chandigarh</td> <td>Punjab</td> <td>Chandigarh</td> <td>Punjab</td> <td>Chandigarh</td> <td>Punjab</td> <td>Chandigarh</td> <td>Punjab</td> <td>Chandigarh</td> <td>Punjab</td> <td>Chandigarh</td> </tr> <tr> <td>Goa</td> <td>Panaji</td> <td>Goa</td> <td>Panaji</td> <td>Goa</td> <td>Panaji</td> <td>Goa</td> <td>Panaji</td> <td>Goa</td> <td>Panaji</td> <td>Goa</td> <td>Panaji</td> </tr> <tr> <td>Himachal Pradesh</td> <td>Shimla</td> <td>Himachal Pradesh</td> <td>Shimla</td> <td>Himachal Pradesh</td> <td>Shimla</td> <td>Himachal Pradesh</td> <td>Shimla</td> <td>Himachal Pradesh</td> <td>Shimla</td> <td>Himachal Pradesh</td> <td>Shimla</td> </tr> </tbody> </table> </div> </div> </body> </html> Output:Example 2: In this example, we will see table-dark and table-striped along with table-responsive. HTML <!DOCTYPE html> <html> <head> <!-- Bootstrap CDN --> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <title>Bootstrap 5 Table Always responsive</title> </head> <body> <div class="container text-center col-6"> <h1 class="text-success"> GeeksforGeeks </h1> <h2>Bootstrap 5 Table Always responsive</h2> <div class="table-responsive"> <table class="table table-striped table-dark"> <thead> <tr> <td>State</td> <td>Capital</td> <td>State</td> <td>Capital</td> <td>State</td> <td>Capital</td> <td>State</td> <td>Capital</td> <td>State</td> <td>Capital</td> <td>State</td> <td>Capital</td> </tr> </thead> <tbody> <tr class="table-active"> <td>Uttar Pradesh</td> <td>Lucknow</td> <td>Uttar Pradesh</td> <td>Lucknow</td> <td>Uttar Pradesh</td> <td>Lucknow</td> <td>Uttar Pradesh</td> <td>Lucknow</td> <td>Uttar Pradesh</td> <td>Lucknow</td> <td>Uttar Pradesh</td> <td>Lucknow</td> </tr> <tr> <td>Punjab</td> <td>Chandigarh</td> <td>Punjab</td> <td>Chandigarh</td> <td>Punjab</td> <td>Chandigarh</td> <td>Punjab</td> <td>Chandigarh</td> <td>Punjab</td> <td>Chandigarh</td> <td>Punjab</td> <td>Chandigarh</td> </tr> <tr> <td>Goa</td> <td>Panaji</td> <td>Goa</td> <td>Panaji</td> <td>Goa</td> <td>Panaji</td> <td>Goa</td> <td>Panaji</td> <td>Goa</td> <td>Panaji</td> <td>Goa</td> <td>Panaji</td> </tr> <tr> <td>Himachal Pradesh</td> <td>Shimla</td> <td>Himachal Pradesh</td> <td>Shimla</td> <td>Himachal Pradesh</td> <td>Shimla</td> <td>Himachal Pradesh</td> <td>Shimla</td> <td>Himachal Pradesh</td> <td>Shimla</td> <td>Himachal Pradesh</td> <td>Shimla</td> </tr> </tbody> </table> </div> </div> </body> </html> Output:References: https://getbootstrap.com/docs/5.0/content/tables/#always-responsive Comment More infoAdvertise with us 21mcsrltd Follow Improve Article Tags : Technical Scripter Web Technologies Bootstrap Technical Scripter 2022 Similar Reads Reboot ContentBootstrap 5 Reboot Page DefaultsBootstrap 5 Reboot is a powerful set of default styles that helps us normalize and standardize how webpages are rendered on different browsers and devices. In this article, we will see about Bootstrap5 page defaults which help us provide page-wide defaults on <HTML> and <body> elements. 4 min read Bootstrap 5 Reboot Native Font StackBootstrap 5 Reboot Native font stack includes a native/system font stack that is intended to deliver consistent and appealing typography across several devices and platforms. These font stacks are designed specifically to support & consider modern devices, in order to enhance the rendering of th 3 min read Bootstrap 5 Reboot Headings and ParagraphsBootstrap 5 Reboot Headings and paragraphs are used for removing the default margin that has been provided by HTML header tags which are margin-bottom: .5rem and for paragraph margin-bottom: 1rem. If we attach CDN links and use a header and paragraph tag then the margin will be removed. BootStrap5 R 2 min read BootStrap 5 Reboot ListsBootstrap 5 Reboot Lists facilitates different kinds of lists, namely, unordered lists, ordered lists, & description lists, that remove the margin-top property & a margin-bottom property with a value of 1rem. The Nested lists don't have margin-bottom property. Although, for <ul> and 2 min read BootStrap 5 Reboot inline codeBootStrap 5 Reboot inline code is used to wrap the code in actual code form. To do so we can use the HTML code tag. This is used when we want the normal text to look like a code. During the creation of web pages sometimes there is a need to display computer programming code. It could be done by any 2 min read BootStrap 5 Reboot Code blocksBootstrap 5 Reboot Code blocks are used to put the code inside of <pre> tag, according to official docs we recommend that you avoid using any angle brackets inside of <pre> tags. This is used to remove the default margin of the HTML pre tag element. BootStrap5 Reboot Code blocks Class: T 2 min read Bootstrap 5 Reboot VariablesBootstrap5 Reboot Variables facilitates the <var> tag that is used to indicate the variables. Syntax: <var> Variable name </var>Example 1: This example describes the basic usage of the Bootstrap 5 Reboot Variables by implementing the <var> tag. HTML <!DOCTYPE html> < 1 min read Bootstrap 5 Reboot User inputBootstrap 5 Reboot is a collection of element-specific CSS that changes in a single file, kickstart Bootstrap provides an elegant, consistent, and simple baseline to build upon. Reboot user input is used to indicate the input that is typically entered via the keyboard. Reboot User Input used Tag: 1 min read Bootstrap 5 Reboot TablesBootstrap 5 Reboot Tables are designed to style captions, borders, alignment, and much more. Many more styles are provided by Bootstrap 5 Reboot Tables like padding / accented tables etc. Bootstrap 5 Reboot Tables Used Classes: There are no special classes for BootStrap 5 Reboot Tables. The classes 2 min read BootStrap 5 Reboot FormsBootstrap 5 Reboot Forms are used to reboot form elements, that took it to the base style where there will be no effect of HTML tags inherited. There are some elements listed below that have been rebooted. Bootstrap 5 Reboot Forms element list: HTML <fieldset> Tag: It has no borders, padding, 2 min read Bootstrap 5 Reboot Pointers on ButtonsBootstrap 5 Reboot is a collection of element-specific CSS that changes in a single file, kickstart Bootstrap provides an elegant, consistent, and simple baseline to build upon. Reboot Pointers on buttons can be created by adding role="button" attribute to the element. It changes the default cursor 2 min read Bootstrap 5 Reboot Misc elementsBootstrap 5 Reboot Misc elements are some other tags that are used to reset browser defaults and can be used when we do not want to specify CSS explicitly. Reboot Misc Elements: Address: Reboot Address element is used to change the font style from italic to normal text. It inherits line height and t 2 min read Bootstrap 5 Reboot AddressBootstrap 5 Reboot is a collection of element-specific CSS that changes in a single file, kickstart Bootstrap provides an elegant, consistent, and simple baseline to build upon. Reboot Address element is used to change the font-style from italic to the normal text. It inherits the line-height proper 2 min read BootStrap 5 Reboot BlockquoteBootStrap 5 Reboot Blockquote is used to remove the default margin of the HTML blockquote tag element. It is used to display quotations. The default margin on blockquote is 1em 40px which is changed to 0 0 1rem BootStrap5 Reboot Blockquote Tag used: The Blockquote tag <blockquote> is used to p 2 min read BootStrap 5 Reboot Inline elementsBootStrap 5 Reboot Inline elements are used to put some elements abbreviations or short forms of an element that receive basic styling to make it different than other text. Reboot Inline elements Tag used: By using <abbr> Tag we can use the styling to make it look different from paragraph text 1 min read BootStrap5 Reboot HTML5 [hidden] AttributeBootStrap5 Reboot HTML5 [hidden] attribute is used to hide the section you want to not be rendered on the web page. This plays the same role as CSS display: hidden"; does. Bootstrap brings this feature by noticing the Pure CSS Hiding Elements feature. Bootstrap 5 Reboot HTML5 [hidden] Attribute Clas 2 min read Typography ContentBootstrap 5 Typography HeadingsBootstrap's Typography feature facilitates text styling and formatting, enabling customization of headings, inline subheadings, lists, and paragraphs. It supports global settings for font stack, Headings, and Link styles, ensuring optimal user interface across diverse operating systems and devices. 2 min read BootStrap 5 Typography Customizing HeadingsBootstrap 5 Typography Customizing headings is used to customize the heading without using HTML tags and CSS classes. Use the .text-muted class with <small> tag. Typography Customizing headings used tag: small: It is used to create secondary subheadings. Typography Customizing headings used cl 2 min read Bootstrap 5 Typography Display headingsBootstrap 5 Typography's Display headings feature classes from .display-1 to .display-6, offering larger font sizes and lighter weights, enhancing content hierarchy and readability, and making headings more visually appealing and structured. Typography Display headings Classes: display-*: This class 3 min read Bootstrap 5 Typography LeadBootstrap 5 Typography Lead is used to make a paragraph get differentiated from the rest of the paragraphs by changing its look. Bootstrap 5 Typography Lead Used Classes: lead: This class is used to make a paragraph look different from the rest of the paragraphs. Syntax: <p class="lead"> ... 2 min read Bootstrap 5 Typography Inline text elementsBootstrap5 Typography Inline text elements will get an output like HTML tags output without the help of HTML tags, instead, Inline text element classes are used. Inline text elements Classes: mark: This class is used to highlight or mark the element. This works like <mark>( HTML) tag.small: Th 2 min read Bootstrap 5 Typography Text utilitiesBootstrap 5 Typography supports both text utilities and color utilities. There are several text utilities like text alignment, text wrapping, overflow, word break, text-transform, etc. It also supports all the text color utilities. For text, the only color utility available is modifying the color of 2 min read Bootstrap 5 Typography AbbreviationsBootstrap 5 Typography Abbreviations are not different from the basic HTML <abbr> tag and its main usage is to define an acronym or an abbreviation like HTML, CSS, JavaScript, etc. Abbreviations also feature a help pointer and a default underlining to give users of assistive technology and use 2 min read Bootstrap 5 Typography BlockquotesBootstrap 5 Typography Blockquotes is used to display the long quotations (a section that is quoted from another source). It changes the alignment to make it unique from others. To use this class we must use the HTML blockquote tag for better results. Typography Blockquotes: For quoting blocks of co 2 min read Bootstrap 5 Typography Blockquotes Naming a sourceBootstrap 5 Typography Blockquotes Naming a source is used to provide a class for naming the source of a blockquote. Bootstrap 5 Typography Blockquotes Naming a source Class: blockquote-footer: This class is used for naming the source. Bootstrap 5 Typography Blockquotes Naming a source tags: figure: 2 min read Bootstrap 5 Typography ListsBootstrap 5 Typography Lists has three types of classes that can be used on the list. A list is an important component in the development and we need this list of classes to design or represent that in our own way. Typography Lists: Unstyled: Unstyled is used to remove the default style from the ord 3 min read Bootstrap 5 Typography Lists UnstyledBootstrap 5 Typography Lists Unstyled is used to remove the default style from the order or under the list. It also removes the left margin of the list. This only applies to immediate children list items. Typography Lists Unstyled Class: list-style: This class is used to remove the default style fro 2 min read Bootstrap 5 Typography Lists InlineBootstrap 5 Typography Lists Inline classes are used to remove a list’s bullets and apply some light margin. Sometimes we need to put listed elements in a horizontal manner. Typography Lists Inline Classes: list-inline: This class is used to make the list item left most aligned.list-inline-item: Thi 2 min read Bootstrap 5 Typography Description list alignmentBootstrap 5 Typography Description list alignment is used to align terms and descriptions horizontally by using the grid system’s predefined classes. We can optionally add a .text-truncate class to truncate the text with an ellipsis. Typography Description list alignment Class: text-truncate: This c 2 min read Bootstrap 5 Typography SASSBootstrap 5 Typography SASS can be used to change the default values provided for the headings, body text, lists and more typography by customizing scss files. SASS variables of Typography: $headings-color: This variable provides the text color of the headings. By default, it is null.$headings-font- 5 min read Images ContentBootstrap 5 Images ThumbnailsBootstrap 5 Images thumbnails are used to add a 1px rounded border around the image. A thumbnail is a small size image that represents a larger image. Images thumbnails used Class: .img-thumbnail: This class is used to create the thumbnail image. This class adds 1px rounded border to the image. Synt 1 min read Bootstrap 5 Images Aligning ImagesBootstrap 5 Aligning Images are used to set the alignment to the image. We will use float or text alignment classes to set the alignment of images. We can use the .mx-auto margin utility class to center the block-level images. Aligning Images used Classes: .float-start: This class is used to set the 2 min read Bootstrap 5 Images SASSBootstrap Images SASS has a set of variables with default values for customizing images. We can change those values using sass variables. Bootstrap 5 Images Sass: variables: $thumbnail-padding, $thumbnail-bg, $thumbnail-border-width, etc variables are used to customize the Images. You can find the w 2 min read Tables ContentBootstrap 5 Accented TablesBootstrap 5 Accented tables are the tables that give a design-specific look and feel and which go beyond the mere basic table functionality of carrying rows and columns. There are three types of accented tables, striped, hoverable, and active, all of which are required in different situations.On the 2 min read Bootstrap 5 Table Striped RowsBootstrap5 Table Striped rows are used to change the background color of alternate rows in the table row within the <tbody>. The rows look zebra-striped and it helps to differentiate between two rows of a table. Table Striped rows used Class: table-striped: This class is used to change the bac 2 min read Bootstrap 5 Table Hoverable RowsBootstrap 5 Table Hoverable Rows can be used to apply a hover state on table rows within a <tbody>. It helps to focus on the individual row. Table Hoverable Rows used Class: table-hover: This class is used to enable a hover state feature on table rows within a <tbody>. Syntax: <table 2 min read Bootstrap 5 Bordered tablesBootstrap 5 Bordered tables are used to pt border on tables. The Bootstrap 5 Bordered tables class put borders on all the sides of the table. Class used: table-bordered: This class is used to put the border on all the sides of the table. Syntax: <table class="table table-bordered"> ... </ta 2 min read Bootstrap 5 Tables without bordersBootstrap5 Tables without borders is used to create a table in borderless form. It is mostly used when we do not want to show the separation in the table content. Tables without Borders Class: table-borderless: This class is used to create borderless tables Syntax: <table class="table table-borde 2 min read Bootstrap 5 Small tablesBootstrap 5 Small tables are used to create the small size of tables. These tables are just smaller versions of the normal tables. Bootstrap 5 Small tables Class: table-sm: By using this class we can convert a normal table into a smaller table by cutting all cell padding in half. Syntax: <table c 2 min read Bootstrap 5 Table Vertical alignmentWhat is Bootstrap Tables?Bootstrap Tables are this is useful to make tables and charts and it has a lot of customizable options and utilities thanks to the Bootstrap predefined styles. Bootstrap provides us with functionality that helps us to vertically align these table cells' contents. By default, 3 min read Bootstrap 5 Table nestingBootstrap 5 Table nesting is used to make a table inside of a table. Nesting is an important feature that is used in all the elements, especially on the listing. Bootstrap 5 Table nesting Class: There is no class for nesting the table, we just remember one thing which is the width of the table neste 2 min read Bootstrap 5 Table AnatomyBootstrap 5 Table Anatomy contains three parts of table-head, table-foot & captions, you may think about where is the body as I did in tables but there are no classes for that. We can decorate the body part by using different classes like background color classes or text color classes. Bootstrap 2 min read Bootstrap 5 Table headBootstrap 5 Table head class is used to set the thead elements' background color. Sometimes we need a table with a dark header for a better-suited situation. We can use these classes to change the background color of the thead section of a table. Bootstrap 5 Table head Classes: table-light: This cla 2 min read Bootstrap 5 Table footBootstrap 5 Table foot is used to create a section where we can calculate the whole column's sum. Like if we create a table that contains two columns one holding the product and another holding the value then the value part can be summed up. Bootstrap 5 Table foot Class: We do not require any class 2 min read Bootstrap 5 Table CaptionsBootstrap 5 Table Captions are used to set the caption position on the table. A table caption is required to put the table name or single keyword information. If you want to use the caption in a different font with proper visibility then you can use any tag for the table caption, caption tag is for 2 min read Bootstrap 5 Responsive TablesBootstrap 5 Responsive table is used to make a table responsive in two different categories we can make the table always responsive, or make the table responsive on the basis of the breakpoint.Bootstrap 5 Responsive Tables:Table Always Responsive: This is used for horizontal scrolling of the table a 2 min read Bootstrap 5 Table Always responsiveBootstrap 5 Table Always responsive is used for horizontal scrolling of the table across all the viewports or specific viewports. To scroll the table horizontally for all the viewports, we can add a class table-responsive.Bootstrap 5 Table Always responsive Class:table-responsive: This class is used 2 min read Bootstrap 5 Table Breakpoint SpecificBootstrap 5 Table Breakpoint is specifically used to scroll the table horizontally on a particular viewport, we can add a class table-responsive-*. This * can be substituted with a particular breakpoint of viewport like sm, md, lg, xl, etc. This is called table breakpoint specific.Bootstrap 5 Table 2 min read Bootstrap 5 Table SASSBootstrap 5 Table SASS can be used to change the default values provided for the table by customizing scss file.SASS variables of Table:$table-cell-padding-y: This variable provides the top and bottom padding of the table cell. By default, it is 0.5rem.$table-cell-padding-x: This variable provides t 7 min read Like