Archive
Bootstrap – Table style classes
If you are new to Bootstrap, refer my previous article to get started with Bootstrap
In this article, lets see how to apply styles to table control.
Lets add a table, with 4 rows with no custom styling and it would render as below.
HTML table with no custom styling
Now lets see, how quickly we can apply Bootstrap styling and make the table responsive and vibrant.
Table with Responsive UI
In the above screen, browser has shrunk to fit to tablet dimensions but still the table has’t distorted which makes it responsive.
Below is the table script to achieve above styling
<div class=”container”>
<div class=”table-responsive”>
<table class=”table table-striped table-bordered table-hover“>
🙂
Bootstrap – Popover
If you are new to Bootstrap, refer my previous article to get started with Bootstrap
In this article, lets see how to get Popover notifications in <table> control.
Bootstrap, displays popover notifications using “popper.min.js” file, which comes with Bootstrap ‘Starter Template’.
To create a popover (Popup) message, add the data-toggle=”popover” attribute to the HTML element.
- ‘title’ attribute to specify the header text of the popover
- ‘data-content’ attribute to specify the text that should be displayed inside the popover’s body
Sample HTML:
Below is my <td> tag of my ‘Name’ column of the table row with data-toggle=”popover”
<td>
<a href=”#” data-toggle=”popover” title=”About” data-content=”Rajeev Pentyala is from India”>Rajeev Pentyala</a>
</td>
In the tag, add below content:
$(document).ready(function () {
$(‘[data-toggle=”popover”]’).popover();
});
Add data-toggle=”popover” to all your ‘Name’ columns and the output will come as below:
🙂
Bootstrap – Getting started
In this series, I am going to touch base Bootstrap fundamentals and controls. Lets see how to get started with Bootstrap.
What is Bootstrap?
- Bootstrap is is the most popular CSS (Cascading Style Sheet) Framework for developing responsive and mobile-first websites.
- Bootstrap framework provides helper css and js files, with which can make your website/web application vibrant and responsive with no additional effort.
Bootstrap – Responsive UI
What is ‘Responsive’ UI:
- Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones).
- With Bootstrap framework you can make you web pages responsive and fit for all devices.
Below are the steps to use Bootstrap in a sample HTML page
Download the Bootstrap framework:
- Download the Bootstrap components (i.e., CSS and JS files) from here
- Note: Instead of downloading the files locally, you can also refer CDN files. Refer this link
Download components locally
- In this article I am downloading the components locally and use it in HTML file.
- Once you download and unzip, you would notice 2 folders css and js
Get start with a sample HTML page:
Once you download the Bootstrap components below are the steps to use Bootstrap in HTML file.
I am using Visual Studio as my code editor, you can also use the editors you are comfortable with.
- Create a new “Asp.Net Empty Website”
- Create a new folder “Bootstrap” and place the css and js folders of Bootstrap downloaded in prior section.
- Copy the HTML content from Starter Template of Bootstrap and paste it in your HTML file.
Bootstrap – Start Template
- You would notice the Bootstrap css and js files CDN’s references.
- Note: CDN references will not work if your machine not connected to Internet.
- Replace CDN references with local file references, since we already downloaded the Bootstrap files locally and added to Visual Studio.
Replace CDN with local references
- With out making any further changes, run the HTML page and you would notice the output as below.
Without Bootstrap
- You would not find any difference as the HTML page rendered normally, to make the HTML page with Bootstrap styling make sure you follow next step.
- The key point here is, Bootstrap styles will take affect only if you wrap your HTML tags inside a <div> with class name “container”
- ‘container’ is the Bootstrap css class name.
- Lets move <h1> tag inside <div class=”container”> and run the HTML page, which renders as below with more vibrant.
With Bootsrap
Notes:
- Bootstrap requires jQuery, hence jQuery file CDN reference comes with Bootstrap ‘Starter Template’
- You would also get “popper.min.js” in the Bootstrap ‘Starter Template’, which is useful to show pop over notifications.
In the followup articles, we will see the Bootstrap styling of different controls.
🙂
Rajeev Pentyala - Microsoft Power Platform 