Link Bootstrap to your React JS application.

Once you have already installed the Bootstrap using npm command do the below to include the Bootstrap in your React app


index.js

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

App.js (to test)

<button type="button" className="btn btn-primary">Primary</button>

The entire App.js will something like this

import React, { Component } from 'react'; 

class App extends Component { 

 render() { 
 return ( 
 <div> 
 <button type="button" className="btn btn-primary">Primary</button> 
 </div> );
 } 
} 
export default App;

Install old version of Bootstrap using npm

Go to your project folder and execute the below command 

npm install bootstrap@3.3.5 --save

This will install the bootstrap version 3.3.5 and save the entry in your package.json

D3 tooltips - show tooltip in a different location

Sometimes you need to manually specify a target to act on. For instance, maybe you want the tooltip to appear over a different element than the one that triggered a mouseover event. You can specify an explicit target by passing an SVGElement as the last argument.

tip.show(data, target)

Check working example here 

The API for the above code is found here under Explicit targets

Bootstrap 4 to Bulma conversion table

Bootstrap 4 class	Bulma class
.rows	.columns
.col	.column

Bulma - How to make text unselectable

Requirement: I want to restrict users selecting text in my website. How do I do this using Bulma

Use the class

.is-unselectable

See the Pen Bulma - make text unselectable by Kiran (@kiranvj) on CodePen.

Malayalam matrix screen

മലയാളം മാട്രിക്സ്

See the Pen Malayalam Matrix by Kiran (@kiranvj) on CodePen.

Bulma - left or right align an element

How to left or right align an element in Bulma

Use class .is-pulled-left to left align an element.

Use class .is-pulled-right to right align an element.

See the Pen Bulma - pull an element to right by Kiran (@kiranvj) on CodePen.

Bootstrap - show text in a single link

To show text in a single line you need to added the Bootstrap class "text-nowrap"

Example

<span class="nowrap">Your text here.</span>