bootstrap 4 Archives - Codeplaners https://codeplaners.com/tag/bootstrap-4/ Code Solution Fri, 09 Jul 2021 05:50:41 +0000 en-US hourly 1 https://wordpress.org/?v=6.1.7 https://codeplaners.com/wp-content/uploads/2020/09/cropped-favicon-social-32x32.png bootstrap 4 Archives - Codeplaners https://codeplaners.com/tag/bootstrap-4/ 32 32 Bootstrap 4 Select DropDown With Validation Example https://codeplaners.com/bootstrap-4-select-dropdown-with-validation-example/ https://codeplaners.com/bootstrap-4-select-dropdown-with-validation-example/#respond Fri, 09 Jul 2021 00:32:44 +0000 https://codeplaners.com/?p=1069 Today, i we will show you bootstrap 4 select dropDown with validation example. This article will give you simple example of bootstrap 4 select dropDown with validation example. you will learn bootstrap 4 select dropDown with validation example. So let’s follow few step to create example of bootstrap 4 select dropDown with validation example. Example

The post Bootstrap 4 Select DropDown With Validation Example appeared first on Codeplaners.

]]> Today, i we will show you bootstrap 4 select dropDown with validation example. This article will give you simple example of bootstrap 4 select dropDown with validation example. you will learn bootstrap 4 select dropDown with validation example. So let’s follow few step to create example of bootstrap 4 select dropDown with validation example.

Bootstrap 4 Select DropDown With Validation Example

Example

<html>
<head>
    <title>Bootstrap 4 Select DropDown With Validation Example - codeplaners</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2-bootstrap.min.css" />
<body>

<div class="continer">
    <div class="row mt-5 pt-5">
        <div class="col-md-5 text-center offset-md-3 mt-5 pt-5">
            <form id="select2Form" method="post" class="form-horizontal">
                <label><h3>Choose color</h3></label>
                <select name="colors" class="form-control select2-select" multiple data-placeholder="Choose 2-4 colors">
                    <option value="black">Black</option>
                    <option value="blue">Blue</option>
                    <option value="green">Green</option>
                    <option value="orange">Orange</option>
                    <option value="red">Red</option>
                    <option value="yellow">Yellow</option>
                    <option value="white">White</option>
                </select>
                <div class="form-group mt-3">
                    <button type="submit" class="btn btn-success">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>    
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2.min.js"></script>
<script src="https://oss.maxcdn.com/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.min.js"></script>

<script>
$(document).ready(function() {
    $('#select2Form')
        .find('[name="colors"]')
            .select2()
            // Revalidate the color when it is changed
            .change(function(e) {
                $('#select2Form').bootstrapValidator('revalidateField', 'colors');
            })
            .end()
        .find('[name="colors-tags"]')
            .select2({
                // Specify tags
                tags: ['Black', 'Blue', 'Green', 'Orange', 'Red', 'Yellow', 'White']
            })
            // Revalidate the color when it is changed
            .change(function(e) {
                $('#select2Form').bootstrapValidator('revalidateField', 'colors-tags');
            })
            .end()
        .bootstrapValidator({
            excluded: ':disabled',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                colors: {
                    validators: {
                        callback: {
                            message: 'Please choose 2-4 color you like most',
                            callback: function(value, validator) {
                                // Get the selected options
                                var options = validator.getFieldElements('colors').val();
                                return (options != null && options.length >= 2 && options.length <= 4);
                            }
                        }
                    }
                },
                'colors-tags': {
                    validators: {
                        callback: {
                            message: 'Please choose 2-4 color you like most',
                            callback: function(value, validator) {
                                // Get the selected options
                                var options  = validator.getFieldElements('colors-tags').val(),
                                    options2 = options.split(',');

                                return (options2 !== null && options2.length >= 2 && options2.length <= 4);
                            }
                        }
                    }
                }
            }
        });
});
</script>
</html>

The post Bootstrap 4 Select DropDown With Validation Example appeared first on Codeplaners.

]]> https://codeplaners.com/bootstrap-4-select-dropdown-with-validation-example/feed/ 0 Bootstrap drag and drop using jquery UI sortable https://codeplaners.com/bootstrap-drag-and-drop-using-jquery-ui-sortable/ https://codeplaners.com/bootstrap-drag-and-drop-using-jquery-ui-sortable/#respond Wed, 23 Jun 2021 00:17:59 +0000 https://codeplaners.com/?p=1018 Hi Dev, Today, i we will show you Bootstrap drag and drop using jquery UI sortable. This article will give you simple example of Bootstrap drag and drop using jquery UI sortable. you will learn Bootstrap drag and drop using jquery UI sortable. So let’s follow few step to create example of Bootstrap drag and … Continue reading "Bootstrap drag and drop using jquery UI sortable"

The post Bootstrap drag and drop using jquery UI sortable appeared first on Codeplaners.

]]> Hi Dev,

Today, i we will show you Bootstrap drag and drop using jquery UI sortable. This article will give you simple example of Bootstrap drag and drop using jquery UI sortable. you will learn Bootstrap drag and drop using jquery UI sortable. So let’s follow few step to create example of Bootstrap drag and drop using jquery UI sortable.

Preview:
Bootstrap drag and drop using jquery UI sortable

Example

<!DOCTYPE html>
<html>
<title>Bootstrap Sort list by drag and drop using jquery UI sortable - Codeplaners.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
    $(function() {
        $("#sortable").sortable();
        $("#sortable").disableSelection();
    });
</script>

<body>

<div class="page-content page-container" id="page-content">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="container-fluid d-flex justify-content-center">
                    <div class="list list-row card" id="sortable" data-sortable-id="0" aria-dropeffect="move">
                        <div class="list-item" data-id="13" data-item-sortable-id="0" draggable="true" role="option" aria-grabbed="false" style="">
                            <div><a href="#" data-abc="true"><span class="w-40 avatar gd-primary">C</span></a></div>
                            <div class="flex"> <a href="#" class="item-author text-color" data-abc="true">Patrick Linod</a>
                                <div class="item-except text-muted text-sm h-1x">For what reason would it be advisable for me to think about business content?</div>
                            </div>
                            <div class="no-wrap">
                                <div class="item-date text-muted text-sm d-none d-md-block">1 weeks ago</div>
                            </div>
                        </div>
                        <div class="list-item" data-id="9" data-item-sortable-id="0" draggable="true" role="option" aria-grabbed="false">
                            <div><a href="#" data-abc="true"><span class="w-40 avatar gd-info"><img src="https://codeplaners.com/wp-content/uploads/2020/09/cropped-favicon-social-192x192.png" alt="."></span></a></div>
                            <div class="flex"> <a href="#" class="item-author text-color" data-abc="true">Steven Hmpire</a>
                                <div class="item-except text-muted text-sm h-1x">Build a progressive web app using jQuery</div>
                            </div>
                            <div class="no-wrap">
                                <div class="item-date text-muted text-sm d-none d-md-block">10 days ago</div>
                            </div>
                        </div>
                        <div class="list-item" data-id="17" data-item-sortable-id="0" draggable="true" role="option" aria-grabbed="false" style="">
                            <div><a href="#" data-abc="true"><span class="w-40 avatar gd-warning">M</span></a></div>
                            <div class="flex"> <a href="#" class="item-author text-color" data-abc="true">Alan musk</a>
                                <div class="item-except text-muted text-sm h-1x">it be advisable for me to think about business content?</div>
                            </div>
                            <div class="no-wrap">
                                <div class="item-date text-muted text-sm d-none d-md-block">13/12 18</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
body {
     background-color: #f9f9fa
}
.card {
     background: #faf7f7;
     border-width: 0;
     border-radius: .25rem;
     box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
     margin-bottom: 1.5rem;
	 margin: 50px 0 0;
     position: relative;
     display: flex;
     flex-direction: column;
     min-width: 0;
     word-wrap: break-word;
     background-clip: border-box;
     border: 1px solid rgba(19, 24, 44, .125);
     border-radius: .25rem
}
.list-item.block .media {
 border-bottom-left-radius: 0;
 border-bottom-right-radius: 0
}
.list-item.block .list-content {
 padding: 1rem
}

.w-40 {
 width: 40px !important;
 height: 40px !important
}
.avatar {
	 position: relative;
	 line-height: 1;
	 border-radius: 500px;
	 white-space: nowrap;
	 font-weight: 700;
	 border-radius: 100%;
	 display: -ms-flexbox;
	 display: flex;
	 -ms-flex-pack: center;
	 justify-content: center;
	 -ms-flex-align: center;
	 align-items: center;
	 -ms-flex-negative: 0;
	 flex-shrink: 0;
	 border-radius: 500px;
	 box-shadow: 0 5px 10px 0 rgba(50, 50, 50, .15)
}

.avatar img {
	 border-radius: inherit;
	 width: 100%
}
.gd-primary {
	 color: #fff;
	 border: none;
	 background: #448bff linear-gradient(45deg, #448bff, #44e9ff)
}
.flex {
	 -webkit-box-flex: 1;
	 -ms-flex: 1 1 auto;
	 flex: 1 1 auto
}
.text-color {
 	color: #5e676f
}

.text-sm {
 	font-size: .825rem
}
.h-1x {
	 height: 1.25rem;
	 overflow: hidden;
	 display: -webkit-box;
	 -webkit-line-clamp: 1;
	 -webkit-box-orient: vertical
}

.no-wrap {
 	white-space: nowrap
}

.list-row .list-item {
	 -ms-flex-direction: row;
	 flex-direction: row;
	 -ms-flex-align: center;
	 align-items: center;
	 padding: .75rem .625rem
}

.list-item {
	 position: relative;
	 display: -ms-flexbox;
	 display: flex;
	 -ms-flex-direction: column;
	 flex-direction: column;
	 min-width: 0;
	 word-wrap: break-word
}
.list-row .list-item>* {
 padding-left: .625rem;
 padding-right: .625rem
}
a:focus,
a:hover {
 text-decoration: none
}
list-item {
 background: white
}
</style>


</body>
</html>

The post Bootstrap drag and drop using jquery UI sortable appeared first on Codeplaners.

]]> https://codeplaners.com/bootstrap-drag-and-drop-using-jquery-ui-sortable/feed/ 0 Datepicker Disable Saturday Sunday in Bootstrap https://codeplaners.com/datepicker-disable-saturday-sunday-in-bootstrap/ https://codeplaners.com/datepicker-disable-saturday-sunday-in-bootstrap/#respond Tue, 18 May 2021 23:47:30 +0000 https://codeplaners.com/?p=756 Hi, Today, i we will show you datepicker disable saturday sunday in bootstrap. This article will give you simple example of datepicker disable saturday sunday in bootstrap. you will learn datepicker disable saturday sunday in bootstrap. So let’s follow few step to create example of datepicker disable saturday sunday in bootstrap. <!DOCTYPE html> <html> <head> … Continue reading "Datepicker Disable Saturday Sunday in Bootstrap"

The post Datepicker Disable Saturday Sunday in Bootstrap appeared first on Codeplaners.

]]> Hi,

Today, i we will show you datepicker disable saturday sunday in bootstrap. This article will give you simple example of datepicker disable saturday sunday in bootstrap. you will learn datepicker disable saturday sunday in bootstrap. So let’s follow few step to create example of datepicker disable saturday sunday in bootstrap.

Datepicker Disable Saturday Sunday in Bootstrap

<!DOCTYPE html>
<html>
<head>
    <title>Datepicker Disable Saturday Sunday in Bootstrap - codeplaners.com</title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css">
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
   
<div class="container">
    <h1>Datepicker Disable Saturday Sunday in Bootstrap</h1>
    <input type="text" name="date" class="form-control datepicker" autocomplete="off">
</div>
  
</body>
   
<script type="text/javascript">
    $('.datepicker').datepicker({
        daysOfWeekDisabled: [0,6]
    });
</script>
</html>

The post Datepicker Disable Saturday Sunday in Bootstrap appeared first on Codeplaners.

]]> https://codeplaners.com/datepicker-disable-saturday-sunday-in-bootstrap/feed/ 0 How to scroll back to top in bootstrap https://codeplaners.com/how-to-scroll-back-to-top-in-bootstrap/ https://codeplaners.com/how-to-scroll-back-to-top-in-bootstrap/#respond Mon, 19 Apr 2021 09:33:44 +0000 https://codeplaners.com/?p=591 In this article, we will show you How to scroll back to top in bootstrap. This article will give you simple example of How to scroll back to top in bootstrap. you will learn How to scroll back to top in bootstrap. <!DOCTYPE html> <html> <head> <title>How to scroll back to top in bootstrap</title> <link … Continue reading "How to scroll back to top in bootstrap"

The post How to scroll back to top in bootstrap appeared first on Codeplaners.

]]> In this article, we will show you How to scroll back to top in bootstrap. This article will give you simple example of How to scroll back to top in bootstrap. you will learn How to scroll back to top in bootstrap.

<!DOCTYPE html>
<html>
<head>
    <title>How to scroll back to top in bootstrap</title>

    
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>

<style>
.back_to_top {
    position: fixed;
    bottom: 25px;
    right: 25px;
    display: none;
}
</style>
</head>
<body>

<a id="back-to-top" href="#" class="btn btn-light btn-lg back_to_top" role="button"><i class="fas fa-chevron-up"></i></a>
<script>
$(document).ready(function(){
	$(window).scroll(function () {
			if ($(this).scrollTop() > 50) {
				$('#back-to-top').fadeIn();
			} else {
				$('#back-to-top').fadeOut();
			}
		});
		// scroll body to 0px on click
		$('#back-to-top').click(function () {
			$('body,html').animate({
				scrollTop: 0
			}, 400);
			return false;
		});
});
</script>


</body>
</html>

The post How to scroll back to top in bootstrap appeared first on Codeplaners.

]]> https://codeplaners.com/how-to-scroll-back-to-top-in-bootstrap/feed/ 0 How to create react bootstrap slider https://codeplaners.com/how-to-create-react-bootstrap-slider/ https://codeplaners.com/how-to-create-react-bootstrap-slider/#respond Wed, 21 Oct 2020 07:00:36 +0000 http://localhost/codeplaners/?p=313 Interoduction The Build React App was used to bootstrap this project. It was then ejected because of a problem with jQuery (see below). A ReactJS wrapper with Bootstrap for the Seiyria Bootstrap Slider part. Start with version 3.0.0, we only support Bootstrap 4. If you are still using Bootstrap 3, please use version 2.2.3. How … Continue reading "How to create react bootstrap slider"

The post How to create react bootstrap slider appeared first on Codeplaners.

]]> Interoduction

The Build React App was used to bootstrap this project. It was then ejected because of a problem with jQuery (see below).

A ReactJS wrapper with Bootstrap for the Seiyria Bootstrap Slider part. Start with version 3.0.0, we only support Bootstrap 4. If you are still using Bootstrap 3, please use version 2.2.3.

How to install

Install from npm with:

npm install --save react-bootstrap-slider

or

yarn add react-bootstrap-slider

Import like so for ES6:

import ReactBootstrapSlider from 'react-bootstrap-slider';

The control is implemented in the UMD format, so AMD / RequireJS should also function, but I haven’t checked it.

Peer Dependencies

For react-bootstrap-slider, React, React Dom, and Bootstrap are classified as peer dependencies (peerDependencies section of package.json). When you install this component in your own project, it won’t be automatically installed. If you have not already done so, you will need to install them yourself, as part of that project. If you do not include them yet, this command will install them for you:

npm install react react-dom prop-types bootstrap@^4 --save

or

yarn add react react-dom prop-types bootstrap@^4

jQuery

If it detects it in your project configuration, the bootstrap-slider part-and thus, react-bootstrap-slider-will work with jQuery, but it isn’t a necessity. Without jQuery, it worked great. However, if you are using Webpack or Browserify to create your project, if jQuery is not present, you can get a “missing dependency” create error. This is a known upstream bootstrap-slider problem. See How do I remove the JQuery optional dependency from my build? Readme f on the Bootstrap Slider’s on the Bootstrap Slider on how this problem can be worked around. By reviewing the /examples / config / webpack.config.js file and searching for ‘jQuery, you can also see how I did it.

You also need to make sure you have included the CSS file of the bootstrap-slider in your build, otherwise the control will be null! Of course, you’ll also need Bootstrap’s own CSS file as well. If you are using Webpack, which you would be if you have a project based on Create React App, then you can directly import the CSS file into your build, like this:

import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-slider/dist/css/bootstrap-slider.css"

Those two imports need to be in your top-level JavaScript file, e.g. App.js.

Or you can simply add the files as links in your HTML file as a link e.g.:

<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/bootstrap-slider.min.js"></script>

Checking that the versions match those of Bootstrap and Bootstrap Slider themselves.

How to create react-bootstrap-slider

Here’s an example of how you might call it in your ReactJS’s render method:

<ReactBootstrapSlider
    value={this.state.currentValue}
    change={this.changeValue}
    slideStop={this.changeValue}
    step={this.state.step}
    max={this.state.max}
    min={this.state.min}
    orientation="vertical"
    reversed={true}
    disabled="disabled" />

The value, step, max, and min parameters should be self-explanatory. The change event is the callback method that will be called when the slider actually changes. (NB: this is the change event for the Bootstrap slider.) As of version 1.1.2, there is a new slideStop event, which only triggers when you’ve finished moving the slider (i.e. you release it). This makes slideStop a deal less “chatty” than the change event. Decide which one you need; you’ll only ever need one or the other (unlike my example code above!).

If the optional parameter disabled is included, and is set to “disabled”, then the slider will display in a disabled state. If the parameter is not included, or is set to anything else except “disabled”, then the slider control will be enabled.

The default orientation value is ‘horizontal’, so you only need to include that prop if you want to set it to ‘vertical’.

If value is a two member array, then the slider will have two handles: minimum and maximum. You should also pass win a range parameter set to true in this case.

As of version 1.0.5, other values passed into the component will also passed into the underlying bootstrap-slider component via the Object Spread Operator that’s been proposed for ES2017 (yes, that’s how cutting edge I am!!). See seyria’s documentation for a full list of these. Those parameters have not all been tested yet but the reversed parameter definitely works, and I have included this in the demo of the vertical slider.

Version 1.0.6 fixed an issue that prevented ticks props from being rendered. Pass in ticks props like so:

ticks = {[0, 100, 200, 300, 400]}
ticks_labels = {["$0", "$100", "$200", "$300", "$400"]}
ticks_snap_bounds = { 30 }

Current Tags

  • 3.0.0                                …           latest (4 months ago)

28 Versions

  • 3.0.0                                …           4 months ago
  • 2.2.3                                …           9 months ago
  • 2.2.2                                …           2 years ago
  • 2.2.1                                …           2 years ago
  • 2.2.0                                …           2 years ago
  • 2.1.5                                …           2 years ago
  • 2.1.4                                …           3 years ago
  • 2.1.3                                …           3 years ago
  • 2.1.2                                …           3 years ago
  • 2.1.1                                …           3 years ago
  • 2.1.0                                …           3 years ago
  • 2.0.1                                …           3 years ago
  • 2.0.0                                …           3 years ago
  • 1.1.7                                …           4 years ago
  • 1.1.6                                …           4 years ago
  • 1.1.5                                …           4 years ago
  • 1.1.4                                …           4 years ago
  • 1.1.3                                …           4 years ago
  • 1.1.2                                …           4 years ago
  • 1.1.1                                …           4 years ago
  • 1.1.0                                …           4 years ago
  • 1.0.6                                …           4 years ago
  • 1.0.5                                …           4 years ago
  • 1.0.4                                …           4 years ago
  • 1.0.3                                …           4 years ago
  • 1.0.2                                …           4 years ago
  • 1.0.1                                …           4 years ago
  • 1.0.0                                …           5 years ago

The post How to create react bootstrap slider appeared first on Codeplaners.

]]> https://codeplaners.com/how-to-create-react-bootstrap-slider/feed/ 0 How to Install Bootstrap 4 https://codeplaners.com/how-to-install-bootstrap-4/ https://codeplaners.com/how-to-install-bootstrap-4/#respond Sat, 03 Oct 2020 07:43:54 +0000 http://localhost/codeplaners/?p=201 This post was last updated on February 14th, 2021 at 04:25 pmBootstrap is most of the popular JS, CSS, and HTML framework that is used and develop mobile-first responsive websites. The popularity of this front-end framework has considerably increased over the last few years because it enables users to create highly-functional and good-looking websites with … Continue reading "How to Install Bootstrap 4"

The post How to Install Bootstrap 4 appeared first on Codeplaners.

]]> This post was last updated on February 14th, 2021 at 04:25 pm

Bootstrap is most of the popular JS, CSS, and HTML framework that is used and develop mobile-first responsive websites. The popularity of this front-end framework has considerably increased over the last few years because it enables users to create highly-functional and good-looking websites with utmost ease. The ones with basic knowledge of CSS and HTML will be able to easily create professional websites by using the Bootstrap.

An updated version of the Bootstrap framework, which is known as Bootstrap 4.2.1 was recently launched. The updated framework comes with a number of new features and bug fixes. You can learn more about the changes in the latest version of the Bootstrap 4 framework by checking out the Bootstrap 3 Vs. Bootstrap 4 What’s new article?

Unfortunately, several users who are new to the world of web designing and Bootstrap 4 framework have no clear idea on how to install this framework. If you are one such a user, then do not worry because we are here to help you.

Just like any other framework, there are plenty of methods available for installing the Bootstrap 4 framework too. Below are a few simple methods that will give you a clear idea on how to install Bootstrap 4 framework.

 Remember Points

We highly recommend you to pay a visit to the official website of Bootstrap before you start the installation process. This will enable you to learn more about the framework and give you a rough idea on how to install it. In fact, you will be able to see a Download and Get started button in the official Bootstrap website.

Bootstrap 4 beta homepage

If you click the download button, you will be redirected to another page where you can find multiple numbers of options to download the latest version of the Bootstrap framework.

Bootstrap 4 beta download page

Standard Download

Most users prefer to use the Standard download method when it comes to Bootstrap framework installation. This is a pretty simple method where you can easily download combined and minified JavaScript plugins and CSS bundles that can be later used for your web designing project.

Bootstrap 4 beta compiled download

Bootstrap files will automatically start downloading once you click on the Download button. Once the downloading is finished, you will receive a zip folder that contains compiled and minified versions of the JavaScript plugins and CSS bundles. You will need to extract the zip folder if you wish to make use of these files in your next project.

Bootstrap 4 beta compiled dist folder

You will be able to see the following files once you extract the CSS folder.

Bootstrap 4 beta compiled css folder

The files that are available in the JS folder are as follows.

Bootstrap 4 beta compiled JS folder

If you are wondering what the file structure for the precompiled Bootstrap folder really looks like, then check out the following image.

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   └── bootstrap.min.css.map
└── js/
    ├── bootstrap.js
    └── bootstrap.min.js

Source Files

Users who download the source files from the official website of the Bootstrap framework will be able to use JavaScript, source Sass, and documentation files for future projects. Source files will also be downloaded as a zip folder, which means that you will need to extract it to get the contents included in it.

Bootstrap 4 beta source download

Once you open the source file, you will be able to see the following folders.

Bootstrap 4 beta source file contents

Here is a brief glimpse on what the file structure for the source code download really looks like.

bootstrap/
├── dist/
│   ├── css/
│   └── js/
├── docs/
│   └── examples/
├── js/
└── scss/

Content Delivery Networks

Another simple way through which you can include the Bootstrap 4 framework into your designing projects is CDNS or Content Delivery Networks. If you are using CDNs, then you don’t even have to download Bootstrap to your PC. All you need to do is to simply add the following code into the existing HTML code.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

However, an important point to note is that individuals who are using the precompiled version of the Bootstrap framework will need to find a way to include Popper.js and jQuery. Fortunately, you can either them through CDN versions or separately download them. Here is the code that will help you to include Popper.js and jQuery.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

Package Managers

Package managers also let users to easily install Bootstrap source files without any hassles.  It is crucial to remember the fact that the Bootstrap framework will need an Autoprefixer or Saas compiler If you are using a package manager for the installation process.

npm

You will be able to easily and quickly install the Bootstrap framework with the npm package by simply typing in the following command.

npm install bootstrap

RubyGems

Users who wish to install Bootstrap 4 in their Ruby apps by using RubyGems and Bundler can easily do it by adding the following command to the Gemfile.

gem 'bootstrap', '~> 4.2.1'

Some users often prefer not to use Bundler. If that’s the case, then you should enter the following command.

$ gem install bootstrap -v 4.2.1

Composer

Users who are looking to install the JavaScript and Sass files of Bootstrap can do it by using the below-mentioned command.

$ composer require twbs/bootstrap:4.2.1

NuGet

Some developers often use.Net for their projects. If you are one among them then the following commands in Nuget can be used to install Bootstrap’s JavaScript, Sass, or CSS.

Install-Package bootstrap
Install-Package bootstrap.sass

If you are still having doubts about how to install Bootstrap framework, then it is best to get in touch with our expert technicians. However, users who have already figured that out, but need guidance on how to use Bootstrap framework should make sure to check out the How to Use Bootstrap with HTML article. This will give you a clear idea of how to create web pages and websites by using the Bootstrap framework.

The post How to Install Bootstrap 4 appeared first on Codeplaners.

]]> https://codeplaners.com/how-to-install-bootstrap-4/feed/ 0