Search

Bootstrap's Articles

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

Bootstrap clearfix class with example
In this article, I will show you how you can clear floated space and start new elements from new line. If you use float property to element, it always float to left or right as you have set. The new elements you may want to start from new line but it may also start in beside floated elements. Here is below example. Example: <!doctype html> <html> <head>     <title>Without clearfix</title>     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body>     <div class="container">         <div class="border border-3">             <img src="https://hackthestuff.com/uploads/subCategories/1626256775898nginx.png" class="float-start">             <h1>Without clearfix</h1>         </div>         <p class="lead">This is new line and should start from new line.</p>     </div> </body> </html> You can see <p> element is started after <h1> element which is not as you want. To prevent <p> element start direct after <h1> element, you need to clear the float. Bootstrap .clearfix class clear floated content within a parent element. You just need to add .clearfix class to the parent element and it will fix the issue. Here is the example: <!doctype html> <html> <head>     <title>With clearfix</title>     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body>     <div class="container">         <div class="border border-3 clearfix">             <img src="https://hackthestuff.com/uploads/subCategories/1626256775898nginx.png" class="float-start">             <h1>With clearfix</h1>         </div>         <p class="lead">This is new line and should start from new line.</p>     </div> </body> </html> You can see p element started after clearfix class. I hope it will help you.
How to use Bootstrap Tags Input Plugin
In the blog applications, while creating blog, you want to add multiple tags for the article. Dropdown only allows users to select options list. You may want user to input desired tags. This is where Bootstrap tags input plugin is useful. In this article, we will learn how to create and use Bootstrap tags input. Bootstrap tags input is a jQuery plugin providing a Twitter Bootstrap user interface for managing tags. Installation Download plugin zip code from GitHub. Alternativally you can use CDN file. First include Bootstrap 3.3.5 CDN files into <head> tag. Then include Bootstrap tags input css and Javascript tags. Usage Place all css in the <head> tag and script tags before </body> tag ends. In the <input> tag, add data-role="tagsinput" attribute to automatically change it to a tags input field. You can also use <select multiple> instead of <input> to get multivalue support. The value will be set in an array instead of comma seperated string. Here is the example code: <!DOCTYPE html> <html>     <head>         <title>Bootstrap Tags Input</title>         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.6.0/bootstrap-tagsinput.min.css"/>         <style type="text/css">             .bootstrap-tagsinput {                 width: 100%;             }         </style>     </head>     <body>         <div class="container">             <h2>Bootstrap Tags Input</h2>             <input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" />         </div>         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>         <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>         <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.6.0/bootstrap-tagsinput.min.js"></script>     </body> </html> To add the tag, press TAB button. The Bootstrap tags input can be also used with Typeahead.js to predict the value from the predefined. The plugin provides many options to customize tags input. It also supports required methods and events to perform task on event. You can visit official documentation website to view full documentation. I hope you will like to use the plugin in development.
How to Add Bootstrap-datepicker in your website
Bootstrap is the most popular, open-source and front-end CSS framework. Bootstrap makes easy to create responsive web design. Bootstrap also provides many jQuery plugins. One of them is Bootstrap-datepicker. Bootstrap-datepicker is the flexible datepicker widget using Bootstrap. It provides easy to choose date in calender format instead of typing manually. It is also provides many other features like date format, date-range, read only date etc. In this article, we will use Bootstrap-datepicker in the input date box in the form. To use the Bootstrap, we will add Bootstrap CDN. We also need to include jQuery as Bootstrap depends on jQuery. Installation First include bellow CDN files in the <head> tag in the web page It includes jQuery, Bootstrap and Bootstrap-datepicker. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script> Create Datepicker field We have included necessary library CDN files, now we will add input tags which will create datepicker box. Include bellow html tags in the form where you want to create Datepicker. <form class="form-inline row">     <div class="form-group col-sm-6">         <label for="datepicker" class="col-sm-4">Bootstrap-datepicker</label>         <input type="text" class="form-control col-sm-8" id="datepicker" placeholder="Select a Date" readonly>     </div> </form> And add bellow jQuery code just before the end of the </body> tag. This will create datepicker dropdown at input field. <script type="text/javascript">     $(document).ready(function () {         $('#datepicker').datepicker({             format: 'mm-dd-yyyy'         });     }); </script> Options Options will be passed in the datepicker method as json as above. Also most of the options can be used as data-attributes in the <input> tag like format can be used as data-date-format or startDate will be used as data-date-start-date. Here are some of the important options that are available. Option Description Value type Available values Default option autoclose Whether or not to close the datepicker immediately when a date is selected. Boolean false, true false calendarWeeks Show the number of weeks. Boolean false, true false disableTouchKeyboard Disables touch keypad. Boolean false, true false enableOnReadonly Disables datepicker and can not change field value. Boolean false, true false endDate Last date that can be selected, must be parsable with format. String     format The date format, combination of d, dd, D, DD, m, mm, M, MM, yy, yyyy. String   mm/dd/yyyy startDate First date that can be selected, must be parsable with format. String     showOnFocus Datepicker will be prevented from showing when the input field associated with it receives focus on false value. Boolean false, true true todayHighlight Highlight today value. Boolean false, true false weekStart Day of the week start. 0 (Sunday) to 6 (Saturday) Integer 0-6 0 Methods Methods can be used in datepicker by calling the datepicker function with a string first argument and followed by any arguments the method takes.  Method Description Argument value destroy Remove the datepicker and its all relative events. - show Show the picker. - hide Hide the picker. - update Update to new date with given argument. - setDate Set the local date object. - getDate Return a local date object. - getStartDate Return a local date object. - getEndDate Return a local date object. - setStartDate Sets a new lower date limit on the datepicker. startDate (Date) setEndDate Sets a new upper date limit on the datepicker. endDate (Date) setDatesDisabled Sets the days that should be disabled. datesDisabled (String|Array) setDaysOfWeekDisabled Sets the days of week that should be disabled. daysOfWeekDisabled (String|Array) setDaysOfWeekHighlighted Sets the days of week that should be highlighted. daysOfWeekHighlighted (String|Array)   Events Datepicker also supports certain events. Events can be used in some cases to pass object to any event handlers. $('.datepicker').datepicker() .on(event, function(event) {     // your code goes here... }); show Triggers when the datepicker is displayed. hide Triggers when the datepicker is hidden. clearDate Triggers when the datepicker is cleared. changeDate Triggers when the date is changed. changeMonth Triggers when the view month is changed from year view. changeYear Triggers when the view year is changed from decade view. changeDecade Triggers when the view decade is changed from century view. changeCentury Triggers when the view century is changed from millennium view. And that would be it. I hope you liked this article. Any questions or suggestions are most welcome.
Bootstrap 5 accordion example
Bootstrap accordion provides easy way to handle a informative webpage that includes lots of paragraph. This includes documentation page, FAQ page etc. This way user can only see the content that need to show and other information remain hidden. Bootstrap accordion works same as collapse. in this article, we will see how to create accordion in Bootstrap and customize. Here is the example of Bootstrap accordion. <!doctype html> <html> <head>     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body>     <h1 class="text-center m-3">Bootstrap Accordion</h1>     <div class="container">         <div class="accordion" id="accordion">             <div class="accordion-item">                 <h2 class="accordion-header" id="one">                 <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-one" aria-expanded="true" aria-controls="collapse-one">                 Accordion 1                 </button>                 </h2>                 <div id="collapse-one" class="accordion-collapse collapse show" aria-labelledby="one" data-bs-parent="#accordion">                     <div class="accordion-body">                         <p>This is accordion body.</p>                     </div>                 </div>             </div>             <div class="accordion-item">                 <h2 class="accordion-header" id="two">                 <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-two" aria-expanded="false" aria-controls="collapse-two">                 Accordion 2                 </button>                 </h2>                 <div id="collapse-two" class="accordion-collapse collapse" aria-labelledby="two" data-bs-parent="#accordion">                     <div class="accordion-body">                         <p>This is accordion body.</p>                     </div>                 </div>             </div>             <div class="accordion-item">                 <h2 class="accordion-header" id="three">                 <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-three" aria-expanded="false" aria-controls="collapse-three">                 Accordion 3                 </button>                 </h2>                 <div id="collapse-three" class="accordion-collapse collapse" aria-labelledby="three" data-bs-parent="#accordion">                     <div class="accordion-body">                         <p>This is accordion body.</p>                     </div>                 </div>             </div>         </div>     </div>     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script> </body> </html> Add accordion-flush class to remove the default background color, some borders etc. to render accordions with their parent container. Remove data-bs-parent attribute on each accordion-collapse class to make accordion items stay open when another item is opened. If you want the accordion item is open by default, the attribute on the control element should have a value of aria-expanded="true". If you want to change icon for open and close accordion arrow, i.e., plus and minus icon instead of arrow, you can add the below CSS in it. Here is the example for custom icon. /*collapsed icon*/ .accordion-button::after { background-image: url("https://hackthestuff.com/assets/images/logo.png"); } /*openned icon*/ .accordion-button:not(.collapsed)::after { background-image: url("https://b.stripecdn.com/docs/assets/6bf407479706b31fa82c548be63edc52.png"); } I hope it will help you.
Laravel 5.5 - Yajra Datatable Example
Today, we are share with youu how to implement yajra datatable in laravel application with example. in your application sorting, searching and pagination functionality is common if you use simple table for display your application data iin tabuler forrmate so you should also write manualy code for it all functionality. and it is very painful and take some time. But, if you use yajra datatable package in your laravel application then you can save this time. because yajra datatable jquery package provide all those functionality ready made nothing else write of single line for it. yajra datatable provide following functionality for data display in tabuler formate. here listing some basic and core functionality of yajra datatable 1. Pagination 2. Full Searching 3. Data Sorting 4. Data Export, Print After done this tutorials and you run it your output look like this. Install Package First, we need to install yajra/laravel-datatables-oracle package in our laravel application run by following command in terminal. composer require yajra/laravel-datatables-oracle Configure Package Next, configure installed package in application. so, open your config/app.php file and set insstalled package service providers and aliases. 'providers' => [ ..., Yajra\DataTables\DataTablesServiceProvider::class, ] 'aliases' => [ ..., 'DataTables' => Yajra\DataTables\Facades\DataTables::class, ] After set providers and aliases then publish vendor run by following command. php artisan vendor:publish Add Dummy Data Next, we are add some dummy data in users table because we are use this data in datatable tabuler formate for demo. php artisan tinker >>> factory(App\User::class, 50)->create(); Create Routes Next, we need to create following two route. so, open your routes/web.php and create following two route. // Display view Route::get('datatable', 'DataTableController@datatable'); // Get Data Route::get('datatable/getdata', 'DataTableController@getPosts')->name('datatable/getdata'); [ADDCODE] Create Controller Next, create DataTableController.php file in app/Http/Controllers folder namespace App\Http\Controllers; use Illuminate\Http\Request; use Illuminate\Support\Facades\Input; use Redirect; use DataTables; use App\User; class DataTableController extends Controller { public function datatable() { return view('datatable'); } public function getPosts() { return \DataTables::of(User::query())->make(true); } } Create Blade File Next, create datatable.blade.php file in resources/views/ folder and copy past following code. Info Message!! #First check jQuery should be add in head section.. @extends('layouts.app') @section('style') <link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"> @endsection @section('content') <div class="container"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <div class="panel panel-default"> <div class="panel-heading">Data Table Demo</div> <div class="panel-body"> <table class="table table-hover table-bordered table-striped datatable" style="width:100%"> <thead> <tr> <th>Id</th> <th>Name</th> <th>Email</th> </tr> </thead> </table> </div> </div> </div> </div> </div> @endsection @section('script') <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.datatable').DataTable({ processing: true, serverSide: true, ajax: '{{ route('datatable/getdata') }}', columns: [ {data: 'id', name: 'id'}, {data: 'name', name: 'name'}, {data: 'email', name: 'email'}, ] }); }); </script> @endsection Now we are ready to run our example so run bellow command ro quick run: php artisan serve Now you can open bellow URL on your browser: http://localhost:8000/datatable If you want to any problem then please write comment and also suggest for new topic for make tutorials in future. Thanks...
Laravel Validation In Bootstrap Model Using Ajax
Today, Laravelcode share with you how to laravel validation handle in bootstrap popup using ajax. you have many time required this type functionality in your laravel aplication. so, we are write this tutorial for it how to dispan laravel validation error in bootstrap popoup or model. We all are very familiar with laravel simple validation on post request and handale all validation error after any validatioon false it is vary easy and very simple. but manage laravel validation in popoup or model without page refresh is little bit hard for new commer in laravel. When you use bootstrap model and popup for register form or any type of form that time you fill all the fields and click on submit button then if any validation false then how to handale in model without closing model when validation make false. We are use laravel register form for this tutorials. we are open laravel register form open in bootstrap model and then manage registration form validation in bootstrap popup or model. We are make some very easy code for it simple follow this step. Step : 1 Open Boostrap Model On Register Menu Link If youe have create laravel new project then open resources/views/layouts/app.blade.php file and add bootstrap model link on it. <li> <a href="#" data-toggle="modal" data-target="#SignUp">Register</a> </li> Add model link on register menu then create model Step : 2 Create Form In Model [ADDCODE] Now, we are create register form into bootstrap model when user click on register menu then open register form on model and here we are manage laravel validation if any validation false then it diplay into the model. <div id="SignUp" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h3 class="modal-title text-center primecolor">Sign Up</h3> </div> <div class="modal-body" style="overflow: hidden;"> <div id="success-msg" class="hide"> <div class="alert alert-info alert-dismissible fade in" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> <strong>Success!</strong> Check your mail for login confirmation!! </div> </div> <div class="col-md-offset-1 col-md-10"> <form method="POST" id="Register"> {{ csrf_field() }} <div class="form-group has-feedback"> <input type="text" name="name" value="{{ old('name') }}" class="form-control" placeholder="Full name"> <span class="glyphicon glyphicon-user form-control-feedback"></span> <span class="text-danger"> <strong id="name-error"></strong> </span> </div> <div class="form-group has-feedback"> <input type="email" name="email" value="{{ old('email') }}" class="form-control" placeholder="Email"> <span class="glyphicon glyphicon-envelope form-control-feedback"></span> <span class="text-danger"> <strong id="email-error"></strong> </span> </div> <div class="form-group has-feedback"> <input type="password" name="password" class="form-control" placeholder="Password"> <span class="glyphicon glyphicon-lock form-control-feedback"></span> <span class="text-danger"> <strong id="password-error"></strong> </span> </div> <div class="form-group has-feedback"> <input type="password" name="password_confirmation" class="form-control" placeholder="Retype password"> <span class="glyphicon glyphicon-log-in form-control-feedback"></span> </div> <div class="row"> <div class="col-xs-12 text-center"> <button type="button" id="submitForm" class="btn btn-primary btn-prime white btn-flat">Register</button> </div> </div> </form> </div> </div> </div> </div> </div> After done write register model code then write jquery ajax code for form submit Step : 3 jQuery Ajax Code For Form Submit We are open laravel register form in bootstrap model then we are write here form submit code into jquery ajax. simple copy followign code and past into script tag. <script type="text/javascript"> $('body').on('click', '#submitForm', function(){ var registerForm = $("#Register"); var formData = registerForm.serialize(); $( '#name-error' ).html( "" ); $( '#email-error' ).html( "" ); $( '#password-error' ).html( "" ); $.ajax({ url:'/register', type:'POST', data:formData, success:function(data) { console.log(data); if(data.errors) { if(data.errors.name){ $( '#name-error' ).html( data.errors.name[0] ); } if(data.errors.email){ $( '#email-error' ).html( data.errors.email[0] ); } if(data.errors.password){ $( '#password-error' ).html( data.errors.password[0] ); } } if(data.success) { $('#success-msg').removeClass('hide'); setInterval(function(){ $('#SignUp').modal('hide'); $('#success-msg').addClass('hide'); }, 3000); } }, }); }); </script> Step : 4 Overwrite register function Now, last and final step is overwrite your RegisterController.php's register function. so open your app/Http/Controllers/Auth/RegisterController.php file and put into it following code. namespace App\Http\Controllers\Auth; use App\User; use App\Http\Controllers\Controller; use Illuminate\Support\Facades\Validator; use Illuminate\Foundation\Auth\RegistersUsers; use Illuminate\Http\Request; use Response; class RegisterController extends Controller { /* |-------------------------------------------------------------------------- | Register Controller |-------------------------------------------------------------------------- | | This controller handles the registration of new users as well as their | validation and creation. By default this controller uses a trait to | provide this functionality without requiring any additional code. | */ use RegistersUsers; /** * Where to redirect users after registration. * * @var string */ protected $redirectTo = '/home'; /** * Create a new controller instance. * * @return void */ public function __construct() { $this->middleware('guest'); } public function register(Request $request) { $validator = Validator::make($request->all(), [ 'name' => 'required|max:255', 'email' => 'required|email|max:255|unique:users', 'password' => 'required|min:6|confirmed', ]); $input = $request->all(); if ($validator->passes()) { // Store your user in database return Response::json(['success' => '1']); } return Response::json(['errors' => $validator->errors()]); } } Now we are ready to run our example so run bellow command ro quick run: php artisan serve Now you can open bellow URL on your browser: http://localhost:8000 If you face any problem then please write a comment or give some suggestions for improvement. Thanks...
Show Image Preview Before Upload In jQuery Bootstrap Example
Today, Laravelcode share one helpfull tutorials about jquery and bootstrap. in this tutorials we are show you how to show image preview before upload. We are need some time this type functionality in frontend site which you want to show image preview before it upload in server. resently we are working on one laravel application and we are need this so we are make one simple script for it using jquery and bootstrap. and we are finaly done this with jquery and bootstrap. Here, we are always share our code and example which we are facing in our devloping mode and when we are find finaly solution about it the we are also share with you. You can try this example with bootstrap because we are using bootstrap for fine layout. Step : 1 HTML code look like <!DOCTYPE html> <html> <head> <title>Show Image Preview Before Upload</title> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2"> <div class="input-group image-preview"> <span class="input-group-btn"> <button type="button" class="btn btn-default image-preview-clear" style="display:none;"> <span class="glyphicon glyphicon-remove"></span> Clear </button> <div class="btn btn-default image-preview-input"> <span class="glyphicon glyphicon-folder-open"></span> <span class="image-preview-input-title">Browse</span> <input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview"/> </div> </span> </div> </div> </div> </div> </body> </html> Step : 2 CSS code look like Then add some css code copy following code and add in your css file. .image-preview-input { position: relative; overflow: hidden; margin: 0px; color: #333; background-color: #fff; border-color: #ccc; } .image-preview-input input[type=file] { position: absolute; top: 0; right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); } .image-preview-input-title { margin-left:2px; } Step : 3 jQuery code look like [ADDCODE] The finaly add following jQuery code in js file. $(document).on('click', '#close-preview', function(){ $('.image-preview').popover('hide'); // Hover befor close the preview $('.image-preview').hover( function () { $('.image-preview').popover('show'); }, function () { $('.image-preview').popover('hide'); } ); }); $(function() { // Create the close button var closebtn = $('<button/>', { type:"button", text: 'x', id: 'close-preview', style: 'font-size: initial;', }); closebtn.attr("class","close pull-right"); // Set the popover default content $('.image-preview').popover({ trigger:'manual', html:true, title: "<strong>Preview</strong>"+$(closebtn)[0].outerHTML, content: "There's no image", placement:'bottom' }); // Clear event $('.image-preview-clear').click(function(){ $('.image-preview').attr("data-content","").popover('hide'); $('.image-preview-filename').val(""); $('.image-preview-clear').hide(); $('.image-preview-input input:file').val(""); $(".image-preview-input-title").text("Browse"); }); // Create the preview image $(".image-preview-input input:file").change(function (){ var img = $('<img/>', { id: 'dynamic', width:250, height:200 }); var file = this.files[0]; var reader = new FileReader(); // Set preview image into the popover data-content reader.onload = function (e) { $(".image-preview-input-title").text("Change"); $(".image-preview-clear").show(); $(".image-preview-filename").val(file.name); img.attr('src', e.target.result); $(".image-preview").attr("data-content",$(img)[0].outerHTML).popover("show"); } reader.readAsDataURL(file); }); }); Now we are ready to run our example so run bellow command ro quick run: If you face any problem then please write a comment or give some suggestions for improvement. Thanks...