PHP - Display Data In Two Columns Bootstrap

PHP script return 20 UL LIST values like,

< ul >

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T

< /ul >

How to display UL LIST into row wise 5 columns like

A B C D
E F G H
I J K L
M N O P
Q R S T (20 ITEMS)

$('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab a:first').tab('show') // Select first tab
$('#myTab a:last').tab('show') // Select last tab
$('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)

Hello all,

I have a website with a form that I want a user to fill out then if it is valid I have the button submit and I want it to email me. The message. If success full I want a message to popup on screen saying success I am using bootstrap 4

<div class="messageSuccess"></div>
            <div class="row">
                <div class="col-md-9 mb-md-0 mb-5">
                    <form id="contact-form" name="contact-form" action="" method="post"> <!--action="contactEmail.php" -->
                        <div class="row ">
                            <div class="col-md-6 ">
                                <div class="md-form mb-0 ">
                                    <input class="form-control" type="text" id="txtName" name="txtName" required />
                                    <label for="txtName">Your Name </label>
                                    <div class="nameError"></div>
                                </div>
                            </div>
                            <div class="col-md-6 ">
                                <div class="md-form mb-0 ">
                                    <input class="form-control" type="text" id="txtEmail" name="txtEmail" required />
                                    <label id="lblEmail" for="txtEmail">Your Email Address </label>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="md-form mb-0">
                                    <input class="form-control" type="text" id="txtSubject" name="txtSubject"  data-error="Subject Here" required />
                                    <label for="txtSubject">Subject </label>
                                    <div class="help-block with-errors"></div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="md-form">
                                    <textarea class="form-control" type="text" id="txtMessage" name="txtMessage" rows="4" required data-error="Please leave us a message."></textarea>
                                    <label for="txtMessage">Your Message </label>
                                </div>
                            </div>
                        </div>                    
                    <div class="text-center text-md-left">
                        <input type="submit" id="BtnFormSubmit" class="btn btn-primary btn-xl text-white" value="Send Message" />
                    </div>
                    <div class="status"></div>
                    </form>
                <!-- JavaScript Inner File Form Validation -->
    <script type="text/javascript">
        $(document).ready(function () {
            var form = $("#contact-form");
            var name = $("#txtName").val();
            var email = $("#txtEmail").val();
            var subject = $("#txtSubject").val();
            var message = $("#txtMessage").val();
            var btnSubmit = $("BtnFormSubmit");

            $(form).submit(function (event) {
                
                if (this.checkValidity() == false) {
                    $(this).addClass("was-validated");
                    event.preventDefault();
                    event.stopPropagation();
                }

                alert("Form Valid to create message");
                if (!event.isDefaultPrevented) {
                    alert("passed prevent default");
                    var url = "testemail.php";
                    // POST values 'ajax'
                    $.ajax({
                        type: "POST",
                        url: url,
                        data: $(this).serialize(),
                        success: function (data) {  // done:
                            // data = JSON object object for contactEmail.php
                            // recieve message type: success | danger
                            var messageAlert = "alert- " + data.type;
                            var messageText = data.message;
                            // Bootstrap alert box HTML
                            var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" ' +
                                           'data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>';
                            // if messageAlert and messageText
                            if (messageAlert && messageText) {
                                // Put message on page in messageSuccess section.
                                $(form).find("#messageSuccess").html(alertBox);
                                // Reset the form.
                                $(form)[0].reset();
                            }
                        }
                    });
                    //return false;
                }

            });
                       

            //$(name).blur(function () {
            //})

            // Validate :inputs
            $(":input").blur(function () {
                let controlType = this.type;

                switch (controlType) {
                    case "text":
                    case "password":
                    case "textarea":
                        validateText($(this));
                        break;
                    case "email":
                        validateEmail($(this));
                        break;
                    default:
                        break;
                }
            });
            
            // each :input focusin remove existing validation messages if any.
            $(":input").click(function () {
                $(this).removeClass("is-valid is-invalid");
            })

            /* OPTIONAL ':input' KEYDOWN validation messages remove */

            // Reset Form and remove all validation messages.
            $(":reset").click(function () {
                $(":input").removeClass("is-valid is-invalid");
                $(form).removeClass("was-validated");
            });
        });

        // Validate Text Function
        function validateText(control) {
            let textField = control.val();
            if (textField.length > 1) {
                $(control).addClass("is-valid");
            } else {
                $(control).addClass("is-invalid");
            }
        }

        // Validate Email Function (Email newer regex: /^([\w-\.]+@([\w-]+\.)+[\w-]{2,6})?$/  )
        function validateEmail(control) {
            let textField = control.val();
            let regexPattern = /^\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,6}\b$/i;
            if (regexPattern.test(textField)) {
                $(control).addClass("is-valid");
            } else {
                $(control).addClass("is-invalid");
            }            
        }
    </script>
<?php

$from = 'SampleEmail@YourEmail.com';
$sendTo = 'sample@Gmail.com';
$subject = 'Your Message Subject Here';// Email Message Contact Form Fields
// Array - ($varName => Text from controls)
$controls = array('txtName' => 'Name', 'txtEmail' => 'Email', 'txtSubjext' => 'Subject', 'txtMessage' => 'Message');
$successMessage = 'Contact Message Successfully Sent. Thank you, I will get back to you soon.';
$errorMessage = 'There was an error submitting your message, Please try again. Or try later.';
error_reporting(E_ALL & ~E_NOTICE);
try {
	if(count($_POST) == 0) throw new \Exception('Contact Form Message is empty');
	$emailText = "You have a new message from your contact form\n------------------------------------------------------\n";
	foreach($_POST as $key => $value) {
		if(isset($controls[$key])) {
			$emailText .= "$controls[$key]: $value\n";
		}
	}
	$headers = array('Content-Type: text/plain; charset="UTF-8";',
					 'From: ' . $from,
					 'Reply-To: ' . $from,
					 'Return-Path: ' . $from,
					);
	// Send email
	mail($sendTo, $subject, $emailText, implode("\n", $headers));
	$responseArray = array('type' => 'success', 'message' => $successMessage);
}
catch(\Exception $e) {
	$responseArray = array('type' => 'danger', 'message' => $errorMessage);
}
// If AJAX request return JSON response **RARE**
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
	$encodedJSON = json_encode($responseArray);
	header('Content-Type: application/json');
	echo $encodedJSON;
}
else {
	echo $responseArray['message'];
}
?>