Posts

Showing posts with the label bootstrap

Bootstrap Center charts in bootstrap panel

Bootstrap Center charts in bootstrap panel To center charts in bootstrap panel, add "style=text-align:center" to the div element of the panel-body. Below is the code snippet: <div class="row" style="padding-top:10px"> <div class="col-md-4"> <div class="panel panel-primary"> <div class="panel-heading">C3 Gauge</div> <div class="panel-body" style="text-align:center"> <div id="chtGaugeC3"></div> </div> </div> </div> <div class="col-md-4"> <div class="panel panel-primary"> <div class="panel-heading">D3 Gauge</div> <div class="panel-body" style="text-align:center"> <div id="chtGaugeD3"></div> </div> </div> </div> <div class="col-md-4"> <div class="panel panel-primary"...

Bootstrap and Two way binding with Angular2

Image
Bootstrap and Two way binding with Angular2 In my previous post, we had examined event and property binding in Angular 2, along with setting up angular from scratch. In this post, we will add bootstrap 4 to our Angular2 environment, and then test a component to see some of the capabilities of the library.  We will also examine two way binding using the bootstrap components.. Creating a new project Since we already installed angular-cli in the previous blog, lets create a new project called ng2-2 using "ng new" command. Let us also cd into the newly created project directory.. ng new ng2-2 cd ng2-2 This creates the new project. Installing bootstrap First step is to install bootstrap. We will install angular2 compliant bootstrap version called ng2-bootstrap. ng2-bootstrap utilizes the new Angular2 concepts to provide a Typescript based bootstrap library. Importantly it does not directly access the DOM. This step requires the following commands to be run from within the ng2 ...

Bootstrap Display a map in a tab page within a tab control

Bootstrap Display a map in a tab page within a tab control Recently i was working with bootstrap and i needed to display a map within a tab page of a tab control. The task look simple enough, below is the html and javascript codes: <html> <head> <link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="./css/bootstrap.additional.css" rel="stylesheet" type="text/css" /> <script src="./jslib/jquery-1.8.3.min.js"></script> <script src="./jslib/bootstrap.min.js"></script> <script src="./jslib/OpenLayers.js"></script> <script> $(function(){ $("#tabs").tab(); var lat = 1.3000; var lon = 103.8000; updateMap("myMap", lon, lat); }); function updateMap(mapElementId, lon, lat) { var layer = new OpenLayers.Layer.OSM(); map = new OpenLayers.Map(mapElementId); map.addLayer(layer); var epsg43...

Bootstrap Display a network graph within a tab page of a tab control

Bootstrap Display a network graph within a tab page of a tab control Recently I was working with bootstrap and needed to display a network graph within a bootstrap tab control. I decided to use vis.js which is easy to use for creating a graph network. Initially the problem looked simple as all that i need to do is to create tab control using bootstrap and create a graph network in one of its tab pages. Below is the original implementation: <html> <head> <link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="./css/bootstrap.additional.css" rel="stylesheet" type="text/css" /> <link href="./css/vis.css" rel="stylesheet" type="text/css"> <script src="./jslib/jquery-1.8.3.min.js"></script> <script src="./jslib/bootstrap.min.js"></script> <script src="./jslib/vis.js"></script> ...