{"id":73,"date":"2023-12-23T14:10:06","date_gmt":"2023-12-23T14:10:06","guid":{"rendered":"https:\/\/www.xopsschool.com\/tutorials\/?p=73"},"modified":"2024-02-29T18:17:10","modified_gmt":"2024-02-29T18:17:10","slug":"bootstrap-tables","status":"publish","type":"post","link":"https:\/\/www.xopsschool.com\/tutorials\/bootstrap-tables\/","title":{"rendered":"Bootstrap\u00a0Tables"},"content":{"rendered":"\n

Bootstrap table<\/strong> is a way to make your tables on a website look good and work better. Bootstrap is a set of tools that helps you style and improve the functionality of HTML tables easily.<\/p>\n\n\n\n

So, if you want a nice-looking table on your website without spending a lot of time on design, you can use Bootstrap. It makes your tables look professional and adds useful features to them.<\/p>\n\n\n\n

Bootstrap Code<\/strong> :-
<div class=”container”>
<h2>Basic Table<\/h2>
<p>The .table class adds basic styling to a table<\/p>
<table class=”table”>
<thead>
<tr>
<th>Firstname<\/th>
<th>Lastname<\/th>
<th>Email<\/th>
<\/tr>
<\/thead>
<tbody>
<tr>
<td>John<\/td>
<td>Doe<\/td>
<td>john@example.com<\/td>
<\/tr>
<tr>
<td>Mary<\/td>
<td>Moe<\/td>
<td>mary@example.com<\/td>
<\/tr>
<tr>
<td>July<\/td>
<td>Dooley<\/td>
<td>july@example.com<\/td>
<\/tr>
<\/tbody>
<\/table>
<\/div><\/p>\n\n\n\n

OUTPUT<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Bootstrap\u00a0Images<\/h2>\n\n\n\n
Circle:-  Code \r\n<img src=\"cinqueterre.jpg\" class=\"img-circle\" alt=\"Cinque Terre\" width=\"304\" height=\"236\"> \r\nThumbnail<\/strong><\/code><\/pre>\n\n\n\n
code:-<\/strong><\/p>\n\n\n\n
The .img-thumbnail class shapes the image to a thumbnail:<\/p>\n\n\n\n
<img src=\"cinqueterre.jpg\" class=\"img-thumbnail\" alt=\"Cinque Terre\" width=\"304\" \nheight=\"236\"><\/code><\/pre>\n\n\n\n
Image Gallery<\/h2>\n\n\n\n
<div class=\"container\">\r\n  <h2>Image Gallery<\/h2>\r\n  <p>The .thumbnail class can be used to display an image gallery.<\/p>\r\n  <p>The .caption class adds proper padding and a dark grey color to text inside thumbnails.<\/p>\r\n  <p>Click on the images to enlarge them.<\/p>\r\n  <div class=\"row\">\r\n    <div class=\"col-md-4\">\r\n      <div class=\"thumbnail\">\r\n        <a href=\"\/w3images\/lights.jpg\" target=\"_blank\">\r\n          <img src=\"\/w3images\/lights.jpg\" alt=\"Lights\" style=\"width:100%\">\r\n          <div class=\"caption\">\r\n            <p>Lorem ipsum donec id elit non mi porta gravida at eget metus.<\/p>\r\n          <\/div>\r\n        <\/a>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"col-md-4\">\r\n      <div class=\"thumbnail\">\r\n        <a href=\"\/w3images\/nature.jpg\" target=\"_blank\">\r\n          <img src=\"\/w3images\/nature.jpg\" alt=\"Nature\" style=\"width:100%\">\r\n          <div class=\"caption\">\r\n            <p>Lorem ipsum donec id elit non mi porta gravida at eget metus.<\/p>\r\n          <\/div>\r\n        <\/a>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"col-md-4\">\r\n      <div class=\"thumbnail\">\r\n        <a href=\"\/w3images\/fjords.jpg\" target=\"_blank\">\r\n          <img src=\"\/w3images\/fjords.jpg\" alt=\"Fjords\" style=\"width:100%\">\r\n          <div class=\"caption\">\r\n            <p>Lorem ipsum donec id elit non mi porta gravida at eget metus.<\/p>\r\n          <\/div><\/code><\/pre>\n\n\n\n
Bootstrap Jumbotron and Page Header<\/h2>\n\n\n\n
Creating a Jumbotron<\/h2>\n\n\n\n
A jumbotron indicates a big box for calling extra attention to some special content or information.
A jumbotron is displayed as a grey box with rounded corners. It also enlarges the font sizes of the text inside it.
Tip: Inside a jumbotron you can put nearly any valid HTML, including other Bootstrap elements\/classes.
Use a<\/p>\n\n\n\n
element with class .jumbotron to create a jumbotron:<\/p>\n\n\n\n
Jumbotron Inside Container<\/h2>\n\n\n\n
Place the jumbotron inside the<\/p>\n\n\n\n
if you want the jumbotron to NOT extend to the edge of the screen<\/p>\n\n\n\n
Code<\/h2>\n\n\n\n
<div class=\"container\">\n  <div class=\"jumbotron\">\n    <h1>Bootstrap Tutorial<\/h1>      \n    <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.<\/p>\n  <\/div>\n  <p>This is some text.<\/p>      \n  <p>This is another text.<\/p>      \n<\/div><\/code><\/pre>\n\n\n\n
Jumbotron Outside Container<\/h2>\n\n\n\n
Place the jumbotron outside the<\/p>\n\n\n\n
if you want the jumbotron to extend to the screen edges:<\/p>\n\n\n\n
Code<\/h2>\n\n\n\n
<div class=\"jumbotron\">\r\n<h1>Bootstrap Tutorial<\/h1>\n<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.<\/p>\n<\/div>\n<div>\n<div class=\"container\">\r\n  <p>This is some text.<\/p>      \r\n  <p>This is another text.<\/p>      \r<\/code><\/pre>\n\n\n\n
Creating a Page Header<\/h2>\n\n\n\n
A page header is like a section divider.<\/p>\n\n\n\n
The .page-header class adds a horizontal line under the heading (+ adds some extra space around the element.<\/p>\n\n\n\n
Use a <div> element with class .page-header to create a page header:<\/p>\n\n\n\n
Example<\/h2>\n\n\n\n
\n<div class=\"container\">\r\n  <div class=\"page-header\">\r\n    <h1>Example Page Header<\/h1> \n<\/div>\n<div>\n<p>This is some text.<\/p>      \r\n  <p>This is another text.<\/p> \n         <\/code><\/pre>\n\n\n\n
Bootstrap Wells<\/h2>\n\n\n\n
The .well class adds a rounded border around an element with a gray background color and some padding:<\/p>\n\n\n\n
CODE<\/strong><\/p>\n\n\n\n
<div class=\"container\">\r\n  <h2>Well<\/h2>\r\n  <div class=\"well\">Basic Well<\/div>\r\n<\/div>\r<\/code><\/pre>\n\n\n\n
Well Size<\/h2>\n\n\n\n
Change the size of the well by adding the\u00a0.well-sm<\/code>\u00a0class for small wells or\u00a0\u00a0.well-lg<\/code>\u00a0class for large wells.<\/p>\n\n\n\n
CODE<\/strong><\/p>\n\n\n\n
<div class=\"container\">\r\n  <h2>Well Size<\/h2>\r\n  <div class=\"well well-sm\">Small Well<\/div>\r\n  <div class=\"well\">Normal Well<\/div>\r\n  <div class=\"well well-lg\">Large Well<\/div>\r\n<\/div><\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Bootstrap\u00a0Alerts<\/h2>\n\n\n\n
Bootstrap provides an easy way to create predefined alert messages<\/p>\n\n\n\n
<div class=\"alert alert-success\">\r\n  <strong>Success!<\/strong> Indicates a successful or positive action.\r\n<\/div>\r\n\r\n<div class=\"alert alert-info\">\r\n  <strong>Info!<\/strong> Indicates a neutral informative change or action.\r\n<\/div>\r\n\r\n<div class=\"alert alert-warning\">\r\n  <strong>Warning!<\/strong> Indicates a warning that might need attention.\r\n<\/div>\r\n\r\n<div class=\"alert alert-danger\">\r\n  <strong>Danger!<\/strong> Indicates a dangerous or potentially negative action.\r\n<\/div>\n<\/code><\/pre>\n\n\n\n
Alert Links<\/h2>\n\n\n\n
Add the\u00a0alert-link<\/code>\u00a0class to any links inside the alert box to create “matching colored links”<\/p>\n\n\n\n
Code Explain:-<\/strong><\/p>\n\n\n\n
<div class=\"alert alert-success\">\r\n  <strong>Success!<\/strong> You should <a href=\"#\" class=\"alert-link\">read this message<\/a>.\r\n<\/div>\nOUTPUT<\/strong>\n<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Closing Alerts<\/h2>\n\n\n\n
To close the alert message, add a\u00a0.alert-dismissible<\/code>\u00a0class to the alert container. Then add\u00a0class=\"close\"<\/code>\u00a0and\u00a0data-dismiss=\"alert\"<\/code>\u00a0to a link or a button element (when you click on this the alert box will disappear)<\/p>\n\n\n\n
CODE<\/strong><\/p>\n\n\n\n
<div class=\"alert alert-success alert-dismissible\">\r\n  <a href=\"#\" class=\"close\" data-dismiss=\"alert\" aria-label=\"close\">&times;<\/a>\r\n  <strong>Success!<\/strong> Indicates a successful or positive action.\r\n<\/div><\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Animated Alerts<\/h2>\n\n\n\n
he\u00a0.fade<\/code>\u00a0and\u00a0.in<\/code>\u00a0classes adds a fading effect when closing the alert message<\/p>\n\n\n\n
Code<\/h2>\n\n\n\n
<div\u00a0class=”alert alert-danger fade in”><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Bootstrap\u00a0Buttons<\/h2>\n\n\n\n
Bootstrap provides different styles of buttons<\/p>\n\n\n\n
To achieve the button styles above, Bootstrap has the following classes<\/p>\n\n\n\n