Archive

Archive for January 14, 2019

Bootstrap – Table style classes

January 14, 2019 Leave a comment

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.

bs_tbl4

HTML table with no custom styling

Now lets see, how quickly we can apply Bootstrap styling and make the table responsive and vibrant.

bs_tbl2

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“>

🙂

Categories: Bootstrap Tags: ,

Bootstrap – Popover

January 14, 2019 Leave a comment

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:

bs_pop1

🙂

Bootstrap – Getting started

January 14, 2019 2 comments

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.
bs_intro

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
bs_1

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

bs_2

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.

bs_3

  • Copy the HTML content from Starter Template of Bootstrap and paste it in your HTML file.
bs_4

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.
bs_5

Replace CDN with local references

  • With out making any further changes, run the HTML page and you would notice the output as below.
bs_6

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.

bs_8

  • Lets move <h1> tag inside <div class=”container”> and run the HTML page, which renders as below with more vibrant.
bs_7

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.

🙂

Categories: Bootstrap Tags: , ,