Table of Contents<\/p>\nToggle<\/span>

\u00a0Col 1<\/td>	\u00a0Col 1<\/td>	\u00a0Col 1<\/td>	\u00a0Col 1<\/td>	\u00a0Col 1<\/td>	\u00a0Col 1<\/td>	\u00a0Col 1<\/td>	\u00a0Col 1<\/td>	\u00a0Col 1<\/td>	\u00a0Col 1<\/td>	\u00a0Col 1<\/td>	Col 1<\/td><\/tr>
Col 4<\/td>	Col 4<\/td>	Col 4<\/td><\/tr>
Col 4<\/td>	Col 8<\/td><\/tr>
Col 6<\/td>	Col 6<\/td><\/tr>
Col 12<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n <\/span>Grid System Structure<\/span><\/h3>\n\n\n\n \n Bootstrap\u2019s grid structure is responsive, and the columns will re-organize automatically based on screen size.<\/li>\n<\/ul>\n\n\n\n \n Responsive Classes<\/u><\/strong><\/li>\n\n\n\n The Bootstrap grid system is divided into five responsive classes:\n \n xs (device with screens less than 576px)<\/li>\n\n\n\n sm (device with screens that are 576px or larger)<\/li>\n\n\n\n md (device with screens of 768px or larger)<\/li>\n\n\n\n lg (device with screens of 992px or larger)<\/li>\n\n\n\n xl (device with screens of 1200px or larger)<\/li>\n\n\n\n xxl (device with screens of 1400px or larger)<\/li>\n<\/ul>\n<\/li>\n\n\n\n The above classes can be combined to build more dynamic and adaptable layouts.<\/li>\n<\/ul>\n\n\n\n \n A Bootstrap Grid\u2019s Basic Structure<\/strong><\/li>\n\n\n\n A Bootstrap grid has the following fundamental structure:<\/li>\n<\/ul>\n\n\n\n <div class=\"row\">\n<div class=\"col--\"><\/div>\n<div class=\"col--\"><\/div>\n<\/div>\n<div class=\"row\">\n<div class=\"col--\"><\/div>\n<div class=\"col--\"><\/div>\n<div class=\"col--\"><\/div>\n<\/div>\n<div class=\"row\">\n ...\n<\/div><\/code><\/pre>\n\n\n\n\nTo begin, make a row (div class=\u201drow\u201d>). Then, insert the desired number of columns (tags with.col-- classes). It should be noted that the numbers in.col-- should always add up to 12 for each row.<\/li>\n\n\n\n Let us check with example below.<\/li>\n<\/ul>\n\n\n\n<body>\n<div class=\"container-fluid\">\n<h1>Bhavan's HJDOSHI Jamnagar<\/h1>\n<p>Resize the browser window to see the effect.<\/p>\n<div class=\"row\">\n<div class=\"col-sm-4\" style=\"background-color:cyan;\">Small Col 4<\/div>\n<div class=\"col-sm-4\" style=\"background-color:pink;\">Small Col 4<\/div>\n<div class=\"col-sm-4\" style=\"background-color:lavender;\">Small Col 4<\/div>\n<\/div>\n<\/div>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n\nReordering Columns<\/strong><\/li>\n\n\n\n Order classes<\/strong>\n\nReordering in Bootstrap refers to the ability to change the visible order of columns within a grid layout, particularly for responsive design.<\/li>\n\n\n\n This feature is accomplished by using responsive utility classes to specify the arrangement of columns on different screen sizes or devices.<\/li>\n\n\n\n Bootstrap has responsive classes for organizing columns based on screen size. You can change the arrangement of columns on extra-small (xs), small (sm), medium (md), large (lg), and extra-large (xl) displays using these classes.<\/li>\n\n\n\n The responsive classes for reordering columns are as follows:\n\n.order-:<\/strong>\u00a0This class is used to order columns. Columns with higher order values will appear later in the layout, as indicated by the . All columns have an order value of 0 by default.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n Example 1<\/strong><\/li>\n<\/ul>\n\n\n\n<body>\n\t<div class=\"container-fluid\">\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col-md-4 order-2\" style=\"background-color:cyan;\">Second Column<\/div>\n\t\t\t<div class=\"col-md-4 order-1\" style=\"background-color:pink;\">First Column<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n\nExample 2<\/strong><\/li>\n<\/ul>\n\n\n\n<div class=\"container-fluid text-center\">\n<div class=\"row\">\n<div class=\"col\" style=\"background-color:cyan;\">\n First, no order applied\n<\/div>\n<div class=\"col order-5\" style=\"background-color:Pink;\">\n Second, with a larger order(5)\n<\/div>\n<div class=\"col order-1\" style=\"background-color:Lavender;\">\n Third, with an order of 1\n<\/div>\n<\/div>\n<\/div><\/code><\/pre>\n\n\n\n\nThere are additionally responsive.order-first and.order-last classes that use order: -1 and order: 6 to adjust the order of an element.<\/li>\n\n\n\n As needed, these classes can be mixed in with the numbered.order-* classes.<\/li>\n\n\n\n Example 3<\/strong><\/li>\n<\/ul>\n\n\n\n<div class=\"container text-center\">\n<div class=\"row\" style=\"background-color:cyan;\">\n<div class=\"col order-last\">\n First, ordered last\n<\/div>\n<div class=\"col\" style=\"background-color:Pink;\">\n Second, unordered\n<\/div>\n<div class=\"col order-first\" style=\"background-color:Lavender;\">\n Third, ordered first\n<\/div>\n<\/div>\n<\/div><\/code><\/pre>\n\n\n\n\nOffsetting columns<\/strong>\n\nTo offset grid columns, responsive .offset- grid classes are used.<\/li>\n\n\n\n Grid classes are proportioned to match columns.<\/li>\n<\/ul>\n<\/li>\n\n\n\n Offset classes<\/strong>\n\nUsing the .offset-md-* classes, you can move columns to the right.<\/li>\n\n\n\n These classes extend a column\u2019s left margin by * columns.<\/li>\n\n\n\n For example, .offset-md-4 movesover four columns, use col-md-4.<\/li>\n<\/ul>\n<\/li>\n\n\n\n Example 1<\/strong><\/li>\n<\/ul>\n\n\n\n<div class=\"container-fluid\">\n<div class=\"row\">\n<div class=\"col-md-4\" style=\"background-color:cyan;\">col-md-4<\/div>\n<div class=\"col-md-4 offset-md-4\" style=\"background-color:pink;\">col-md-4 offset-md-4<\/div>\n<\/div>\n<div class=\"row\">\n<div class=\"col-md-3 offset-md-3\" style=\"background-color:lavender;\">col-md-3 offset-md-3<\/div>\n<div class=\"col-md-3 offset-md-3\" style=\"background-color:cyan;\">col-md-3 offset-md-3<\/div>\n<\/div>\n<div class=\"row\">\n<div class=\"col-md-6 offset-md-3\" style=\"background-color:pink;\">col-md-6 offset-md-3<\/div>\n<\/div>\n<div class=\"row\">\n<div class=\"col-md-1\" style=\"background-color:pink;\">col 1<\/div>\n\t<div class=\"col-md-1\" style=\"background-color:beige;\">col 1<\/div>\n\t<div class=\"col-md-1\" style=\"background-color:purple;\">col 1<\/div>\n\t<div class=\"col-md-1\" style=\"background-color:pink;\">col 1<\/div>\n\t<div class=\"col-md-1\" style=\"background-color:green;\">col 1<\/div>\n\t<div class=\"col-md-1\" style=\"background-color:lavender;\">col 1<\/div>\n\t<div class=\"col-md-1\" style=\"background-color:pink;\">col 1<\/div>\n\t<div class=\"col-md-1\" style=\"background-color:yellow;\">col 1<\/div>\n\t<div class=\"col-md-1\" style=\"background-color:lightblue;\">col 1<\/div>\n\t<div class=\"col-md-1\" style=\"background-color:pink;\">col 1<\/div>\n\t<div class=\"col-md-1\" style=\"background-color:beige;\">col 1<\/div>\n\t<div class=\"col-md-1\" style=\"background-color:cyan;\">col 1<\/div>\n<\/div>\n<\/div><\/code><\/pre>\n\n\n\n<\/span>Bootstrap Content<\/strong><\/span><\/h2>\n\n\n\n<\/span>Typography<\/strong><\/span><\/h3>\n\n\n\n\nHeadings <h1> \u2013 <h6>:\u00a0<\/strong>Bootstrap 5 styles HTML headings (<h1> to <h6>) with a bolder font-weight and a responsive font-size.<\/li>\n\n\n\n Example<\/strong><\/li>\n<\/ul>\n\n\n\n<h1>This is H J Doshi Jamnagar<\/h1>\n<h2>This is H J Doshi Jamnagar<\/h2>\n<h3>This is H J Doshi Jamnagar<\/h3>\n<h4>This is H J Doshi Jamnagar<\/h4>\n<h5>This is H J Doshi Jamnagar<\/h5>\n<h6>This is H J Doshi Jamnagar<\/h6><\/code><\/pre>\n\n\n\n\nYou can also use the .h1 to.h6 classes on other components to have them act like headings:<\/li>\n\n\n\n Example<\/strong><\/li>\n<\/ul>\n\n\n\n<p class=\"h1\">This is Bootstrap heading class<\/p>\n<p class=\"h2\">This is Bootstrap heading class<\/p>\n<p class=\"h3\">This is Bootstrap heading class<\/p>\n<p class=\"h4\">This is Bootstrap heading class<\/p>\n<p class=\"h5\">This is Bootstrap heading class<\/p>\n<p class=\"h6\">This is Bootstrap heading class<\/p><\/code><\/pre>\n\n\n\n\nDisplay Headings<\/strong>\n\nTraditional heading components are intended to be used in the body of your page content. Consider utilizing a show heading\u2014a larger, slightly more expressive heading style\u2014when you need a heading to stand out.<\/li>\n<\/ul>\n<\/li>\n\n\n\n Example<\/strong><\/li>\n<\/ul>\n\n\n\n<h1 class=\"display-1\">H J Doshi<\/h1>\n<h1 class=\"display-2\">H J Doshi<\/h1>\n<h1 class=\"display-3\">H J Doshi<\/h1>\n<h1 class=\"display-4\">H J Doshi<\/h1>\n<h1 class=\"display-5\">H J Doshi<\/h1>\n<h1 class=\"display-6\">H J Doshi<\/h1><\/code><\/pre>\n\n\n\n\nLead Paragraph<\/strong>\n\nThe introductory or opening paragraph of a piece of content, such as an article or blog post is lead paragraph.<\/li>\n\n\n\n It is often styled differently to make it stand out from the rest of the text and to grab the reader\u2019s attention.<\/li>\n\n\n\n You can style a lead paragraph in Bootstrap by using its typography class .lead to the paragraph element.<\/li>\n<\/ul>\n<\/li>\n\n\n\n Example<\/strong><\/li>\n<\/ul>\n\n\n\n<p class=\"lead\">This is H J Doshi Information Technology Institute.<\/p><\/code><\/pre>\n\n\n\n\nInline Text Elements<\/strong>\n\nBootstrap provides several inline text elements that allow you to style and emphasize text within your HTML content.<\/li>\n\n\n\n These elements are designed to enhance the visual presentation of text without the need for custom CSS styles.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>Hi I am a Professor at <mark> H J Doshi I T Institute<\/mark> Jamnagar.<\/p>\n<p><del>This line behaves as deleted line.<\/del><\/p>\n<p><ins>This line behaves as an insertion to the document.<\/ins><\/p>\n<p><u>Hi This is Swati Lathia<\/u><\/p>\n<p><small>This line behaves as small fonts.<\/small><\/p>\n<p><strong>This line behaves as bold text.<\/strong><\/p>\n<p><em>Hello everyone.<\/em><\/p><\/code><\/pre>\n\n\n\n\nNote:\u00a0<\/strong>You can use the following classes instead:\n\n.mark will apply the same styles as <mark>.<\/li>\n\n\n\n .small will apply the same styles as <small>.<\/li>\n\n\n\n .text-decoration-underline will apply the same styles as <u>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n Abbreviations<\/strong>\n\nIt stylizes implementation of HTML\u2019s <abbr> element for abbreviations and acronyms to show the expanded version on hover.<\/li>\n\n\n\n Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies.<\/li>\n<\/ul>\n<\/li>\n\n\n\n Example<\/strong><\/li>\n<\/ul>\n\n\n\n<p>This is <abbr title=\"Cascading Style Sheet\">CSS<\/abbr><\/p>\n<p>This is <abbr title=\"HyperText Markup Language\">HTML<\/abbr><\/p><\/code><\/pre>\n\n\n\n\nList<\/strong>\n\nUnstyled List<\/strong>\n\nIt removes the default list-style and left margin on list items (immediate children only).<\/li>\n\n\n\n This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n Example<\/strong><\/li>\n<\/ul>\n\n\n\n<div class=\"container-fluid\">\n<h2>Unstyled List<\/h2>\n\t<ul class=\"list-unstyled\">\n <li>CSS<\/li>\n <li>HTML<\/li>\n <li>Bootstrap<\/li>\n <\/ul>\n<\/div><\/code><\/pre>\n\n\n\n\nInline List<\/strong>\n\nIt removes a list\u2019s bullets and apply some light margin with a combination of two classes, .list-inline and .list-inline-item.<\/li>\n<\/ul>\n<\/li>\n\n\n\n Example<\/strong><\/li>\n<\/ul>\n\n\n\n<ul class=\"list-inline\">\n<li class=\"list-inline-item\">HTML<\/li>\n<li class=\"list-inline-item\">JavaScript<\/li>\n<li class=\"list-inline-item\">CSS<\/li>\n<\/ul><\/code><\/pre>\n\n\n\n\nDescription list alignment<\/strong>\n\nIt aligns terms and descriptions horizontally by using our grid system\u2019s predefined.<\/li>\n<\/ul>\n<\/li>\n\n\n\n Example<\/strong><\/li>\n<\/ul>\n\n\n\n<dl class=\"row\">\n<dt class=\"col-sm-3\">Internet<\/dt>\n<dd class=\"col-sm-9\">A network of computers in world wide web<\/dd>\n<dt class=\"col-sm-3\">HTML<\/dt>\n<dd class=\"col-sm-9\">\n<p>HyperText Markup Language<\/p>\n<p>This is a markup language to design static webpage<\/p>\n<\/dd>\n<dt class=\"col-sm-3\">CSS<\/dt>\n<dd class=\"col-sm-9\">This is used to style HTML elements<\/dd>\n<dt class=\"col-sm-3\">JavaScript<\/dt>\n<dd class=\"col-sm-9\">This is Object Oriented language.<\/dd>\n<\/dl><\/code><\/pre>\n\n\n\n<\/span>Tables<\/strong><\/span><\/h3>\n\n\n\n\nBootstrap\u2019s tables are opt-in due to the frequent use of <table> elements in third-party widgets such as calendars and date pickers.<\/li>\n\n\n\n Add the .table base class to any <table>, then extend with our optional modifier classes or custom styles.<\/li>\n\n\n\n Example<\/strong><\/li>\n<\/ul>\n\n\n\n<table class=\"table\">\t\n\t\t\t<tr class=\"table-primary\">\n\t\t\t\t<th>First Name<\/th>\n\t\t\t\t<th>Last Name<\/th>\n\t\t\t<\/tr>\n\t\t\t<tr class=\"table-secondary\">\n\t\t\t\t<td>Sakshi<\/td>\n\t\t\t\t<td>Malik<\/td>\n\t\t\t<\/tr>\n\t\t\t<tr class=\"table-secondary\">\n\t\t\t\t<td>Neeraj<\/td>\n\t\t\t\t<td>Chopra<\/td>\n\t\t\t<\/tr>\n<\/table><\/code><\/pre>\n\n\n\n\nYou can use contextual classes to color tables, table rows or individual cells.<\/li>\n\n\n\n Example<\/strong><\/li>\n<\/ul>\n\n\n\n<!-- On tables -->\n<table class=\"table-primary\">...<\/table>\n<table class=\"table-secondary\">...<\/table>\n<table class=\"table-success\">...<\/table>\n<table class=\"table-danger\">...<\/table>\n<table class=\"table-warning\">...<\/table>\n<table class=\"table-info\">...<\/table>\n<table class=\"table-light\">...<\/table>\n<table class=\"table-dark\">...<\/table>\n<!-- On rows -->\n<tr class=\"table-primary\">...<\/tr>\n<tr class=\"table-secondary\">...<\/tr>\n<tr class=\"table-success\">...<\/tr>\n<tr class=\"table-danger\">...<\/tr>\n<tr class=\"table-warning\">...<\/tr>\n<tr class=\"table-info\">...<\/tr>\n<tr class=\"table-light\">...<\/tr>\n<tr class=\"table-dark\">...<\/tr>\n<!-- On cells (`td` or `th`) -->\n<tr>\n<td class=\"table-primary\">...<\/td>\n<td class=\"table-secondary\">...<\/td>\n<td class=\"table-success\">...<\/td>\n<td class=\"table-danger\">...<\/td>\n<td class=\"table-warning\">...<\/td>\n<td class=\"table-info\">...<\/td>\n<td class=\"table-light\">...<\/td>\n<td class=\"table-dark\">...<\/td><\/tr><\/code><\/pre>\n\n\n\n\nAccented Tables<\/strong>\n\nStriped rows<\/strong>\n\nYou can use table-striped to add zebra-striping to any table row within the <tbody><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n Example<\/strong><\/li>\n<\/ul>\n\n\n\n<table class=\"table table-striped\">\t\n\t\t\t<tr>\n\t\t\t\t<th>First Name<\/th>\n\t\t\t\t<th>Last Name<\/th>\n\t\t\t<\/tr>\n\t\t\t<tr>\n\t\t\t\t<td>Sakshi<\/td>\n\t\t\t\t<td>Malik<\/td>\n\t\t\t<\/tr>\n\t\t\t<tr>\n\t\t\t\t<td>Neeraj<\/td>\n\t\t\t\t<td>Chopra<\/td>\n\t\t\t<\/tr>\n\t<\/table>\n\t<table class=\"table table-primary table-striped\">\t\n\t\t\t<tr>\n\t\t\t\t<th>First Name<\/th>\n\t\t\t\t<th>Last Name<\/th>\n\t\t\t<\/tr>\n\t\t\t<tr>\n\t\t\t\t<td>Sakshi<\/td>\n\t\t\t\t<td>Malik<\/td>\n\t\t\t<\/tr>\n\t\t\t<tr>\n\t\t\t\t<td>Neeraj<\/td>\n\t\t\t\t<td>Chopra<\/td>\n\t\t\t<\/tr>\n\t<\/table>\n\t<table class=\"table table-dark table-striped\">\t\n\t\t\t<tr>\n\t\t\t\t<th>First Name<\/th>\n\t\t\t\t<th>Last Name<\/th>\n\t\t\t<\/tr>\n\t\t\t<tr>\n\t\t\t\t<td>Sakshi<\/td>\n\t\t\t\t<td>Malik<\/td>\n\t\t\t<\/tr>\n\t\t\t<tr>\n\t\t\t\t<td>Neeraj<\/td>\n\t\t\t\t<td>Chopra<\/td>\n\t\t\t<\/tr>\n\t<\/table><\/code><\/pre>\n\n\n\n\nHoverable rows<\/strong>\n\nYou can add .table-hover to enable a hover state on table rows within a <tbody>.<\/li>\n\n\n\n These hoverable rows can also be combined with the striped variant.<\/li>\n<\/ul>\n<\/li>\n\n\n\n Example<\/strong><\/li>\n<\/ul>\n\n\n\n<table class=\"table table-striped table-hover\">\t\n\t\t\t<tr>\n\t\t\t\t<th>First Name<\/th>\n\t\t\t\t<th>Last Name<\/th>\n\t\t\t<\/tr>\n\t\t\t<tr>\n\t\t\t\t<td>Sakshi<\/td>\n\t\t\t\t<td>Malik<\/td>\n\t\t\t<\/tr>\n\t\t\t<tr>\n\t\t\t\t<td>Neeraj<\/td>\n\t\t\t\t<td>Chopra<\/td>\n\t\t\t<\/tr>\n<\/table><\/code><\/pre>\n\n\n\n\nActive tables<\/strong>\n\nYou can highlight a table row or cell by adding a .table-active class.<\/li>\n<\/ul>\n<\/li>\n\n\n\n Example<\/strong><\/li>\n<\/ul>\n\n\n\n<table class=\"table\">\t\n\t\t\t<tr>\n\t\t\t\t<th>First Name<\/th>\n\t\t\t\t<th>Last Name<\/th>\n\t\t\t<\/tr>\n\t\t\t<tr class=\"table-active\">\n\t\t\t\t<td>Sakshi<\/td>\n\t\t\t\t<td>Malik<\/td>\n\t\t\t<\/tr>\n\t\t\t<tr>\n\t\t\t\t<td class=\"table-active\">Neeraj<\/td>\n\t\t\t\t<td>Chopra<\/td>\n\t\t\t<\/tr>\n<\/table><\/code><\/pre>\n\n\n\n\nTable borders<\/strong>\n\nYou can add .table-bordered for borders on all sides of the table and cells.<\/li>\n<\/ul>\n<\/li>\n\n\n\n Example<\/strong><\/li>\n<\/ul>\n\n\n\n<table class=\"table table-bordered\">\t\n\t\t\t<tr>\n\t\t\t\t<th>First Name<\/th>\n\t\t\t\t<th>Last Name<\/th>\n\t\t\t<\/tr>\n\t\t\t<tr>\n\t\t\t\t<td>Sakshi<\/td>\n\t\t\t\t<td>Malik<\/td>\n\t\t\t<\/tr>\n\t\t\t<tr>\n\t\t\t\t<td>Neeraj<\/td>\n\t\t\t\t<td>Chopra<\/td>\n\t\t\t<\/tr>\n<\/table><\/code><\/pre>\n\n\n\n\nBorder Color<\/strong>\n\nThese utilities can be added to change colors: border-primary, border-secondary, etc.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<table class=\"table table-bordered border-success\">\t\n\t\t\t<tr>\n\t\t\t\t<th>First Name<\/th>\n\t\t\t\t<th>Last Name<\/th>\n\t\t\t<\/tr>\n\t\t\t<tr>\n\t\t\t\t<td>Narendra<\/td>\n\t\t\t\t<td>Modi<\/td>\n\t\t\t<\/tr>\n\t\t\t<tr>\n\t\t\t\t<td>Neeraj<\/td>\n\t\t\t\t<td>Chopra<\/td>\n\t\t\t<\/tr>\n<\/table><\/code><\/pre>\n\n\n\n\nTables without borders<\/strong>\n\nYou can add .table-borderless for a table without borders.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<table class=\"table table-borderless\">\t\n\t\t\t<tr>\n\t\t\t\t<th>First Name<\/th>\n\t\t\t\t<th>Last Name<\/th>\n\t\t\t<\/tr>\n\t\t\t<tr>\n\t\t\t\t<td>Sakshi<\/td>\n\t\t\t\t<td>Malik<\/td>\n\t\t\t<\/tr>\n\t\t\t<tr>\n\t\t\t\t<td>Neeraj<\/td>\n\t\t\t\t<td>Chopra<\/td>\n\t\t\t<\/tr>\n<\/table><\/code><\/pre>\n\n\n\n\nSmall tables<\/strong>\n\n.table-sm class is used to create smaller, more compact tables.<\/li>\n\n\n\n It reduces the padding and overall size of the table and its cells, making it ideal for situations where you want to display a table with less space between rows and columns.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<table class=\"table table-sm\">\n<thead>\n<tr>\n<th>#<\/th>\n<th>First Name<\/th>\n<th>Last Name<\/th>\n<th>State<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>1<\/td>\n<td>Sakshi<\/td>\n<td>Malik<\/td>\n<td>Haryana<\/td>\n<\/tr>\n<tr>\n<td>2<\/td>\n<td>Neeraj<\/td>\n<td>Chopra<\/td>\n<td>Haryana<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/code><\/pre>\n\n\n\n\nVertical Alignment of Table<\/strong>\n\nYou can choose from .align-top, .align-middle, .align-bottom as needed in table row or column.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<table class=\"table\">\n<thead>\n<tr>\n<th>#<\/th>\n<th>Term<\/th>\n<th>Explanation<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td class=\"align-bottom\">1<\/td>\n<td class=\"align-top\">CSS<\/td>\n<td class=\"align-middle\">It is a stylesheet language used for describing the presentation and formatting of a document written in HTML (Hypertext Markup Language). CSS allows web developers and designers to control how web pages and elements within those pages are displayed on different devices and screen sizes. CSS separates the content of a web page (structured using HTML) from its presentation (defined using CSS). This separation makes it easier to maintain and update websites because you can change the appearance of a site without altering its underlying content.<\/td>\n<\/tr>\n<tr>\n<td class=\"align-bottom\">2<\/td>\n<td class=\"align-top\">Bootstrap<\/td>\n<td class=\"align-middle\">Bootstrap is a popular open-source front-end framework used for building responsive and visually appealing websites and web applications. It was originally created by Twitter and is now maintained by the Bootstrap community. Bootstrap provides a collection of pre-designed HTML, CSS, and JavaScript components and utilities that make it easier and faster to create web interfaces. <\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/code><\/pre>\n\n\n\n\nTable head<\/strong>\n\nSimilar to tables and dark tables, you can use the modifier classes .table-light or .table-dark to make <thead>s appear light or dark gray.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<table class=\"table\">\n<thead class=\"table-light\">\n<tr>\n<th>#<\/th>\n<th>First Name<\/th>\n<th>Last Name<\/th>\n<th>State<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>1<\/td>\n<td>Sakshi<\/td>\n<td>Malik<\/td>\n<td>Haryana<\/td>\n<\/tr>\n<tr>\n<td>2<\/td>\n<td>Neeraj<\/td>\n<td>Chopra<\/td>\n<td>Haryana<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<!\u2014thead dark- ->\n<table class=\"table\">\n<thead class=\"table-dark\">\n<tr>\n<th>#<\/th>\n<th>First Name<\/th>\n<th>Last Name<\/th>\n<th>State<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>1<\/td>\n<td>Sakshi<\/td>\n<td>Malik<\/td>\n<td>Haryana<\/td>\n<\/tr>\n<tr>\n<td>2<\/td>\n<td>Neeraj<\/td>\n<td>Chopra<\/td>\n<td>Haryana<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/code><\/pre>\n\n\n\n\nTable foot<\/strong><\/li>\n<\/ul>\n\n\n\n<table class=\"table table-bordered caption-top\">\n<caption>List of definition<\/caption>\n<thead>\n<tr>\n<th>#<\/th>\n<th>Term<\/th>\n<th>Explanation<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>1<\/td>\n<td>CSS<\/td>\n<td>It is a stylesheet language used for describing the presentation and formatting of a document written in HTML (Hypertext Markup Language). CSS allows web developers and designers to control how web pages and elements within those pages are displayed on different devices and screen sizes. CSS separates the content of a web page (structured using HTML) from its presentation (defined using CSS). This separation makes it easier to maintain and update websites because you can change the appearance of a site without altering its underlying content.<\/td>\n<\/tr>\n<tr>\n<td>2<\/td>\n<td>Bootstrap<\/td>\n<td>Bootstrap is a popular open-source front-end framework used for building responsive and visually appealing websites and web applications. It was originally created by Twitter and is now maintained by the Bootstrap community. Bootstrap provides a collection of pre-designed HTML, CSS, and JavaScript components and utilities that make it easier and faster to create web interfaces. <\/td>\n<\/tr>\n\t<tfoot>\n\t\t<td align=center colspan=3>By Swati Lathia<\/td>\n\t<\/tfoot>\n<\/tbody>\n<\/table><\/code><\/pre>\n\n\n\n\nResponsible Table<\/strong>\n\n.table-responsive class is used to create a responsive behavior for HTML tables.<\/li>\n\n\n\n When you apply this class to a div that wraps around a table, it enables horizontal scrolling on smaller screens when the table\u2019s content overflows its container horizontally.<\/li>\n\n\n\n This ensures that users can still view the entire table\u2019s content, even on narrow screens, without the need for the content to be truncated or hidden.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<div class=\"container\">\n<h2>Responsive Table Example<\/h2>\n<div class=\"table-responsive\">\n<table class=\"table\">\n<thead>\n<tr>\n<th>#<\/th>\n<th>First Name<\/th>\n<th>Last Name<\/th>\n<th>Institute<\/th>\n<th>Website<\/th>\n<th>City - State<\/th>\n<th>Country<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>1<\/td>\n<td>Swati<\/td>\n<td>Lathia<\/td>\n<td>Bhavan's Shree H J Doshi Information Technology Institute<\/td>\n<td>https:\/\/swatilathia.com\/<\/td>\n<td>Jamnagar - Gujarat<\/td>\n<td>Bharat<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div><\/code><\/pre>\n\n\n\n\nThe div with the class .table-responsive serves as a wrapper around the table element.<\/li>\n\n\n\n The table itself has the class .table, which is a Bootstrap class used to style tables.<\/li>\n\n\n\n By using .table-responsive, you ensure that when the table\u2019s content exceeds the width of its parent container like smaller screens or narrower viewports, the user can horizontally scroll to view the hidden content without it breaking the layout or getting cut off.<\/li>\n\n\n\n This responsive behavior is particularly useful when you have tables with many columns or when the table content is too wide to fit within the available screen width.<\/li>\n\n\n\n It helps maintain the usability and readability of tables on various devices.<\/li>\n\n\n\n Note: You can also use .table-responsive{-sm\|-md\|-lg\|-xl\|-xxl} as needed to create responsive tables up to a particular breakpoint.<\/mark><\/strong><\/li>\n<\/ul>\n\n\n\n<\/span>Images<\/strong><\/span><\/h3>\n\n\n\n\nIn this topic, we are using class to make responsive images so they never grow larger than their parent components and providing lightweight styles to them.<\/li>\n\n\n\n Responsive Images<\/strong>\n\nWith .img-fluid, images in Bootstrap are made responsive.<\/li>\n\n\n\n This gives the picture max-width: 100%; and height: auto; so that it scales with the parent element.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<img src=\"\" class=\"img-fluid\" alt=\"Image description\"><\/code><\/pre>\n\n\n\n\nImage thumbnails<\/strong>\n\nYou can give an image a rounded 1px border by using .img-thumbnail.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<img src=\"\" class=\"img-thumbnail\" alt=\"Image description \"><\/code><\/pre>\n\n\n\n\nAligning images<\/strong>\n\nYou can use the assistance float classes (float-start and float-end) or text alignment classes to align images.<\/li>\n\n\n\n The.mx-auto margin utility class can be used to center block-level graphics.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<img src=\"\" class=\"rounded float-start\" alt=\"rose\"\twidth='300' height=300>\n<img src=\"\" class=\"rounded float-end\" alt=\"rose\"\twidth='300' height=300><\/code><\/pre>\n\n\n\n<!-- d-block is division block -->\n<img src=\"rose.jfif\" class=\"mx-auto d-block rounded\" alt=\"rose\" width='300' height=300>\n<!-- you can also use <div> with class text-center -->\n<div class=\"text-center\">\n<img src=\"rose.jfif\" class=\"rounded\" alt=\"rose\" width='300' height=300>\n<\/div><\/code><\/pre>\n\n\n\n<\/span>Forms<\/strong><\/span><\/h3>\n\n\n\n\nForm controls in Bootstrap extend form designs with classes. Use these classes to provide customized rendering across browsers and devices.<\/li>\n\n\n\n To take advantage of additional input controls such as email verification, number selection, and more, make sure to utilize an appropriate type property on all inputs (e.g., email for email address or number for numerical information).<\/li>\n\n\n\n It includes form controls, select, checks and radios, floating labels and layout<\/li>\n<\/ul>\n\n\n\n<\/span>Form controls : input, textarea and label<\/strong><\/span><\/h4>\n\n\n\n\nCustom styles, sizing, focus states, and other features can be used to modify textual form controls like <input>s and <textarea>s.<\/li>\n\n\n\n \n<\/ul>\n\n\n\n<form>\t\n\t<div class=\"mb-3\">\n\t\t<label for=\"i1\" class=\"form-label\">Email address<\/label>\n\t\t<input type=\"email\" class=\"form-control\" id=\"i1\" placeholder=\"uname@something.com\">\n\t<\/div>\n\t<div class=\"mb-3\">\n\t\t<label for=\"t1\" class=\"form-label\">Address<\/label>\n\t\t<textarea class=\"form-control\" id=\"t1\" rows=\"3\"><\/textarea>\n\t<\/div>\n\t<button type=submit class=\"btn btn-primary\">Submit Me<\/button>\n<\/form><\/code><\/pre>\n\n\n\n\nSizing:\u00a0<\/strong>You can set heights using classes like .form-control-lg and .form-control-sm.<\/li>\n<\/ul>\n\n\n\n<div class=\"mb-3\">\n\t<input class=\"form-control form-control-lg\" type=\"text\" placeholder=\"large\">\n<\/div>\n<div class=\"mb-3\">\n\t<input class=\"form-control\" type=\"text\" placeholder=\"Default input\">\n<\/div>\n<div class=\"mb-3\">\n\t<input class=\"form-control form-control-sm\" type=\"text\" placeholder=\"small\">\n<\/div><\/code><\/pre>\n\n\n\n\nDisabled:\u00a0<\/strong>You can add the disabled Boolean attribute on an input to give it a grayed out appearance and remove pointer events.<\/li>\n<\/ul>\n\n\n\n<input class=\"form-control\" type=\"text\" placeholder=\"Disabled input\" disabled><\/code><\/pre>\n\n\n\n\nReadonly:\u00a0<\/strong>You can add the readonly boolean attribute on an input to prevent modification of the input\u2019s value.<\/li>\n<\/ul>\n\n\n\n<input class=\"form-control\" type=\"text\" value=\"This is readonly value\" readonly><\/code><\/pre>\n\n\n\n<\/span>File input<\/strong><\/span><\/h4>\n\n\n\n\nYou can select one or more files from the required path<\/li>\n\n\n\n \n<\/ul>\n\n\n\n<div class=\"mb-3\">\n\t<label for=\"formFile\" class=\"form-label\">Default file input example<\/label>\n\t<input class=\"form-control\" type=\"file\" id=\"formFile\">\n<\/div>\n<div class=\"mb-3\">\n\t<label for=\"formFileMultiple\" class=\"form-label\">Multiple files input example<\/label>\n\t<input class=\"form-control\" type=\"file\" id=\"formFileMultiple\" multiple>\n<\/div>\n<div class=\"mb-3\">\n\t<label for=\"formFileDisabled\" class=\"form-label\">Disabled file input example<\/label>\n\t<input class=\"form-control\" type=\"file\" id=\"formFileDisabled\" disabled>\n<\/div>\n<div class=\"mb-3\">\n\t<label for=\"formFileSm\" class=\"form-label\">Small file input example<\/label>\n\t<input class=\"form-control form-control-sm\" id=\"formFileSm\" type=\"file\">\n<\/div>\n<div class=\"mb-3\">\n\t<label for=\"formFileLg\" class=\"form-label\">Large file input example<\/label>\n\t<input class=\"form-control form-control-lg\" id=\"formFileLg\" type=\"file\">\n<\/div><\/code><\/pre>\n\n\n\n<\/span>Color Picker<\/strong><\/span><\/h4>\n\n\n\n\nYou can use the color picker with form-control-color class<\/li>\n<\/ul>\n\n\n\n<label for=\"colorinput\" class=\"form-label\">Color picker<\/label>\n<input type=\"color\" class=\"form-control form-control-color\" id=\"colorinput\"><\/code><\/pre>\n\n\n\n<\/span>Datalists<\/strong><\/span><\/h4>\n\n\n\n\nDatalists allow you to create a group of <option>s that can be accessed (and autocompleted) from within an <input>.<\/li>\n\n\n\n These are similar to <select> elements, but come with more menu styling limitations and differences.<\/li>\n\n\n\n While most browsers and operating systems include some support for <datalist> elements, their styling is inconsistent at best.<\/li>\n<\/ul>\n\n\n\n<label for=\"dl\" class=\"form-label\">City<\/label>\n\t<input class=\"form-control\" list=\"dloptions\" id=\"dl\" placeholder=\"Type here to search\">\n\t<datalist id=\"dloptions\">\n\t\t<option value=\"Jamnagar\">\n\t\t<option value=\"Rajkot\">\n\t\t<option value=\"Surat\">\n\t\t<option value=\"Bhavangar\">\n\t\t<option value=\"Surendranagar\">\n\t<\/datalist><\/code><\/pre>\n\n\n\n<\/span>Select<\/strong><\/span><\/h4>\n\n\n\n\nYou can create custom CSS to alter the native <select> elements\u2019 default appearance. To activate the custom styles, custom <select> menus just require the custom class .form-select.<\/li>\n\n\n\n Due to browser restrictions, custom styles are only able to alter the <select>\u2019s default appearance and cannot change the <options>.<\/li>\n\n\n\n You can set the size of <select> using .form-select-lg for large menu and .form-select-sm for small menu.<\/li>\n\n\n\n You can select multiple options too using\u00a0multiple\u00a0<\/strong>attribute.<\/li>\n\n\n\n You can add the disabled boolean attribute on a select to give it a grayed out appearance and remove pointer events.<\/li>\n<\/ul>\n\n\n\n<!-- default select options -->\n\t<select class=\"form-select mb-3\">\n\t\t<option selected>Select your Subject<\/option>\n\t\t<option value=\"HTML\">HTML<\/option>\n\t\t<option value=\"CSS\">CSS<\/option>\n\t\t<option value=\"JavaScript\">JavaScript<\/option>\n\t<\/select>\n <!-- Sizing -->\n\t<select class=\"form-select form-select-lg mb-3\">\n\t\t<option selected>Select your Subject<\/option>\n\t\t<option value=\"HTML\">HTML<\/option>\n\t\t<option value=\"CSS\">CSS<\/option>\n\t\t<option value=\"JavaScript\">JavaScript<\/option>\n\t<\/select>\n\t<select class=\"form-select form-select-sm mb-3\">\n\t\t<option selected>Select your Subject<\/option>\n\t\t<option value=\"HTML\">HTML<\/option>\n\t\t<option value=\"CSS\">CSS<\/option>\n\t\t<option value=\"JavaScript\">JavaScript<\/option>\n\t<\/select>\n\t<!-- multiple options -->\n\t<select class=\"form-select mb-3\" multiple>\n\t\t<option selected>Select your Subject<\/option>\n\t\t<option value=\"HTML\">HTML<\/option>\n\t\t<option value=\"CSS\">CSS<\/option>\n\t\t<option value=\"JavaScript\">JavaScript<\/option>\n\t<\/select>\n <!-- size of options -->\n\t<select class=\"form-select mb-3\" size=\"3\">\n\t\t<option selected>Select your subject<\/option>\n\t\t<option value=\"HTML\">HTML<\/option>\n\t\t<option value=\"CSS\">CSS<\/option>\n\t\t<option value=\"JavaScript\">JavaScript<\/option>\n\t\t<option value=\"Bootstrap\">Bootstrap<\/option>\n\t<\/select>\n <!-- Disabled -->\n\t<select class=\"form-select\" disabled>\n\t\t<option selected>Select your subject<\/option>\n\t\t<option value=\"HTML\">HTML<\/option>\n\t\t<option value=\"CSS\">CSS<\/option>\n\t\t<option value=\"JavaScript\">JavaScript<\/option>\n\t<\/select><\/code><\/pre>\n\n\n\n<\/span>Checks and Radios<\/strong><\/span><\/h4>\n\n\n\n\nYou can create consistent cross-browser and cross-device checkboxes and radios with completely rewritten checks component.<\/li>\n\n\n\n With the use of .form-check, a set of classes for both input types that enhances the style and behavior of their HTML elements, more customization and cross-browser consistency are provided.<\/li>\n\n\n\n Browser default checkboxes and radio buttons are replaced.<\/li>\n\n\n\n Checkboxes allow you to choose one or more alternatives from a list, whereas radio buttons only allow you to choose one.<\/li>\n<\/ul>\n\n\n\n<!--default check box -->\n\t<div class=\"form-check\">\n\t\t<input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"c1\">\n\t\t<label class=\"form-check-label\" for=\"c1\">\n\t\t\tCSS\n\t\t<\/label>\n\t<\/div>\n\t<div class=\"form-check\">\n\t\t<input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"c2\" checked>\n\t\t<label class=\"form-check-label\" for=\"c2\">\n\t\t\tBootstrap\n\t\t<\/label>\n\t<\/div>\n<!- -Radio button - ->\n<div class=\"form-check\">\n\t\t<input class=\"form-check-input\" type=\"radio\" name=\"rd\" id=\"r1\">\n\t\t<label class=\"form-check-label\" for=\"r1\">\n\t\t\tMale\n\t\t<\/label>\n\t<\/div>\n\t<div class=\"form-check\">\n\t\t<input class=\"form-check-input\" type=\"radio\" name=\"rd\" id=\"r2\" checked>\n\t\t<label class=\"form-check-label\" for=\"r2\">\n\t\t\tFemale\n\t\t<\/label>\n\t<\/div><\/code><\/pre>\n\n\n\n<\/span>Floating Labels<\/strong><\/span><\/h4>\n\n\n\n\nIt makes elegantly easy form labels that hover above your input fields.<\/li>\n\n\n\n To allow floating labels with Bootstrap\u2019s textual form fields, wrap a pair of <input class=\u201dform-control\u201d> and <label> components in .form-floating.<\/li>\n\n\n\n There must be a placeholder on every <input>.<\/li>\n<\/ul>\n\n\n\n<div class=\"form-floating mb-3\">\n\t<input type=\"email\" class=\"form-control\" id=\"fi1\" placeholder=\"uname@abc.com\">\n\t<label for=\"fi1\">Email address<\/label>\n<\/div>\n<div class=\"form-floating\">\n\t<input type=\"password\" class=\"form-control\" id=\"fi2\" placeholder=\"Password\">\n\t<label for=\"fi2\">Password<\/label>\n<\/div><\/code><\/pre>\n\n\n\n<\/span>Layout<\/strong><\/span><\/h4>\n\n\n\n\nWith form layout options, you can provide structure to your forms by using inline, horizontal, or custom grid implementations.<\/li>\n\n\n\n Let us check simple form example with lnputs and labels<\/li>\n<\/ul>\n\n\n\n<div class=\"mb-3\">\n\t<label for=\"i1\" class=\"form-label\">First Name<\/label>\n\t<input type=\"text\" class=\"form-control\" id=\"i1\" placeholder=\"Enter first name here\">\n<\/div>\n<div class=\"mb-3\">\n\t<label for=\"i2\" class=\"form-label\">Last Name<\/label>\n\t<input type=\"text\" class=\"form-control\" id=\"i2\" placeholder=\"Enter last name here\">\n<\/div><\/code><\/pre>\n\n\n\n<\/span>Form grid<\/strong><\/span><\/h4>\n\n\n\n\nGrid classes can be used to create more complex forms. These should be used for form layouts that need many columns, different widths, and more alignment choices.<\/li>\n<\/ul>\n\n\n\n<div class=\"row\">\n\t<div class=\"col\">\n\t\t<input type=\"text\" class=\"form-control\" placeholder=\"First name\">\n\t<\/div>\n\t<div class=\"col\">\n\t\t<input type=\"text\" class=\"form-control\" placeholder=\"Last name\">\n\t<\/div>\n<\/div><\/code><\/pre>\n\n\n\n<\/span>Horizontal form<\/strong><\/span><\/h4>\n\n\n\n\nBy adding the .row class to form groups and the .col-- classes to set the width of your labels and controls, you may create horizontal forms using the grid.<\/li>\n\n\n\n If you want your <label>s to be vertically centered with the form controls they are linked with, make sure to add.col-form-label to them as well.<\/li>\n<\/ul>\n\n\n\n<form>\n\t<div class=\"row mb-3\">\n\t\t<label for=\"i1\" class=\"col-2 col-form-label\">Email<\/label>\n\t\t<div class=\"col-10\">\n\t\t\t<input type=\"email\" class=\"form-control\" id=\"i1\">\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"row mb-3\">\n\t\t<label for=\"i2\" class=\"col-2 col-form-label\">Password<\/label>\n\t\t<div class=\"col-10\">\n\t\t\t<input type=\"password\" class=\"form-control\" id=\"i2\">\n\t\t<\/div>\n\t<\/div>\n\t<button type=\"submit\" class=\"btnbtn-primary\">Sign in<\/button>\n<\/form><\/code><\/pre>\n\n\n\n<\/span>Bootstrap Components<\/strong><\/span><\/h2>\n\n\n\n<\/span>Navs and tabs<\/strong><\/span><\/h3>\n\n\n\n\nBootstrap includes navigation components for different styles.<\/li>\n<\/ul>\n\n\n\n\nBase nav:<\/strong>\u00a0The base .nav class, as well as the active and disabled states, is all shared in the overall markup and styles of the Bootstrap navigation.<\/li>\n\n\n\n You can use <nav> with class .nav too<\/li>\n<\/ul>\n\n\n\n<!-- nav with ul li -->\n<ul class=\"nav\">\n\t<li class=\"nav-item\">\n\t\t<a class=\"nav-link\" href=\"#\">Link 1<\/a>\n\t<\/li>\n\t<li class=\"nav-item\">\n\t\t<a class=\"nav-link\" href=\"#\">Link 2<\/a>\n\t<\/li>\n\t<li class=\"nav-item\">\n\t\t<a class=\"nav-link\" href=\"#\">Link 3<\/a>\n\t<\/li>\n\t<li class=\"nav-item\">\n\t\t<a class=\"nav-link disabled\" href=\"#\" aria-disabled=\"true\">Disabled Link<\/a>\n\t<\/li>\n<\/ul>\n<!-- nav example -->\n <nav class=\"nav\">\n\t<a class=\"nav-link\" href=\"#\">Link 1<\/a>\n\t<a class=\"nav-link\" href=\"#\">Link 2<\/a>\n\t<a class=\"nav-link\" href=\"#\">Link 3<\/a>\n\t<a class=\"nav-link disabled\" href=\"#\" aria-disabled=\"true\">Disabled<\/a>\n<\/nav><\/code><\/pre>\n\n\n\n\nYou can change the style of .navs component with modifiers and utilities. You just need to mix and match as needed, or build your own.<\/li>\n<\/ul>\n\n\n\n\nHorizontal alignment<\/strong><\/li>\n\n\n\n You can change the horizontal alignment of your nav with flexbox utilities.<\/li>\n\n\n\n By default, navs are left-aligned, but you can easily change them to center or right aligned.<\/li>\n\n\n\n Centered with .justify-content-center:<\/strong><\/li>\n<\/ul>\n\n\n\n<ul class=\"nav justify-content-center\">\n\t<li class=\"nav-item\">\n\t\t<a class=\"nav-link\" href=\"#\">Link 1<\/a>\n\t<\/li>\n\t<li class=\"nav-item\">\n\t\t<a class=\"nav-link\" href=\"#\">Link 2<\/a>\n\t<\/li>\n\t<li class=\"nav-item\">\n\t\t<a class=\"nav-link\" href=\"#\">Link 3<\/a>\n\t<\/li>\n<\/ul><\/code><\/pre>\n\n\n\n\nRight-aligned with .justify-content-end:<\/strong><\/li>\n<\/ul>\n\n\n\n<ul class=\"nav justify-content-end\">\n\t<li class=\"nav-item\">\n\t\t<a class=\"nav-link\" href=\"#\">Link 1<\/a>\n\t<\/li>\n\t<li class=\"nav-item\">\n\t\t<a class=\"nav-link\" href=\"#\">Link 2<\/a>\n\t<\/li>\n\t<li class=\"nav-item\">\n\t\t<a class=\"nav-link\" href=\"#\">Link 3<\/a>\n\t<\/li>\n<\/ul><\/code><\/pre>\n\n\n\n\nVertical<\/strong>\n\nYou just need to use .flex-column class to make them vertical.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<ul class=\"nav flex-column\">\n\t<li class=\"nav-item\">\n\t\t<a class=\"nav-link\" href=\"#\">Link 1<\/a>\n\t<\/li>\n\t<li class=\"nav-item\">\n\t\t<a class=\"nav-link\" href=\"#\">Link 2<\/a>\n\t<\/li>\n\t<li class=\"nav-item\">\n\t\t<a class=\"nav-link\" href=\"#\">Link 3<\/a>\n\t<\/li>\n<\/ul><\/code><\/pre>\n\n\n\n\nTabs<\/strong>\n\nYou just need to use .nav and adds the .nav-tabs class to generate a tabbed interface.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<ul class=\"nav nav-tabs\">\n\t<li class=\"nav-item\">\n\t\t<a class=\"nav-link\" href=\"#\">Link 1<\/a>\n\t<\/li>\n\t<li class=\"nav-item\">\n\t\t<a class=\"nav-link\" href=\"#\">Link 2<\/a>\n\t<\/li>\n\t<li class=\"nav-item\">\n\t\t<a class=\"nav-link\" href=\"#\">Link 3<\/a>\n\t<\/li>\n<\/ul><\/code><\/pre>\n\n\n\n<\/span>Navbar<\/strong><\/span><\/h3>\n\n\n\n\nIn Bootstrap, a\u00a0navbar<\/strong>\u00a0(short for \u201cnavigation bar\u201d) is a flexible and responsive navigation component that provides a way to display links and content (like logos, dropdowns, buttons, etc.) at the top of your webpage. It typically contains links to navigate between different sections of a website or application.<\/li>\n\n\n\n The Bootstrap\u00a0Navbar<\/strong>\u00a0component is designed to be responsive, meaning it can adapt to different screen sizes and devices. On smaller screens (like mobile devices), the navbar can collapse into a \u201chamburger\u201d menu that users can click to reveal the navigation options.<\/li>\n\n\n\n Basic Structure of a Navbar in Bootstrap:<\/li>\n\n\n\n The basic structure of a navbar typically includes:\n\nNavbar Container<\/strong>: The outer wrapper element with classes like\u00a0navbar<\/code>,\u00a0navbar-expand-{breakpoint}<\/code>, and\u00a0navbar-light<\/code>\u00a0or\u00a0navbar-dark<\/code>.<\/li>\n\n\n\n Navbar Brand<\/strong>: A brand or logo that is usually placed on the left side of the navbar, often using the\u00a0navbar-brand<\/code>\u00a0class.<\/li>\n\n\n\n Navbar Links<\/strong>: The navigation items (links) that you want to display inside the navbar, typically wrapped inside a\u00a0navbar-nav<\/code>\u00a0class.<\/li>\n\n\n\n Toggler<\/strong>: A button that appears on smaller screen sizes to collapse\/expand the navbar content.<\/li>\n\n\n\n Navbar Toggle<\/strong>: The icon\/button to toggle the visibility of the navbar links when in a collapsed state on small screens.<\/li>\n<\/ul>\n<\/li>\n\n\n\n Example<\/strong><\/li>\n<\/ul>\n\n\n\n<head>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-EVSTQN3\/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC\" crossorigin=\"anonymous\">\n <\/head>\n <body>\n <nav class=\"navbar navbar-expand-lg navbar-dark bg-dark\">\n <a class=\"navbar-brand\" href=\"#\">HJD<\/a>\n <button class=\"navbar-toggler\" data-bs-toggle=\"collapse\" data-bs-target=\"#d1\">\n <span class=\"navbar-toggler-icon\"><\/span>\n <\/button>\n <div class=\"collapse navbar-collapse\" id=\"d1\">\n <ul class=\"navbar-nav\">\n <li class=\"nav-item \"><a href=\"#\" class=\"nav-link active\">Home<\/a><\/li>\n <li class=\"nav-item\"><a href=\"#\" class=\"nav-link\">Link 1<\/a><\/li>\n <li class=\"nav-item\"><a href=\"#\" class=\"nav-link\">Link 2<\/a><\/li>\n <li class=\"nav-item\"><a href=\"#\" class=\"nav-link disabled\">Disabled Link<\/a><\/li>\n <\/ul>\n <\/div> \n <\/nav>\n <nav class=\"navbar navbar-expand-lg navbar-dark bg-dark\">\n <a class=\"navbar-brand\" href=\"#\">HJD<\/a>\n <button class=\"navbar-toggler\" data-bs-toggle=\"collapse\" data-bs-target=\"#d1\">\n <span class=\"navbar-toggler-icon\"><\/span>\n <\/button>\n <div class=\"collapse navbar-collapse\" id=\"d1\">\n <ul class=\"navbar-nav\">\n <li class=\"nav-item \"><a href=\"#\" class=\"nav-link active\">Home<\/a><\/li>\n <li class=\"nav-item\"><a href=\"#\" class=\"nav-link\">Link 1<\/a><\/li>\n <li class=\"nav-item\"><a href=\"#\" class=\"nav-link\">Link 2<\/a><\/li>\n <li class=\"nav-item dropdown\">\n <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"navbarDropdown\" data-bs-toggle=\"dropdown\">\n Dropdown\n <\/a>\n <ul class=\"dropdown-menu\">\n <li><a class=\"dropdown-item\" href=\"#\">Action 1<\/a><\/li>\n <li><a class=\"dropdown-item\" href=\"#\">Action 2<\/a><\/li>\n <li><hr class=\"dropdown-divider\"><\/li>\n <li><a class=\"dropdown-item\" href=\"#\">Another Action<\/a><\/li>\n <\/ul>\n <\/li>\n <li class=\"nav-item\"><a href=\"#\" class=\"nav-link disabled\">Disabled Link<\/a><\/li>\n <\/ul>\n <\/div> \n <\/nav>\n \n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.bundle.min.js\" integrity=\"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn\/tWtIaxVXM\" crossorigin=\"anonymous\">\n <\/script>\n <\/body><\/code><\/pre>\n\n\n\n<\/span>Dropdowns<\/strong><\/span><\/h3>\n\n\n\n\nA dropdown is used as a UI component that allows you to create a menu of options or links that can be triggered to expand and show additional content when clicked or hovered over.<\/li>\n\n\n\n Bootstrap provides a simple and flexible way to create dropdowns for various purposes, such as navigation menus, user account options, and more.<\/li>\n<\/ul>\n\n\n\n<div class=\"dropdown\">\n\t<button class=\"btn btn-primary dropdown-toggle\" data-bs-toggle=\"dropdown\">\n\t\tDropdown Button\n\t<\/button>\n\t<ul class=\"dropdown-menu\">\n\t\t<li><a class=\"dropdown-item\" href=\"#\">Option 1<\/a><\/li>\n\t\t<li><a class=\"dropdown-item\" href=\"#\">Option 2<\/a><\/li>\n\t\t<li><a class=\"dropdown-item\" href=\"#\">Option 3<\/a><\/li>\n\t<\/ul>\n<\/div><\/code><\/pre>\n\n\n\n\nThe <div class=\u201ddropdown\u201d> element represents the container for the dropdown component.<\/li>\n\n\n\n The <button> element with the class btn btn-primary serves as the dropdown trigger.<\/li>\n\n\n\n The data-bs-toggle=\u201ddropdown\u201d attribute is used to specify the toggle behavior.<\/li>\n\n\n\n The <ul class=\u201ddropdown-menu\u201d> element contains the actual dropdown menu items, which are represented as list items with links.<\/li>\n\n\n\n Another example with btn-group and different variants.<\/li>\n<\/ul>\n\n\n\n<div class=\"btn-group\">\n\t<button class=\"btn btn-danger dropdown-toggle\" data-bs-toggle=\"dropdown\">\n\t\tAction\n\t<\/button>\n\t<ul class=\"dropdown-menu\">\n\t\t<li><a class=\"dropdown-item\" href=\"#\">Option 1<\/a><\/li>\n\t\t<li><a class=\"dropdown-item\" href=\"#\">Option 2<\/a><\/li>\n\t\t<li><a class=\"dropdown-item\" href=\"#\">Option 3<\/a><\/li>\n\t\t<li><hr class=\"dropdown-divider\"><\/li>\n\t\t<li><a class=\"dropdown-item\" href=\"#\">Option 4<\/a><\/li>\n\t<\/ul>\n\t<button class=\"btn btn-warning dropdown-toggle\" data-bs-toggle=\"dropdown\">\n\t\tAction\n\t<\/button>\n\t<ul class=\"dropdown-menu\">\n\t\t<li><a class=\"dropdown-item\" href=\"#\">Action<\/a><\/li>\n\t\t<li><a class=\"dropdown-item\" href=\"#\">Another action<\/a><\/li>\n\t\t<li><a class=\"dropdown-item\" href=\"#\">Something else here<\/a><\/li>\n\t\t<li><hr class=\"dropdown-divider\"><\/li>\n\t\t<li><a class=\"dropdown-item\" href=\"#\">Separated link<\/a><\/li>\n\t<\/ul>\n\t<button class=\"btn btn-success dropdown-toggle\" data-bs-toggle=\"dropdown\">\n\t\tAction\n\t<\/button>\n\t<ul class=\"dropdown-menu\">\n\t\t<li><a class=\"dropdown-item\" href=\"#\">Action<\/a><\/li>\n\t\t<li><a class=\"dropdown-item\" href=\"#\">Another action<\/a><\/li>\n\t\t<li><a class=\"dropdown-item\" href=\"#\">Something else here<\/a><\/li>\n\t\t<li><hr class=\"dropdown-divider\"><\/li>\n\t\t<li><a class=\"dropdown-item\" href=\"#\">Separated link<\/a><\/li>\n\t<\/ul>\n<\/div><\/code><\/pre>\n\n\n\n\nSplit button<\/strong>\n\nWe can create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of .dropdown-toggle-split for proper spacing around the dropdown caret.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<div class=\"btn-group\">\n<button class=\"btn btn-danger\">Action<\/button>\n<button class=\"btn btn-danger dropdown-toggle dropdown-toggle-split\" data-bs-toggle=\"dropdown\">\n<\/button>\n\t<ul class=\"dropdown-menu\">\n\t\t<li><a class=\"dropdown-item\" href=\"#\">Location 1<\/a><\/li>\n\t\t<li><a class=\"dropdown-item\" href=\"#\">Location 2<\/a><\/li>\n\t\t<li><a class=\"dropdown-item\" href=\"#\">Location 3<\/a><\/li>\n\t\t<li><hr class=\"dropdown-divider\"><\/li>\n\t\t<li><a class=\"dropdown-item\" href=\"#\">Location 4<\/a><\/li>\n\t<\/ul>\n<button class=\"btn btn-warning\">Action<\/button>\n<button class=\"btn btn-warning dropdown-toggle dropdown-toggle-split\" data-bs-toggle=\"dropdown\">\n<\/button>\n\t<ul class=\"dropdown-menu\">\n\t\t<li><a class=\"dropdown-item\" href=\"#\">Location 1<\/a><\/li>\n\t\t<li><a class=\"dropdown-item\" href=\"#\">Location 2<\/a><\/li>\n\t\t<li><a class=\"dropdown-item\" href=\"#\">Location 3<\/a><\/li>\n\t\t<li><hr class=\"dropdown-divider\"><\/li>\n\t\t<li><a class=\"dropdown-item\" href=\"#\">Location 4<\/a><\/li>\n\t<\/ul>\n<\/div><\/code><\/pre>\n\n\n\n<\/span>Breadcrumb<\/strong><\/span><\/h3>\n\n\n\n\nIt shows the current page\u2019s position in a navigation hierarchy by automatically including separators using CSS.<\/li>\n\n\n\n You can create a simple breadcrumb with minimal styling by using either an ordered or unordered list with linked list items.<\/li>\n\n\n\n If you wish to customize the appearance further, you can make use of other utility classes.<\/li>\n\n\n\n You can add different type of divider like \u2018>\u2019 using CSS style=\u201d\u2013bs-breadcrumb-divider:\u2019>\u2019\u201d.<\/li>\n<\/ul>\n\n\n\n<!-- Breadcrumb example -->\n<nav>\n\t<ol class=\"breadcrumb\">\n\t\t<li class=\"breadcrumb-item\"><a href=\"#\">Home<\/a><\/li>\n\t\t<li class=\"breadcrumb-item\"><a href=\"#\">Category<\/a><\/li>\n\t\t<li class=\"breadcrumb-item\"><a href=\"#\">Product<\/a><\/li>\n\t\t<li class=\"breadcrumb-item active\">Item 1<\/li>\n\t<\/ol>\n<\/nav>\n<br><hr>\n<!-- Styling with different divider -->\n<nav style=\"--bs-breadcrumb-divider:'>';\">\n\t<ol class=\"breadcrumb\">\n\t\t<li class=\"breadcrumb-item\"><a href=\"#\">Home<\/a><\/li>\n\t\t<li class=\"breadcrumb-item\"><a href=\"#\">Category<\/a><\/li>\n\t\t<li class=\"breadcrumb-item\"><a href=\"#\">Product<\/a><\/li>\n\t\t<li class=\"breadcrumb-item active\">Item 1<\/li>\n\t<\/ol>\n<\/nav>\t<\/code><\/pre>\n\n\n\n<\/span>Buttons<\/strong><\/span><\/h3>\n\n\n\n\nYou can use the custom button styles provided by Bootstrap for actions in forms, dialogs, and more. These styles support various button sizes and states.<\/li>\n\n\n\n Bootstrap comes with a variety of predefined button styles, each having a distinct semantic function and a few extras for further control.<\/li>\n<\/ul>\n\n\n\n<button class=\"btn btn-primary\">Primary<\/button>\n<button class=\"btn btn-secondary\">Secondary<\/button>\n<button class=\"btn btn-success\">Success<\/button>\n<button class=\"btn btn-danger\">Danger<\/button>\n<button class=\"btn btn-warning\">Warning<\/button>\n<button class=\"btn btn-info\">Info<\/button>\n<button class=\"btn btn-light\">Light<\/button>\n<button class=\"btn btn-dark\">Dark<\/button>\n<button class=\"btn btn-link\">Link<\/button><\/code><\/pre>\n\n\n\n\nButton tags<\/strong>\n\nThe <button> element is intended to be used in conjunction with the .btn classes.<\/li>\n\n\n\n The <a> and <input> elements can also utilize these classes.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<a class=\"btn btn-primary\" href=\"#\">Link<\/a>\n<button class=\"btn btn-primary\" type=\"submit\">Button<\/button>\n<input class=\"btn btn-primary\" type=\"button\" value=\"Input\">\n<input class=\"btn btn-primary\" type=\"submit\" value=\"Submit\">\n<input class=\"btn btn-primary\" type=\"reset\" value=\"Reset\"><\/code><\/pre>\n\n\n\n\nOutline buttons<\/strong>\n\nYou want a button, but you don\u2019t want the strong backdrop colors they bring.<\/li>\n\n\n\n To exclude all background colors and pictures from any button, substitute the .btn-outline-* modifier classes for the default ones.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<button class=\"btn btn-outline-primary\">Primary<\/button>\n<button class=\"btn btn-outline-secondary\">Secondary<\/button>\n<button class=\"btn btn-outline-success\">Success<\/button>\n<button class=\"btn btn-outline-danger\">Danger<\/button>\n<button class=\"btn btn-outline-warning\">Warning<\/button>\n<button class=\"btn btn-outline-info\">Info<\/button>\n<button class=\"btn btn-outline-light\">Light<\/button>\n<button class=\"btn btn-outline-dark\">Dark<\/button><\/code><\/pre>\n\n\n\n\nSizes<\/strong>: You can choose bigger or smaller buttons. You can add .btn-lg or .btn-sm for more sizes.<\/li>\n<\/ul>\n\n\n\n<button class=\"btn btn-primary btn-lg\">Large button<\/button>\n<button class=\"btn btn-secondary btn-lg\">Large button<\/button>\n<br><br>\n<button class=\"btn btn-primary btn-sm\">Small button<\/button>\n<button class=\"btn btn-secondary btn-sm\">Small button<\/button><\/code><\/pre>\n\n\n\n\nDisabled state<\/strong>: Add the disabled boolean attribute to any button> element to make buttons appear dormant.<\/li>\n<\/ul>\n\n\n\n<button class=\"btn btn-lg btn-primary\" disabled>Primary button<\/button>\n<button class=\"btn btn-secondary btn-lg\" disabled>Button<\/button><\/code><\/pre>\n\n\n\n\nButton Groups<\/strong>\n\nYou can group a series of buttons together on a single line or stack them in a vertical column.<\/li>\n<\/ul>\n<\/li>\n\n\n\n To make a group of buttons, wrap a series of buttons with .btn in .btn-group.<\/strong><\/li>\n<\/ul>\n\n\n\n<div class=\"btn-group\">\n<button class=\"btn btn-primary\">Left button<\/button>\n<button class=\"btn btn-primary\">Middle button<\/button>\n<button class=\"btn btn-primary\">Right button<\/button>\n<\/div><\/code><\/pre>\n\n\n\n\nThese classes can also be added to groups of links<\/li>\n<\/ul>\n\n\n\n<div class=\"btn-group\">\n<a href=\"#\" class=\"btn btn-primary active\">Active link 1<\/a>\n<a href=\"#\" class=\"btn btn-primary\">Link 2<\/a>\n<a href=\"#\" class=\"btn btn-primary\">Link 3<\/a>\n<\/div><\/code><\/pre>\n\n\n\n\nMixed Styles<\/strong><\/li>\n<\/ul>\n\n\n\n<div class=\"btn-group\">\n<button class=\"btn btn-danger\">Left Button<\/button>\n<button class=\"btn btn-warning\">Middle Button<\/button>\n<button class=\"btn btn-success\">Right Button<\/button>\n<\/div><\/code><\/pre>\n\n\n\n\nOutlined Styles<\/strong><\/li>\n<\/ul>\n\n\n\n<div class=\"btn-group\">\n<button type=\"button\" class=\"btn btn-outline-primary\">Left<\/button>\n<button type=\"button\" class=\"btn btn-outline-primary\">Middle<\/button>\n<button type=\"button\" class=\"btn btn-outline-primary\">Right<\/button>\n<\/div><\/code><\/pre>\n\n\n\n\nRadio button and Check Box Groups<\/strong><\/li>\n<\/ul>\n\n\n\n<!-- Check box group -->\n<div class=\"btn-group\">\n<input type=\"checkbox\" class=\"btn-check\" id=\"btncheck1\">\n<label class=\"btn btn-outline-primary\" for=\"btncheck1\">Checkbox 1<\/label>\n\n<input type=\"checkbox\" class=\"btn-check\" id=\"btncheck2\">\n<label class=\"btn btn-outline-primary\" for=\"btncheck2\">Checkbox 2<\/label>\n\n<input type=\"checkbox\" class=\"btn-check\" id=\"btncheck3\">\n<label class=\"btn btn-outline-primary\" for=\"btncheck3\">Checkbox 3<\/label>\n<\/div>\n<br><br>\n<!-- radio button group -->\n<div class=\"btn-group\">\n<input type=\"radio\" class=\"btn-check\" name=\"btnradio\" id=\"btnradio1\" checked>\n<label class=\"btn btn-outline-primary\" for=\"btnradio1\">Radio 1<\/label>\n\n<input type=\"radio\" class=\"btn-check\" name=\"btnradio\" id=\"btnradio2\" >\n<label class=\"btn btn-outline-primary\" for=\"btnradio2\">Radio 2<\/label>\n\n<input type=\"radio\" class=\"btn-check\" name=\"btnradio\" id=\"btnradio3\">\n<label class=\"btn btn-outline-primary\" for=\"btnradio3\">Radio 3<\/label>\n<\/div><\/code><\/pre>\n\n\n\n\nSizing<\/strong>\n\nYou can make buttons larger or smaller by applying button sizing classes to them. Bootstrap provides a set of classes for button sizing:<\/li>\n\n\n\n .btn-lg: This class makes the button larger.<\/li>\n\n\n\n .btn-sm: This class makes the button smaller.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<button type=\"button\" class=\"btn btn-lg btn-primary\">Large Button<\/button>\n<button type=\"button\" class=\"btn btn-primary\">Default Size Button<\/button>\n<button type=\"button\" class=\"btn btn-sm btn-primary\">Small Button<\/button><\/code><\/pre>\n\n\n\n\nVertical variation<\/strong>\n\nMake a set of buttons appear vertically stacked rather than horizontally<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<div class=\"btn-group-vertical\">\n\t<button type=\"button\" class=\"btn btn-outline-primary\">Large Button<\/button>\n\t<button type=\"button\" class=\"btn btn-outline-primary\">Default Size Button<\/button>\n\t<button type=\"button\" class=\"btn btn-outline-primary\">Small Button<\/button>\n<\/div><\/code><\/pre>\n\n\n\n<\/span>Pagination<\/strong><\/span><\/h3>\n\n\n\n\nWorking with previous and next link<\/strong><\/li>\n\n\n\n It is used to show pagination to indicate a series of related content exists across multiple pages.<\/li>\n<\/ul>\n\n\n\n<nav>\n\t<ul class=\"pagination\">\n\t\t<li class=\"page-item\"><a class=\"page-link\" href=\"#\">Previous<\/a><\/li>\n\t\t<li class=\"page-item\"><a class=\"page-link\" href=\"#\">1<\/a><\/li>\n\t\t<li class=\"page-item\"><a class=\"page-link\" href=\"#\">2<\/a><\/li>\n\t\t<li class=\"page-item\"><a class=\"page-link\" href=\"#\">3<\/a><\/li>\n\t\t<li class=\"page-item\"><a class=\"page-link\" href=\"#\">Next<\/a><\/li>\n\t<\/ul>\n<\/nav><\/code><\/pre>\n\n\n\n\nWorking with icons<\/strong>\n\nYou can use an icon or symbol in place of text for some pagination links.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<nav>\n\t<ul class=\"pagination\">\n\t\t<li class=\"page-item\">\n\t\t\t<a class=\"page-link\" href=\"#\">«<\/a>\n\t\t<\/li>\n\t\t<li class=\"page-item\"><a class=\"page-link\" href=\"#\">1<\/a><\/li>\n\t\t<li class=\"page-item\"><a class=\"page-link\" href=\"#\">2<\/a><\/li>\n\t\t<li class=\"page-item\"><a class=\"page-link\" href=\"#\">3<\/a><\/li>\n\t\t<li class=\"page-item\"><a class=\"page-link\" href=\"#\">»<\/a><\/li>\n\t<\/ul>\n<\/nav><\/code><\/pre>\n\n\n\n\nSizing<\/strong>\n\nYou can add .pagination-lg or .pagination-sm for additional sizes.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<nav>\n\t<ul class=\"pagination pagination-lg\">\n\t\t<li class=\"page-item active\">\n\t\t\t<span class=\"page-link\">1<\/span>\n\t\t<\/li>\n\t\t<li class=\"page-item\"><a class=\"page-link\" href=\"#\">2<\/a><\/li>\n\t\t<li class=\"page-item\"><a class=\"page-link\" href=\"#\">3<\/a><\/li>\n\t<\/ul>\n<\/nav>\n<br><br>\n<nav>\n\t<ul class=\"pagination pagination-sm\">\n\t\t<li class=\"page-item active\">\n\t\t\t<span class=\"page-link\">1<\/span>\n\t\t<\/li>\n\t\t<li class=\"page-item\"><a class=\"page-link\" href=\"#\">2<\/a><\/li>\n\t\t<li class=\"page-item\"><a class=\"page-link\" href=\"#\">3<\/a><\/li>\n\t<\/ul>\n<\/nav><\/code><\/pre>\n\n\n\n<\/span>Alerts<\/strong><\/span><\/h3>\n\n\n\n\nWith a limited number of available and adaptable alert messages, it provides contextual feedback messages for common user behaviors.<\/li>\n\n\n\n Any amount of text can have an alert, and there is also an optional close button.<\/li>\n\n\n\n You can use one of the eight necessary contextual classes (such as.alert-success) for the right styling.<\/strong><\/li>\n<\/ul>\n\n\n\n<div class=\"alert alert-primary\">\n\tThis is Primary alert\n<\/div>\n<div class=\"alert alert-secondary\">\n\tThis is Secondary alert\n<\/div>\n<div class=\"alert alert-success\">\n\tThis is Success alert\n<\/div>\n<div class=\"alert alert-danger\">\n\tThis is Danger alert\n<\/div>\n<div class=\"alert alert-warning\">\n\tThis is Warning alert\n<\/div>\n<div class=\"alert alert-info\">\n\tThis is Information alert\n<\/div>\n<div class=\"alert alert-light\">\n\tThis is Light alert\n<\/div>\n<div class=\"alert alert-dark\">\n\tThis is Dark alert\n<\/div>\t<\/code><\/pre>\n\n\n\n\nLink color<\/strong>\n\nYou can use the .alert-link utility class to quickly provide matching colored links within any alert.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<div class=\"alert alert-primary\">\n\tThis is Primary alert with <a href=\"#\" class=\"alert-link\">an example link<\/a>\n<\/div>\n<div class=\"alert alert-secondary\">\n\tThis is secondary alert with <a href=\"#\" class=\"alert-link\">an example link<\/a>\n<\/div>\n<div class=\"alert alert-success\">\n\tThis is success alert with <a href=\"#\" class=\"alert-link\">an example link<\/a>\n<\/div>\n<div class=\"alert alert-danger\">\n\tThis is danger alert with <a href=\"#\" class=\"alert-link\">an example link<\/a>\n<\/div>\n<div class=\"alert alert-warning\">\n\tThis is warning alert with <a href=\"#\" class=\"alert-link\">an example link<\/a>\n<\/div>\n<div class=\"alert alert-info\">\n\tThis is info alert with <a href=\"#\" class=\"alert-link\">an example link<\/a>\n<\/div>\n<div class=\"alert alert-light\">\n\tThis is light alert with <a href=\"#\" class=\"alert-link\">an example link<\/a>\n<\/div>\n<div class=\"alert alert-dark\">\n\tThis is dark alert with <a href=\"#\" class=\"alert-link\">an example link<\/a>\n<\/div><\/code><\/pre>\n\n\n\n\nDismissing<\/strong>\n\nYou can add a close button and the .alert-dismissible class, which places the close button and provides extra padding to the right of the alert.<\/li>\n\n\n\n You can add the attribute data-bs-dismiss=\u201dalert\u201d to the close button to activate JavaScript capability. Use the button> element together with it to ensure optimal device behavior.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<div class=\"alert alert-warning alert-dismissible\">\n\t<strong>Hey Students!<\/strong> You must wear your I-Card.\n\t<button class=\"btn-close\" data-bs-dismiss=\"alert\"><\/button>\n<\/div><\/code><\/pre>\n\n\n\n<\/span>Progress Bars<\/strong><\/span><\/h3>\n\n\n\n\nIn Bootstrap, a progress bar shows how a task or process is progressing visually.<\/li>\n\n\n\n It is frequently used to show the progress of an action, such as loading content, submitting a form, or doing any other lengthy task.<\/li>\n<\/ul>\n\n\n\n<div class=\"progress\">\n\t<div class=\"progress-bar aria-valuenow=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div>\n<\/div><br>\n<div class=\"progress\">\n\t<div class=\"progress-bar\" style=\"width: 25%\" aria-valuenow=\"25\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div>\n<\/div><br>\n<div class=\"progress\">\n\t<div class=\"progress-bar\u201d style=\"width: 50%\" aria-valuenow=\"50\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div>\n<\/div><br>\n<div class=\"progress\">\n\t<div class=\"progress-bar\u201d style=\"width: 75%\" aria-valuenow=\"75\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div>\n<\/div><br>\n<div class=\"progress\">\n\t<div class=\"progress-bar\" style=\"width:100%\"aria-valuenow=\"100\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div>\n<\/div>\t<\/code><\/pre>\n\n\n\n\nHere, <div class=\u201dprogress\u201d> is a container element with the class \u201cprogress.\u201d It serves as the outer container for the progress bar, providing the structural layout.<\/li>\n\n\n\n <div class=\u201dprogress-bar\u201d> is the actual progress bar element. It has the class \u201cprogress-bar,\u201d indicating that it\u2019s a Bootstrap progress bar. The role attribute is set to \u201cprogressbar,\u201d indicating its role as a progress bar for accessibility.<\/li>\n\n\n\n style=\u201dwidth: 25%\u201d, inline style sets the width of the progress bar to 25%. This means that, visually, the progress bar is filled to 25% of its total length, indicating that the associated task or process is 25% complete.<\/li>\n\n\n\n aria-valuenow=\u201d25\u2033, aria-valuenow attribute specifies the current value of the progress bar, which is set to 25 in this case, matching the visual width of the progress bar.<\/li>\n\n\n\n aria-valuemin=\u201d0\u2033 and aria-valuemax=\u201d100\u2033 attributes specify the minimum and maximum values for the progress bar. In this example, the minimum value is set to 0, and the maximum value is set to 100, which is common for percentage-based progress bars.<\/li>\n\n\n\n This code creates a progress bar that visually indicates a task or process is 25% complete. The aria-valuenow attribute and the style attribute\u2019s width setting are synchronized to represent the same progress level.<\/li>\n\n\n\n You can also use .progress-bar w-75 to set the width of style of bar.<\/li>\n<\/ul>\n\n\n\n<div class=\"progress\">\n<div class=\"progress-bar w-75\" aria-valuenow=\"75\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div>\n<\/div><\/code><\/pre>\n\n\n\n\nLabels<\/strong>\n\nYou can add labels to your progress bars by placing text within the .progress-bar.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<div class=\"progress\">\n<div class=\"progress-bar w-25\" aria-valuenow=\"25\" aria-valuemin=\"0\" aria-valuemax=\"100\">25%<\/div>\n<\/div><\/code><\/pre>\n\n\n\n\nHeight<\/strong>\n\nWe only set a\u00a0height\u00a0value on the\u00a0.progress, so if you change that value the inner\u00a0.progress-bar\u00a0will automatically resize accordingly.<\/li>\n<\/ul>\n<\/li>\n\n\n\n Backgrounds<\/strong>\n\nYou can use background utility classes to change the appearance of individual progress bars.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<div class=\"progress\" style=\"height: 10px;\">\n\t\t<div class=\"progress-bar w-25 bg-success\" aria-valuenow=\"25\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div>\n<\/div><br>\n<div class=\"progress\" style=\"height: 20px;\">\n\t\t<div class=\"progress-bar w-25 bg-info\" aria-valuenow=\"25\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div>\n<\/div><br>\n<div class=\"progress\" style=\"height: 10px;\">\n\t\t<div class=\"progress-bar w-25 bg-warning\" aria-valuenow=\"25\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div>\n<\/div><br>\n<div class=\"progress\" style=\"height: 20px;\">\n\t\t<div class=\"progress-bar w-25 bg-danger\" aria-valuenow=\"25\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div>\n<\/div><br>\n<div class=\"progress\" style=\"height: 10px;\">\n\t\t<div class=\"progress-bar w-25 bg-dark\" aria-valuenow=\"25\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div>\n<\/div><br>\n<div class=\"progress\" style=\"height: 20px;\">\n\t\t<div class=\"progress-bar w-25 bg-light\" aria-valuenow=\"25\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div>\n<\/div><\/code><\/pre>\n\n\n\n\nStriped<\/strong>\n\nJust add .progress-bar-striped to any .progress-bar to apply a stripe over the progress bar\u2019s background color.<\/li>\n<\/ul>\n<\/li>\n\n\n\n Animated Striped<\/strong>\n\nJust add .progress-bar-animated to .progress-bar to animate the stripes.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<div class=\"progress\">\n\t\t<div class=\"progress-bar progress-bar-striped\" style=\"width: 25%\" aria-valuenow=\"25\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div>\n\t<\/div><br>\n<div class=\"progress\">\n\t\t<div class=\"progress-bar progress-bar-striped bg-success\" style=\"width: 50%\" aria-valuenow=\"50\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div>\n\t<\/div><br>\n<div class=\"progress\">\n\t\t<div class=\"progress-bar progress-bar-striped bg-danger progress-bar-animated\" style=\"width: 50%\" aria-valuenow=\"50\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div>\n<\/div><\/code><\/pre>\n\n\n\n<\/span>Accordion<\/strong><\/span><\/h3>\n\n\n\n\nIn Bootstrap, an accordion is a component that allows you to create collapsible content sections, typically used to display information in an organized and space-efficient manner.<\/li>\n\n\n\n It\u2019s a great way to present a list of items with associated content, such as frequently asked questions (FAQs) or panels of information that users can expand and collapse as needed.<\/li>\n<\/ul>\n\n\n\n<div id=\"myAccordion\" class=\"accordion\">\n\t\t<div class=\"accordion-item\">\n\t\t\t<h2 class=\"accordion-header\">\n\t\t\t<button class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#collapse1\">Accordion Item #1\t<\/button>\n\t\t\t<\/h2>\n\t\t\t<div id=\"collapse1\" class=\"accordion-collapse collapse\" data-bs-parent=\"#myAccordion\">\n\t\t\t\t<div class=\"accordion-body\">\n\t\t\t\t\tContent for Accordion Item #1 goes here.\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t<div class=\"accordion-item\">\n\t\t\t<h2 class=\"accordion-header\">\n\t\t\t<button class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#collapse2\">Accordion Item #2\t<\/button>\n\t\t\t<\/h2>\n\t\t\t<div id=\"collapse2\" class=\"accordion-collapse collapse\" data-bs-parent=\"#myAccordion\">\n\t\t\t\t<div class=\"accordion-body\">\n\t\t\t\t\tContent for Accordion Item #2 goes here.\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n<\/div><\/code><\/pre>\n\n\n\n<\/span>Card<\/strong><\/span><\/h3>\n\n\n\n\nA Card is a flexible and extensible content container that can be used to present various types of content in a consistent and visually appealing manner.<\/li>\n\n\n\n Cards are a fundamental part of Bootstrap\u2019s user interface components and can be used for displaying information, images, links, and other content.<\/li>\n\n\n\n It provides choices for headers and footers, a diverse range of content, background colors that match the context, and robust display possibilities.<\/li>\n<\/ul>\n\n\n\n<div class=\"card\" style=\"width:300px;\">\n\t<img src=\"rose.jfif\" class=\"card-img-top\" alt=\"Rose with water drops\">\n\t\t<div class=\"card-body\">\n\t\t\t<h5 class=\"card-title\">Red Rose<\/h5>\n\t\t\t<p class=\"card-text\">This is beautiful red rose in rainy season.<\/p>\n\t\t\t\t<a href=\"#\" class=\"btn btn-primary\">Go Anywhere<\/a>\n\t\t<\/div>\n<\/div><\/code><\/pre>\n\n\n\n\nCards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what\u2019s supported.<\/li>\n\n\n\n Body<\/strong>\n\nThe .card-body is a card\u2019s fundamental component. Use it any time you require a padded area within a card.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<div class=\"card\" style=\"width:500px;\">\n\t<div class=\"card-body\">\n\t\tThis is H J Doshi Jamnagar inside Card body.\n\t<\/div>\n<\/div><\/code><\/pre>\n\n\n\n\nTitles, text, and links<\/strong>\n\nYou can utilize card titles by appending .card-title to a <h> element.<\/li>\n\n\n\n The same method is used to add and position links by appending .card-link to an <a> tag.<\/li>\n\n\n\n You can utilize subtitles by appending a .card-subtitle tag to a <h> tag.<\/li>\n\n\n\n The card title and subtitle are beautifully aligned if the .card-title and .card-subtitle items are placed in a .card-body item.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<div class=\"card\" style=\"width:500px;\">\n <div class=\"card-body\">\n <h5 class=\"card-title\">H J Doshi<\/h5>\n <h6 class=\"card-subtitle mb-2 text-muted\">BCA, BCom and PGDCA College<\/h6>\n <p class=\"card-text\">We are located in the middle of the city Jamnagar<\/p>\n <a href=\"#\" class=\"card-link\">Link 1<\/a>\n <a href=\"#\" class=\"card-link\">Link 2<\/a>\n <\/div>\n<\/div><\/code><\/pre>\n\n\n\n\nImages<\/strong>\n\n.card-img-top adds a top-level picture to the card.<\/li>\n\n\n\n Text can be added to the card using .card-text.<\/li>\n\n\n\n The usual HTML elements can also be used to style text inside of .card-text.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<div class=\"card\" style=\"width:300px;\">\n<img src=\"rose.jfif\" class=\"card-img-top\" alt=\"Red rose\">\n<div class=\"card-body\">\n<p class=\"card-text\">This is beautiful red rose in rainy season.<\/p>\n<\/div><\/div><\/code><\/pre>\n\n\n\n\nModal<\/strong>\n\nA modal in Bootstrap is a dialogue box or pop-up window that is used to present extra content or forms over the currently shown page.<\/li>\n\n\n\n It is frequently used to display login forms, contact forms, or notifications, among other things.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<button class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#exampleModal\">\n Click here to check the Modal\n<\/button>\n<div class=\"modal fade\" id='exampleModal'>\n<div class=\"modal-dialog\">\n<div class=\"modal-content\">\n<div class=\"modal-header\">\n<h5 class=\"modal-title\">This is Modal title<\/h5>\n<button class=\"btn-close\" data-bs-dismiss=\"modal\"><\/button>\n<\/div>\n<div class=\"modal-body\">\n<p>Modal body text goes here.<\/p>\n<\/div>\n<div class=\"modal-footer\">\n<button class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close<\/button>\n<\/div>\n<\/div>\n<\/div>\n<\/div><\/code><\/pre>\n\n\n\n\nScrolling long content<\/strong>\n\nWhen modals become too long for the user\u2019s viewport or device, they scroll independent of the page itself.<\/li>\n\n\n\n You can also create a scrollable modal that allows scroll the modal body by adding .modal-dialog-scrollable to .modal-dialog.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<button class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#exampleModal\">\n Click here to check the Modal\n<\/button>\n<div class=\"modal fade\" id='exampleModal'>\n<div class=\"modal-dialog modal-dialog-scrollable\">\n<div class=\"modal-content\">\n<div class=\"modal-header\">\n<h5 class=\"modal-title\">This is Scrollable Modal title<\/h5>\n<button class=\"btn-close\" data-bs-dismiss=\"modal\"><\/button>\n<\/div>\n<div class=\"modal-body\">\n<p>This is some placeholder content to show the \n\t\tscrolling behavior for modals. We use repeated line breaks \n\t\tto demonstrate how content can exceed minimum inner height,\n\t\tthereby showing inner scrolling. When content becomes longer \n\t\tthan the predefined max-height of modal, content will be cropped \n\t\tand scrollable within the modal.\n \u2026\u2026\n\t<\/p>\n<\/div>\n<div class=\"modal-footer\">\n<button class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close<\/button>\n<\/div>\n<\/div>\n<\/div>\n<\/div><\/code><\/pre>\n\n\n\n\nVertically centered<\/strong>\n\nYou can add .modal-dialog-centered to .modal-dialog to vertically center the modal.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<!-- Vertically centered modal -->\n<div class=\"modal-dialog modal-dialog-centered\">\n ...\n<\/div><\/code><\/pre>\n\n\n\n<\/span>Bootstrap Utilities<\/strong><\/span><\/h2>\n\n\n\n<\/span>Text Utilitie<\/strong>s<\/span><\/h3>\n\n\n\n\nYou can change text alignment, transform, style, weight, line-height, decoration and color with following utilities:<\/li>\n\n\n\n Text alignment<\/strong>\n\nUsing text alignment classes, you can effortlessly adjust the alignment of text within components.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p class=\"text-start\">This is start aligned text on all viewport sizes.<\/p>\n<p class=\"text-center\">This is center aligned text on all viewport sizes.<\/p>\n<p class=\"text-end\">This is end aligned text on all viewport sizes.<\/p><\/code><\/pre>\n\n\n\n\nText transform<\/strong>\n\nIt allows you to change the capitalization of text within HTML elements.<\/li>\n\n\n\n It is useful for altering the appearance of text without the need for custom CSS.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p class=\"text-lowercase\">THIS MUST BE LOWERCASE TEXT.<\/p>\n<p class=\"text-uppercase\">this must be uppercase text.<\/p>\n<p class=\"text-capitalize\">this must be capitalize text.<\/p><\/code><\/pre>\n\n\n\n\nFont size<\/strong>\n\nBootstrap offers convenient utility classes for effortlessly managing text font sizes in your web application.<\/li>\n\n\n\n These classes can be applied to HTML elements, allowing you to fine-tune text sizes according to your preferences.<\/li>\n\n\n\n These classes control font size, with .fs-1 being the largest and .fs-6 the smallest.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p class=\"lead\">As we go from top to bottom, paragraph will be decreased in size<\/p>\n<p class=\"fs-1\">Hello Students..<\/p>\n<p class=\"fs-2\">Hello Students..<\/p>\n<p class=\"fs-3\">Hello Students..<\/p>\n<p class=\"fs-4\">Hello Students..<\/p>\n<p class=\"fs-5\">Hello Students..<\/p>\n<p class=\"fs-6\">Hello Students..<\/p><\/code><\/pre>\n\n\n\n\nFont weight and italics<\/strong>\n\nEasily modify text font-weight or font-style using these convenient utility classes. Font-style utilities are represented with abbreviations like .fst-, while font-weight utilities are denoted by .fw-.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p class=\"fw-bold\">This is Bold text.<\/p>\n<p class=\"fw-bolder\">This is Bolder weight text (relative to the parent element).<\/p>\n<p class=\"fw-normal\">This is Normal weight text.<\/p>\n<p class=\"fw-light\">This is Light weight text.<\/p>\n<p class=\"fw-lighter\">This is Lighter weight text (relative to the parent element).<\/p>\n<p class=\"fst-italic\">This is Italic text.<\/p>\n<p class=\"fst-normal\">This is Text with normal font style<\/p><\/code><\/pre>\n\n\n\n\nLine height<\/strong>\n\nYou can change the line height with .lh-* utilities.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p class=\"lh-sm\">This is a long paragraph written to show how the line-height of an element is affected by our utilities. This is a long paragraph written to show how the line-height of an element is affected by our utilities. <\/p>\n<p class=\"lh-base\">This is a long paragraph written to show how the line-height of an element is affected by our utilities. This is a long paragraph written to show how the line-height of an element is affected by our utilities. <\/p>\n<p class=\"lh-lg\">This is a long paragraph written to show how the line-height of an element is affected by our utilities. This is a long paragraph written to show how the line-height of an element is affected by our utilities. <\/p><\/code><\/pre>\n\n\n\n\nReset Color<\/strong>\n\nIt resets a text or link\u2019s color with .text-reset, so that it can inherit the color from its parent element.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><a href=\"#\" class='text-reset'>Click Here<\/a><\/p><\/code><\/pre>\n\n\n\n\nText Decoration<\/strong>\n\nIt decorates text in components with text decoration classes.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p class=\"text-decoration-underline\">This is underline example<\/p>\n<p class=\"text-decoration-line-through\">This is line through example<\/p>\n<a href=\"#\" class=\"text-decoration-none\">This is link without underline<\/a><\/code><\/pre>\n\n\n\n<\/span>Color Utilities<\/strong><\/span><\/h3>\n\n\n\n\nYou can use the following utilities for color<\/li>\n\n\n\n Colors<\/strong>\n\nIt colorizes text with color utilities. If you want to colorize links, you can use the .link-* helper classes which have :hover and :focus states.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p class=\"text-primary\">This is primary text<\/p>\n<p class=\"text-secondary\">This is secondary text<\/p>\n<p class=\"text-success\">This is success text<\/p>\n<p class=\"text-danger\">This is danger text<\/p>\n<p class=\"text-warning bg-dark\">This is warning text<\/p>\n<p class=\"text-info bg-dark\">This is information text<\/p>\n<p class=\"text-light bg-dark\">This is light text with dark background<\/p>\n<p class=\"text-dark\">This is dark text<\/p>\n<p class=\"text-body\">This is body text<\/p>\n<p class=\"text-muted\">This is muted text<\/p>\n<p class=\"text-white bg-dark\">This is white text with dark background<\/p>\n<p class=\"text-black-50\">This is black(50%) text<\/p>\n<p class=\"text-white-50 bg-dark\">This is white(50%) with dark background<\/p><\/code><\/pre>\n\n\n\n<\/span>Background Utilities<\/strong><\/span><\/h3>\n\n\n\n\nYou can use gradients to provide decoration and background color to convey meaning.<\/li>\n\n\n\n Background Color<\/strong>\n\nSet an element\u2019s background to any contextual class, much like you would with contextual text color classes.<\/li>\n\n\n\n Since background utilities don\u2019t adjust color, you might want to utilize in some situations .color utilities for text-.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<div class=\"p-3 mb-2 bg-primary text-white\">Primary Color<\/div>\n<div class=\"p-3 mb-2 bg-secondary text-white\">Secondary Color<\/div>\n<div class=\"p-3 mb-2 bg-success text-white\">Success Color<\/div>\n<div class=\"p-3 mb-2 bg-danger text-white\">Danger Color<\/div>\n<div class=\"p-3 mb-2 bg-warning text-dark\">Warning Color<\/div>\n<div class=\"p-3 mb-2 bg-info text-dark\">Info Color<\/div>\n<div class=\"p-3 mb-2 bg-light text-dark\">Light Color<\/div>\n<div class=\"p-3 mb-2 bg-dark text-white\">Dark Color<\/div>\n<div class=\"p-3 mb-2 bg-body text-dark\">Body Color<\/div>\n<div class=\"p-3 mb-2 bg-white text-dark\">White Color<\/div>\n<div class=\"p-3 mb-2 bg-transparent text-dark\">Transparent Color<\/div><\/code><\/pre>\n\n\n\n\nIn this example,\u00a0p-3 class<\/em><\/strong>\u00a0is used to apply padding to an element.<\/li>\n\n\n\n p-3 stands for \u201cpadding 3,\u201d and it adds a medium amount of padding to all sides (top, right, bottom, and left) of the element.<\/li>\n\n\n\n This class ensures that there is some spacing around the content inside the <div>.<\/li>\n\n\n\n mb-2 class<\/em><\/strong>\u00a0is used to apply margin to the bottom of an element.<\/li>\n\n\n\n mb-2 stands for \u201cmargin bottom 2,\u201d and it adds a small margin to \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 the bottom of the element.<\/li>\n\n\n\n This creates space between this <div> and the element that comes after it, adding vertical separation.<\/li>\n\n\n\n Background gradient<\/strong>\n\nWhen you include the .bg-gradient class, it introduces a linear gradient as the background image for the elements. This gradient commences with a slightly transparent white shade and gradually diminishes towards the lower part.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<div class=\"p-3 mb-2 bg-primary bg-gradient text-white\">Primary Color<\/div>\n<div class=\"p-3 mb-2 bg-secondary bg-gradient text-white\">Secondary Color<\/div>\n<div class=\"p-3 mb-2 bg-success bg-gradient text-white\">Success Color<\/div>\n<div class=\"p-3 mb-2 bg-danger bg-gradient text-white\">Danger Color<\/div>\n<div class=\"p-3 mb-2 bg-warning bg-gradient text-dark\">Warning Color<\/div>\n<div class=\"p-3 mb-2 bg-info bg-gradient text-dark\">Info Color<\/div>\n<div class=\"p-3 mb-2 bg-light bg-gradient text-dark\">Light Color<\/div>\n<div class=\"p-3 mb-2 bg-dark bg-gradient text-white\">Dark Color<\/div>\n<div class=\"p-3 mb-2 bg-body bg-gradient text-dark\">Body Color<\/div>\n<div class=\"p-3 mb-2 bg-white bg-gradient text-dark\">White Color<\/div>\n<div class=\"p-3 mb-2 bg-transparent bg-gradient text-dark\">Transparent Color<\/div><\/code><\/pre>\n\n\n\n<\/span>Borders Utilities<\/strong><\/span><\/h3>\n\n\n\n\nYou can use border utilities to quickly style the border and border-radius of an element for images, buttons, or any other element.<\/li>\n\n\n\n Border \u2013 Additive border with color<\/strong>\n\nUse border utilities to add or remove an element\u2019s borders. Choose from all borders or one at a time.<\/li>\n\n\n\n Add border-primary or border-secondary etc to make it colored borders<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<div class=\"border border-primary\" style=\"width:100px;height:100px\">All border<\/div><br>\n<div class=\"border-top border-primary\" style=\"width:100px;height:100px\">Top border<\/div><br>\n<div class=\"border-bottom border-primary\" style=\"width:100px;height:100px\">Bottom Border<\/div><br>\n<div class=\"border-end border-primary\" style=\"width:100px;height:100px\">End border<\/div><br>\n<div class=\"border-start border-primary\" style=\"width:100px;height:100px\">Start Border<\/div><\/code><\/pre>\n\n\n\n\nSubtractive Borders<\/strong>\n\nIf you don\u2019t want border at particular side, you just need to write the class accordingly.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<div class=\"border-0\" style=\"margin:20px;width:100px;height:100px;background-color:cyan;\">No border<\/div><br>\n<div class=\"border-top-0\" style=\"margin:20px;border:1px solid;width:100px;height:100px;background-color:cyan;\">No Top border<\/div><br>\n<div class=\"border-bottom-0\" style=\"margin:20px;border:1px solid;width:100px;height:100px;background-color:cyan;\">No Bottom border<\/div><br>\n<div class=\"border-start-0\" style=\"margin:20px;border:1px solid;width:100px;height:100px;background-color:cyan;\">No start border<\/div><br>\n<div class=\"border-end-0\" style=\"margin:20px;border:1px solid;width:100px;height:100px;background-color:cyan;\">No end border<\/div><\/code><\/pre>\n\n\n\n<\/span>Display Utilities<\/strong><\/span><\/h3>\n\n\n\n\nWith display tools, you can easily and quickly change the display value of components and more.<\/li>\n\n\n\n It includes extras for managing display while printing as well as support for some of the more popular values.<\/li>\n\n\n\n d-inline and d-block classes<\/strong>\n\nThey are used to manage an element\u2019s display property.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<!-- inline division -->\n<div class=\"d-inline p-2 bg-primary text-white\">This is inline division<\/div>\n<div class=\"d-inline p-2 bg-warning text-dark\">This is inline division<\/div>\n<!-- block division -->\n<div class=\"d-block p-2 bg-primary text-white\">This is block division<\/div>\n<div class=\"d-block p-2 bg-warning text-dark\">This is block division<\/div><\/code><\/pre>\n\n\n\n\nThe d-inline class makes an element behave as an inline element. It allows the element to flow with surrounding content horizontally.<\/li>\n\n\n\n The d-block class makes an element behave as a block-level element. It takes up the full width available and starts on a new line.<\/li>\n<\/ul>\n\n\n\n\nHiding elements:\u00a0<\/strong>To hide elements simply use the\u00a0.d-none<\/strong>\u00a0class or one of the\u00a0.d-{sm,md,lg,xl,xxl}<\/strong>-none classes for any responsive screen variation.<\/li>\n\n\n\n Display in Print:\u00a0<\/strong>You can change the display value of elements when printing with our print display utility classes.<\/li>\n<\/ul>\n\n\n\n<!-- hiding div -->\n<div class=\"d-none\">This div remains always hide with this class<\/div>\n<div class=\"d-md-none\">This div hides on md(>=768) or wider screens<\/div>\n<!-- display in print -->\n<div class=\"d-print-none\">Screen Only (Hide on print only)<\/div>\n<div class=\"d-none d-print-block\">Print Only (Hide on screen only)<\/div><\/code><\/pre>\n\n\n\n<\/span>Overflow Utilities<\/strong><\/span><\/h3>\n\n\n\n\nYou can use these shorthand utilities for quickly configuring how content overflows an element.<\/li>\n\n\n\n With four default values and classes, you may modify the overflow property instantly. By default, these classes are not responsive.<\/li>\n<\/ul>\n\n\n\n<div class=\"overflow-auto\" style=\"width:150px;height:100px;background-color:cyan;\">This is an example of using .overflow-auto on an element with set width and height dimensions. By design, this content will vertically scroll.<\/div><br><br>\n<div class=\"overflow-hidden\" style=\"background-color:cyan;width:150px;height:100px;\">This is an example of using .overflow-hidden on an element with set width and height dimensions.<\/div><br><br>\n<div class=\"overflow-visible\" style=\"width:150px;height:100px;background-color:cyan;\">This is an example of using .overflow-visible on an element with set width and height dimensions<\/div><br><br>\n<div class=\"overflow-scroll\" style=\"width:150px;height:100px;background-color:cyan;\">This is an example of using .overflow-scroll on an element with set width and height dimensions.<div><\/code><\/pre>\n\n\n\n<\/span>Position Utilities<\/strong><\/span><\/h3>\n\n\n\n\nYou can use these shorthand utilities for quickly configuring the position of an element.<\/li>\n<\/ul>\n\n\n\n\nPosition values<\/strong><\/li>\n\n\n\n Quick positioning classes are available, though they are not responsive.<\/li>\n<\/ul>\n\n\n\n<div class=\"position-static\" style=\"border:1px solid;background-color:cyan;width:100px;height:100px;\">This is static<\/div>\n<div class=\"position-relative\" style=\"border:1px solid;background-color:cyan;width:100px;height:100px;\">This is relative<\/div>\n<div class=\"position-absolute\" style=\"margin:100px;border:1px solid;background-color:cyan;width:100px;height:100px;\">This is absolute<\/div>\n<div class=\"position-absolute\" style=\"margin:200px;border:1px solid;background-color:cyan;width:100px;height:100px;\">This is absolute<\/div>\n<div class=\"position-fixed\" style=\"border:1px solid;background-color:cyan;width:100px;height:100px;\">This is fixed<\/div>\n<p>\u2026Scrollable content here\u2026<\/p><\/code><\/pre>\n\n\n\n<\/span>Spacing Utilities<\/strong><\/span><\/h3>\n\n\n\n\nTo change an element\u2019s appearance, Bootstrap offers a large selection of brief responsive margin, padding, and gap utility classes.<\/li>\n<\/ul>\n\n\n\n\nMargin and Padding Notation<\/strong><\/li>\n\n\n\n The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, xl, and xxl.<\/li>\n\n\n\n Where property is one of:\n\nm \u2013 for classes that set margin<\/li>\n\n\n\n p \u2013 for classes that set padding<\/li>\n<\/ul>\n<\/li>\n\n\n\n Where sides is one of:\n\nt \u2013 for classes that set margin-top or padding-top<\/li>\n\n\n\n b \u2013 for classes that set margin-bottom or padding-bottom<\/li>\n\n\n\n s \u2013 (start) for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL<\/li>\n\n\n\n e \u2013 (end) for classes that set margin-right or padding-right in LTR, margin-left or padding-left in RTL<\/li>\n\n\n\n x \u2013 for classes that set both -left and -right<\/li>\n\n\n\n y \u2013 for classes that set both -top and *-bottom<\/li>\n\n\n\n blank \u2013 for classes that set a margin or padding on all 4 sides of the element<\/li>\n<\/ul>\n<\/li>\n\n\n\n Where size is one of:\n\n0 \u2013 for classes that eliminate the margin or padding by setting it to 0<\/li>\n\n\n\n 1 \u2013 (by default) for classes that set the margin or padding<\/li>\n\n\n\n 2 \u2013 (by default) for classes that set the margin or padding<\/li>\n\n\n\n 3 \u2013 (by default) for classes that set the margin or padding<\/li>\n\n\n\n 4 \u2013 (by default) for classes that set the margin or padding<\/li>\n\n\n\n 5 \u2013 (by default) for classes that set the margin or padding<\/li>\n\n\n\n auto \u2013 for classes that set the margin to auto<\/li>\n<\/ul>\n<\/li>\n\n\n\n Horizontal Centering<\/strong>\n\nFurthermore, by setting the horizontal margins to auto, Bootstrap now contains a.mx-auto class that can be used to center fixed-width block level content (i.e., content with display: block and a width specified) horizontally.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<div class=\"mx-auto\" style=\"width:200px;\">\n\tThis is centered division\n<\/div><\/code><\/pre>\n\n\n\n\nGap<\/strong>\n\nGap utilities can be used on the parent grid container when display: grid is used. This can save on having to provide margin utilities to individual grid elements (children of a display: grid container).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<div class=\"d-grid gap-4\">\n\t<div class=\"p-2 bg-warning border\">This is HTML<\/div>\n\t<div class=\"p-2 bg-warning border\">This is CSS<\/div>\n\t<div class=\"p-2 bg-warning border\">This is Bootstrap<\/div>\n<\/div><\/code><\/pre>\n\n\n\n<\/span>Vertical align Utilities<\/strong><\/span><\/h3>\n\n\n\n\nYou can easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.<\/li>\n\n\n\n The utilities for vertical alignment allow you to change how items are aligned.<\/li>\n\n\n\n Note that only inline, inline-block, inline-table, and table cell elements are impacted by vertical-align.<\/li>\n\n\n\n As required, pick from the following options: .align-baseline, .align-top, .align-middle, .align-bottom.<\/li>\n<\/ul>\n\n\n\n<table style=\"height: 100px;\" class=\"table table-bordered\">\n<tbody>\n<tr>\n<td class=\"align-top\">top<\/td>\n<td class=\"align-middle\">middle<\/td>\n<td class=\"align-bottom\">bottom<\/td>\n<td class=\"align-baseline\">baseline<\/td>\n<\/tbody>\n<\/table><\/code><\/pre>\n<\/body>","protected":false},"excerpt":{"rendered":"What is Bootstrap? Why Bootstrap? Getting Bootstrap Bootstrap Layout Container How to create webpage with bootstrap Bootstrap Grid System (Row & Column) \u00a0Col 1 \u00a0Col 1 \u00a0Col 1 \u00a0Col 1 \u00a0Col 1 \u00a0Col 1 \u00a0Col 1 \u00a0Col 1 \u00a0Col 1 \u00a0Col 1 \u00a0Col 1 Col 1 Col 4 Col 4 Col 4 Col 4 Col […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"zakra_page_container_layout":"customizer","zakra_page_sidebar_layout":"customizer","zakra_remove_content_margin":false,"zakra_sidebar":"customizer","zakra_transparent_header":"customizer","zakra_logo":0,"zakra_main_header_style":"default","zakra_menu_item_color":"","zakra_menu_item_hover_color":"","zakra_menu_item_active_color":"","zakra_menu_active_style":"","zakra_page_header":true,"om_disable_all_campaigns":false,"footnotes":""},"class_list":["post-5630","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/swatilathia.com\/index.php?rest_route=\/wp\/v2\/pages\/5630","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/swatilathia.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/swatilathia.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/swatilathia.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/swatilathia.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5630"}],"version-history":[{"count":3,"href":"https:\/\/swatilathia.com\/index.php?rest_route=\/wp\/v2\/pages\/5630\/revisions"}],"predecessor-version":[{"id":5633,"href":"https:\/\/swatilathia.com\/index.php?rest_route=\/wp\/v2\/pages\/5630\/revisions\/5633"}],"wp:attachment":[{"href":"https:\/\/swatilathia.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5630"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}