Tag: bootstrap

CSS: Bootstrap Panel

In this tutorial I will show you how how to use bootstrap with React/Node to make a panel using just bootstrap.

You will need bootstrap and jquery.

npm install bootstrap@3.3.7 --save
npm install jquery@3.2.1 --save
npm install file-loader --save
npm install url-loader --save

You will also need to update webpack.config.js and add the following under “loaders”.

{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader" },
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml" }

Next you need to require bootstrap and jQuery.

window.jQuery = window.$ = require("jquery");
require("bootstrap");

You will need to also require the bootstrap css.

require("bootstrap/dist/css/bootstrap.min.css");

The following is all you then need to display a css like panel.

<div className="panel panel-default">
	<div className="panel-heading">
		<h3 className="panel-title">Panel Title</h3>
	</div>
	<div className="panel-body">
		Panel Text
	</div>
</div>

CSS: Bootstrap DropDown From Text Click

In this tutorial I will show you how how to use bootstrap with React/Node to make a dropdown from a text or image on click using just bootstrap.

You will need bootstrap and jquery.

npm install bootstrap@3.3.7 --save
npm install jquery@3.2.1 --save
npm install file-loader --save
npm install url-loader --save

You will also need to update webpack.config.js and add the following under “loaders”.

{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader" },
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml" }

Next you need to require bootstrap and jQuery.

window.jQuery = window.$ = require("jquery");
require("bootstrap");

You will need to also require the bootstrap css.

require("bootstrap/dist/css/bootstrap.min.css");

The following is all you then need to display a css like dropdown.

<div className="btn-group" >
	<a className="btn btn-primary dropdown-toggle"  data-toggle="dropdown" href="#">testHeading</a>
	<ul className="dropdown-menu">
		<li>My Value</li>
	</ul>
</div>