Merge branch 'new_theme' of bitbucket.org:venbainformationtechnology/ria into new_theme

This commit is contained in:
vadivelJ96 2024-09-12 11:11:50 +05:30
commit e3c5afeb9c
7 changed files with 566 additions and 441 deletions

View File

@ -1,30 +1,35 @@
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css"> <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css">
<style> <style>
.dataTables_filter input {padding: 4px;} .dataTables_filter input {
padding: 4px;
}
.dataTables_filter { .dataTables_filter {
width: 50%; width: 50%;
float: right; float: right;
text-align: right; text-align: right;
} }
.dataTables_paginate { .dataTables_paginate {
width: 50%; width: 50%;
float: right; float: right;
text-align: right; text-align: right;
} }
div.dt-buttons { div.dt-buttons {
position: relative; position: relative;
float: right; float: right;
} }
.btn-success { .btn-success {
background-color: #00d976;; background-color: #00d976;
border-color: #00d976;; ;
border-color: #00d976;
;
} }
</style>
<div class="content-wrapper">
</style>
<div class="content-wrapper">
<section class="content"> <section class="content">
<div class="row" style="min-height: 600px;"> <div class="row" style="min-height: 600px;">
<!-- Left col --> <!-- Left col -->
@ -32,7 +37,11 @@
<!-- TABLE: LATEST ORDERS --> <!-- TABLE: LATEST ORDERS -->
<div class="box box-info"> <div class="box box-info">
<div class="box-header with-border"> <div class="box-header with-border">
<center><h3 class="box-title"><p style="color: #00d976;"><b>Report - Month-wise-Inward(<?php echo $mont; ?>)</b></p></h3></center> <center>
<h3 class="box-title">
<p style="color: #00d976;"><b>Report - Month-wise-Inward(<?php echo $mont; ?>)</b></p>
</h3>
</center>
</div> </div>
<!-- /.box-header --> <!-- /.box-header -->
<div class="box-body"> <div class="box-body">
@ -49,26 +58,25 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<?php if(!empty($month)){ <?php if (!empty($month)) {
$tr3=0; $tr3 = 0;
$tr4=0; $tr4 = 0;
$ab = $this->input->get('ab'); $ab = $this->input->get('ab');
$last = $this->input->get('dat'); $last = $this->input->get('dat');
$new = date("F",strtotime($last))."\n"; $new = date("F", strtotime($last)) . "\n";
foreach($month as $rel) foreach ($month as $rel) {
{
?> ?>
<tr> <tr>
<td><span> <td><span>
<a href="<?= base_url() ?>report/ilink_purchase?sid=<?php echo $rel->sid;?>&mid=<?php echo $rel->mid;?>&ab=<?php echo $ab;?>&m=<?php echo $new;?>"><?php echo $rel->supplier_name;?></a> <a href="<?= base_url() ?>report/ilink_purchase?sid=<?php echo $rel->sid; ?>&mid=<?php echo $rel->mid; ?>&ab=<?php echo $ab; ?>&m=<?php echo $new; ?>"><?php echo $rel->supplier_name; ?></a>
</span></td> </span></td>
<td><span><?php echo $rel->material_name;?></span></td> <td><span><?php echo $rel->material_name; ?></span></td>
<td style="text-align:right"><span><?php <td style="text-align:right"><span><?php
$tr3= $tr3 + round($rel->quantity); $tr3 = $tr3 + round($rel->quantity);
echo round($rel->quantity);?></span></td> echo round($rel->quantity); ?></span></td>
<td style="text-align:right"><span><?php <td style="text-align:right"><span><?php
$tr4= $tr4 + number_format($rel->total,2,'.',''); $tr4 = $tr4 + number_format($rel->total, 2, '.', '');
echo number_format($rel->total,2,'.','');?></span></td> echo number_format($rel->total, 2, '.', ''); ?></span></td>
</tr> </tr>
<?php <?php
} }
@ -85,20 +93,16 @@
<td style="text-align:right"> <td style="text-align:right">
<strong> <strong>
<?php <?php {
{
echo round($tr3); echo round($tr3);
} }
?> ?>
</strong> </strong>
</td> </td>
<td style="text-align:right"> <td style="text-align:right">
<strong> <strong>
<?php <?php {
{ echo number_format($tr4, 2, '.', '');
echo number_format($tr4,2,'.','');
} }
?> ?>
</strong> </strong>
@ -121,29 +125,27 @@
<!-- /.col --> <!-- /.col -->
</div> </div>
</section> </section>
</div> </div>
<script src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script> <script src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script> <script src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.colVis.min.js"></script> <script src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.colVis.min.js"></script>
<script> <script>
// Bootstrap datepicker
// Set up your table
// Bootstrap datepicker $(document).ready(function() {
// Set up your table table = $('#cc').DataTable({
$(document).ready(function() {
table = $('#cc').DataTable( {
"language": { "language": {
"emptyTable": "<center> Data Not Found ! </center>" "emptyTable": "<center> Data Not Found ! </center>"
}, },
"dom": "<'row'<'col-md-6'l><'col-md-6'Bf>>" + "dom": "<'row'<'col-md-6'l><'col-md-6'Bf>>" +
"<'row'<'col-md-6'><'col-md-6'>>" + "<'row'<'col-md-6'><'col-md-6'>>" +
"<'row'<'col-md-12't>><'row'<'col-md-4'i><'col-md-8'p>>", "<'row'<'col-md-12't>><'row'<'col-md-4'i><'col-md-8'p>>",
buttons: [ buttons: [
{ {
@ -160,39 +162,44 @@ $(document).ready(function() {
'colvis' 'colvis'
], ],
, ,
"footerCallback": function ( row, data, start, end, display ) { "footerCallback": function(row, data, start, end, display) {
var api = this.api(), data; var api = this.api(),
data;
// Remove the formatting to get integer data for summation // Remove the formatting to get integer data for summation
var intVal = function ( i ) { var intVal = function(i) {
return typeof i === 'string' ? return typeof i === 'string' ?
parseFloat(i.replace(/[^0.00-9.00]+/g,"")*1) : parseFloat(i.replace(/[^0.00-9.00]+/g, "") * 1) :
typeof i === 'number' ? typeof i === 'number' ?
parseFloat(i) : 0; parseFloat(i) : 0;
}; };
TotalQTY = api TotalQTY = api
.column( 2, { search:'applied' } ) .column(2, {
search: 'applied'
})
.data() .data()
.reduce( function (a, b) { .reduce(function(a, b) {
return intVal(a) + intVal(b); return intVal(a) + intVal(b);
}, 0 ); }, 0);
$( api.column( 2 ).footer() ).html( TotalQTY.toFixed().bold() ); $(api.column(2).footer()).html(TotalQTY.toFixed().bold());
TotalVALUE = api TotalVALUE = api
.column( 3, { search:'applied' } ) .column(3, {
search: 'applied'
})
.data() .data()
.reduce( function (a, b) { .reduce(function(a, b) {
return intVal(a) + intVal(b); return intVal(a) + intVal(b);
}, 0 ); }, 0);
$( api.column( 3 ).footer() ).html( TotalVALUE.toFixed(2).bold() ); $(api.column(3).footer()).html(TotalVALUE.toFixed(2).bold());
} }
} ); });
} ); });
$('#mySelect').on('change',function(){ $('#mySelect').on('change', function() {
table table
.column(4) .column(4)
@ -200,9 +207,9 @@ $(document).ready(function() {
.draw(); .draw();
}); });
$( function() { $(function() {
//var dateFormat = "mm/dd/yy", //var dateFormat = "mm/dd/yy",
from = $( "#min-date" ) from = $("#min-date")
.datepicker({ .datepicker({
dateFormat: "dd-mm-yy", dateFormat: "dd-mm-yy",
defaultDate: "+0d", defaultDate: "+0d",
@ -210,41 +217,36 @@ $(document).ready(function() {
//numberOfMonths: 1 //numberOfMonths: 1
}) })
.on( "change", function() { .on("change", function() {
to.datepicker("option", "minDate", getDate( this ) ); to.datepicker("option", "minDate", getDate(this));
}), }),
to = $( "#max-date" ).datepicker({ to = $("#max-date").datepicker({
dateFormat: "dd-mm-yy", dateFormat: "dd-mm-yy",
defaultDate: "+0d", defaultDate: "+0d",
changeMonth: true, changeMonth: true,
//numberOfMonths: 1 //numberOfMonths: 1
}) })
.on( "change", function() { .on("change", function() {
from.datepicker( "option", "maxDate", getDate( this ) ); from.datepicker("option", "maxDate", getDate(this));
}); });
function getDate( element ) { function getDate(element) {
var date; var date;
try { try {
date = $.datepicker.parseDate( dateFormat, element.value ); date = $.datepicker.parseDate(dateFormat, element.value);
} catch( error ) { } catch (error) {
date = null; date = null;
} }
return date; return date;
} }
} ); });
function Reset() function Reset() {
{
$('#mySelect').val(''); $('#mySelect').val('');
} }
</script>
</script>

View File

@ -872,7 +872,7 @@
onkeypress="return isNumberKey(event)"> onkeypress="return isNumberKey(event)">
</div> </div>
</div> </div>
<div class="col-md-3"> <div class="col-md-3" style="margin-top: 18px;">
<div class="form-group"> <div class="form-group">
<span for="ESI_Rate">ESI Rate(%)</span> <span for="ESI_Rate">ESI Rate(%)</span>
<font color="Red">*</font> <font color="Red">*</font>

View File

@ -55,6 +55,24 @@
<form role="form" id="addemppaydate" action="<?php echo base_url() ?>emppaydate/addNewemppay" method="post" name="addform"> <form role="form" id="addemppaydate" action="<?php echo base_url() ?>emppaydate/addNewemppay" method="post" name="addform">
<div class="box-body"> <div class="box-body">
<!-- Supplier Information --> <!-- Supplier Information -->
<div class="col-md-12" style="margin-bottom: 27px;">
<div class="row">
<div class="col-md-3">
</div>
</div>
</div>
<div class="col-md-12" style="margin-bottom: 27px;">
<div class="row">
<div class="col-md-3">
</div>
</div>
</div>
<div class="col-md-12" style="margin-bottom: 27px;">
<div class="row">
<div class="col-md-3">
</div>
</div>
</div>
<div class="col-md-12" style="margin-bottom: 27px;"> <div class="col-md-12" style="margin-bottom: 27px;">
<div class="row"> <div class="row">
<div class="col-md-3"> <div class="col-md-3">

View File

@ -10,7 +10,13 @@ if (!empty($EmpCount)) {
} }
?> ?>
<style>
@media (min-width: 991.98px) {
.avatar-title.bg-soft-primary.rounded {
background-color: 'black';
}
}
</style>
<div class="content-wrapper"> <div class="content-wrapper">
<section class="content"> <section class="content">
<!-- Dashboard for Account department--> <!-- Dashboard for Account department-->
@ -630,6 +636,12 @@ if (!empty($EmpCount)) {
<!-- Content Header (Page header) --> <!-- Content Header (Page header) -->
<!-- <section class="content-header"> --> <!-- <section class="content-header"> -->
<!-- <h3>Admin Dashboard</h3> --> <!-- <h3>Admin Dashboard</h3> -->
<!-- </section> -->
<!-- Main content -->
<section class="content">
<br><br>
<br><br>
<div class="row"> <div class="row">
<div class="col-12 text-right" style="height: 75px;"> <div class="col-12 text-right" style="height: 75px;">
<a href="javascript:void(0)" type="button" title="Sync With Zoho Books" class="btn btn-success" onclick="synczohobooks()"> <a href="javascript:void(0)" type="button" title="Sync With Zoho Books" class="btn btn-success" onclick="synczohobooks()">
@ -637,14 +649,12 @@ if (!empty($EmpCount)) {
</a> </a>
</div> </div>
</div> </div>
<!-- </section> -->
<!-- Main content -->
<section class="content">
<div class="row"> <div class="row">
<div class="col-xl-3">
<div class="col-xl-3 col-md-3">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<div class="row">
<div class="col-12">
<div class="d-flex justify-content-between"> <div class="d-flex justify-content-between">
<div> <div>
<h5 class="text-muted font-weight-normal mt-0 text-truncate" title="User Registrations">User Registrations</h5> <h5 class="text-muted font-weight-normal mt-0 text-truncate" title="User Registrations">User Registrations</h5>
@ -667,6 +677,10 @@ if (!empty($EmpCount)) {
</div> </div>
</div> </div>
</div>
</div>
</div> </div>
</div><!-- end col --> </div><!-- end col -->
<!-- </div> <!-- </div>

View File

@ -7,6 +7,36 @@ if (empty($Status)) {
?> ?>
<style> <style>
/* Default minimized state */
.supplier-content {
max-width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
height: 20px;
/* Minimized height */
transition: height 0.3s ease-out;
/* Smooth transition */
}
/* Expanded state with fixed height and scrolling */
.supplier-content.expand {
height: 100px;
/* Fixed height for expanded state */
white-space: normal;
/* Allows wrapping */
overflow-y: auto;
/* Enable vertical scrolling */
transition: height 0.3s ease-in;
/* Smooth transition for height */
}
.table-bordered>thead>tr>th, .table-bordered>thead>tr>th,
.table-bordered>tbody>tr>th, .table-bordered>tbody>tr>th,
.table-bordered>tfoot>tr>th, .table-bordered>tfoot>tr>th,
@ -150,8 +180,7 @@ if (empty($Status)) {
//echo $index; //echo $index;
?> ?>
<tr id="<?php echo $index ?>"> <tr id="<?php echo $index ?>">
<td><?php $podt = new DateTime($record->PODate);
<td align="right" style="width:75px"><?php $podt = new DateTime($record->PODate);
$PODate = $podt->format('d-m-Y'); $PODate = $podt->format('d-m-Y');
echo $PODate; echo $PODate;
?></td> ?></td>
@ -160,7 +189,11 @@ if (empty($Status)) {
<td><?php echo $record->CostCenterName ?> </td> <td><?php echo $record->CostCenterName ?> </td>
<!-- <td><?php // echo $record->CostCenterCode <!-- <td><?php // echo $record->CostCenterCode
?></td> --> ?></td> -->
<td><?php echo $record->SupplierName ?></td> <td class="supplier-name" style="text-wrap: balance;">
<div class="supplier-content">
<?php echo $record->SupplierName ?>
</div>
</td>
<td><?php echo $record->FirstName ?></td> <td><?php echo $record->FirstName ?></td>
<td><?php echo $record->DepartmentName ?></td> <td><?php echo $record->DepartmentName ?></td>
<!-- <td align="right"><?php // $Cdt = new DateTime($record->CreatedDate); <!-- <td align="right"><?php // $Cdt = new DateTime($record->CreatedDate);
@ -169,7 +202,7 @@ if (empty($Status)) {
?></td> --> ?></td> -->
<td align="right"><?php echo $record->TotalOrderValue ?></td> <td><?php echo $record->TotalOrderValue ?></td>
<td><?php echo $record->Approver ?></td> <td><?php echo $record->Approver ?></td>
@ -502,7 +535,7 @@ if (empty($Status)) {
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.13.6/sorting/datetime-moment.js"></script> <script src="https://cdn.datatables.net/plug-ins/1.13.6/sorting/datetime-moment.js"></script>
<script> <script>
$.fn.dataTable.ext.type.order['date-eu-pre'] = function(date) { $.fn.dataTable.ext.type.order['date-eu-pre'] = function(date) {
var dateSplit = date.split('/'); var dateSplit = date.split('/');
return (dateSplit[2] + dateSplit[1] + dateSplit[0]) * 1; return (dateSplit[2] + dateSplit[1] + dateSplit[0]) * 1;
@ -511,7 +544,7 @@ if (empty($Status)) {
<script> <script>
$(document).ready(function() { $(document).ready(function() {
// Initialize the DataTable // Initialize the DataTable
var table = $('#po_release').DataTable({ var table = $('#po_release').DataTable({
dom: 'Blfrtip', // Buttons, length menu, filter, table, information, pagination dom: 'Blfrtip', // Buttons, length menu, filter, table, information, pagination
@ -519,7 +552,10 @@ $(document).ready(function() {
'copy', 'csv', 'excel', 'pdf', 'print' // Export buttons 'copy', 'csv', 'excel', 'pdf', 'print' // Export buttons
], ],
pageLength: 10, // Default rows per page pageLength: 10, // Default rows per page
lengthMenu: [ [10, 20, 30, 50, -1], [10, 20, 30, 50, "All"] ], // Rows per page options lengthMenu: [
[10, 20, 30, 50, -1],
[10, 20, 30, 50, "All"]
], // Rows per page options
responsive: true, // Responsive table responsive: true, // Responsive table
order: [], // Default ordering (column index 0, descending) order: [], // Default ordering (column index 0, descending)
language: { language: {
@ -527,7 +563,8 @@ $(document).ready(function() {
next: '<i class="fas fa-angle-right"></i>', // Next button icon next: '<i class="fas fa-angle-right"></i>', // Next button icon
previous: '<i class="fas fa-angle-left"></i>' // Previous button icon previous: '<i class="fas fa-angle-left"></i>' // Previous button icon
} }
} },
autoWidth: true
}); });
// Date range filter function // Date range filter function
@ -584,5 +621,19 @@ $(document).ready(function() {
toDateInput.value = fromDate; toDateInput.value = fromDate;
} }
}); });
}); });
$(document).ready(function() {
$('.supplier-content').on('click', function() {
var $this = $(this);
if (!$this.hasClass('expand')) {
// Expand: Set to fixed height with scroll
$this.addClass('expand');
} else {
// Collapse: Reset to minimized height
// $this.css('height', '20px').removeClass('expand');
$this.removeClass('expand');
}
});
});
</script> </script>

View File

@ -3,15 +3,51 @@
<script src="<?php echo base_url() ?>public/assets/lightswitch/lightswitch/lib/jquery.tabletojson.min.js"></script> <script src="<?php echo base_url() ?>public/assets/lightswitch/lightswitch/lib/jquery.tabletojson.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script> <script>
$(function() { $(document).ready(function() {
// Initialize the datepicker with onSelect event
$("#hdate").datepicker({ $("#hdate").datepicker({
minDate: null,
dateFormat: 'dd-mm-yy', dateFormat: 'dd-mm-yy',
changeMonth: true, changeMonth: true,
changeYear: true, changeYear: true,
yearRange: '-100:+0' yearRange: '-100:+0',
});
function isValidDateFormat(date) {
var datePattern = /^\d{2}-\d{2}-\d{4}$/;
var altDatePattern = /^\d{2}\/\d{2}\/\d{4}$/;
return datePattern.test(date) || altDatePattern.test(date);
}
function convertToDDMMYY(date) {
if (date.includes("/")) {
var parts = date.split("/");
return parts[1] + '-' + parts[0] + '-' + parts[2];
}
return date;
}
// Handle manual input change for the date
$("#hdate").on('change', function() {
var selectedDate = $(this).val(); // Get the date entered manually (string)
if (selectedDate) {
if (isValidDateFormat(selectedDate)) {
selectedDate = convertToDDMMYY(selectedDate);
var dateParts = selectedDate.split("-");
var year = dateParts[2];
var yearNumber = parseInt(year, 10);
console.log("Year as a number: " + yearNumber);
$('#page-title-year-selected').html(yearNumber);
} else {
console.log("Invalid date format. Please enter in 'dd-mm-yy' format.");
}
} else {
console.log("No date selected or entered.");
}
}); });
}); });
$('html').bind('keypress', function(e) { $('html').bind('keypress', function(e) {
//alert('Key Pressed'); //alert('Key Pressed');
if (e.keyCode == 13) { if (e.keyCode == 13) {
@ -35,13 +71,15 @@
<div class="row"> <div class="row">
<div class="col-6"> <div class="col-6">
<div class="page-title-box page-title-box-alt"> <div class="page-title-box page-title-box-alt">
<h4 class="page-title"> Public Holiday Information - <?php echo date('Y'); ?></h4> <!-- <h4 class="page-title"> Public Holiday Information- <span id="page-title-year-selected"><?php echo date('Y'); ?></span></h4> -->
<h4 class="page-title"> Public Holiday Information</h4>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<div class="card"> <div class="card">
<br>
<div class="row" style="padding-left: 26px;"> <div class="row" style="padding-left: 26px;">
<div class="col-md-3"> <div class="col-md-3">
<span>Holiday Name : </span> <span>Holiday Name : </span>
@ -145,6 +183,7 @@
}); });
tr.parentNode.removeChild(tr); tr.parentNode.removeChild(tr);
} }
$('#Add').click(function() { $('#Add').click(function() {
var index = $('#phdays tr').length; var index = $('#phdays tr').length;
var H_name = $('#hname').val(); var H_name = $('#hname').val();
@ -163,11 +202,10 @@
}); });
$('#submit').click(function() { $('#submit').click(function() {
var jsondata = $('#phdays').tableToJSON(); var jsondata = $('#phdays').tableToJSON();
var jsondata = JSON.stringify(jsondata); var jsondata = JSON.stringify(jsondata);
$('#content').loader('show'); // $('#content').loader('show');
$.ajax({ $.ajax({
data: { data: {
param1: jsondata param1: jsondata
@ -176,11 +214,13 @@
url: "<?php echo base_url() ?>monthlypay/savePublicHolidays", url: "<?php echo base_url() ?>monthlypay/savePublicHolidays",
success: function(data) { success: function(data) {
$('#content').loader('hide'); // $('#content').loader('hide');
alert(data); alert(data);
} }
}); });
}); });
// $('#page-title-year-selected')
</script> </script>

View File

@ -1547,7 +1547,7 @@ function appendExistingFilesFileds(data){
<input type="text" id="file_name" name="file_name[]" maxlength="255" class="form-control" value="${data != null && data != '' ? data.file_name : ''}"> <input type="text" id="file_name" name="file_name[]" maxlength="255" class="form-control" value="${data != null && data != '' ? data.file_name : ''}">
</div> </div>
<div class="form-group col-md-4"> <div class="form-group col-md-4">
<span for="emp_file">File</span> <label class="col-form-label" for="emp_file">File</label>
<input type="file" id="emp_file" name="emp_file[]" class="form-control"> <input type="file" id="emp_file" name="emp_file[]" class="form-control">
</div> </div>
<div class="form-group col-md-4 p-4"> <div class="form-group col-md-4 p-4">