PHP - Bootstrap - Screen Size And Resolution

$('#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'];
}
?>

        /**
         * Called when all validations are completed
         */
        _submit: function() {
            var isValid   = this.isValid(),
                eventType = isValid ? this.options.events.formSuccess : this.options.events.formError,
                e         = $.Event(eventType);

            this.$form.trigger(e);

            // Call default handler
            // Check if whether the submit button is clicked
            if (this.$submitButton) {
                isValid ? this._onSuccess(e) : this._onError(e) ;
										

            }
        },

$("document").ready(function(){
							 
  $(".js-ajax-php-json").submit(function(){
										   
    var data = {
      "action": "test"
    };
    data = $(this).serialize() + "&" + $.param(data);
    $.ajax({
      type: "POST",
      dataType: "json",
      url: "https://www.telekom.ro/delivery/formAction/fix-mobil/response.php", //Relative or absolute path to response.php file
      data: data,
      success: function(data) {
		  
        $(".the-return").html(
          //"Favorite beverage: " + data["favorite_beverage"] + "<br />Favorite restaurant: " + data["favorite_restaurant"] + "<br />Gender: " + data["gender"] + "<br />JSON: " + data["json"]
		  data["ok"]
        );
 
         $(".error").html(
		  data["error"]
        );

 
        //alert("Form submitted successfully.\nReturned json: " + data["json"]);
      },
	   
	  
	  
    });
    return false;
  });
});

I have a blog on my website and the blogs content is stored in a database. On my home page I have the two recent articles displayed on my home page but I have to change them manually so I add the recent article on the home page in the first column and the second most recent one in the next column so they are side by side. What I want to do is automatically display the blogs image and blog title from the database and display on the home page so I don't have to keep changing it manually

My current code looks like the following

<div class="block">
			<div class="container">
            <h3 class="text-center"><span class="color">Recent Blog Articles</span></h3>
				<div class="row">
                
                    <div class="col-md-6">
						<div class="text-img animation" data-animation="fadeInLeft" data-animation-delay="0.5s">
							<a href="https://www.it-doneright.co.uk/blog/one-year-to-go-until-end-of-support-for-windows-7">
                            <div class="image">
                            <img class="img-responsive" src="https://www.it-doneright.co.uk/images/blog/windows7-eos-new.jpg" alt="One year to go until end of support for Windows 7">
                            </div>
							<p>One year to go until end of support for Windows 7</p>
                            </a>
						</div>
					</div>
                
                    <div class="col-md-6">
						<div class="text-img animation" data-animation="fadeInLeft" data-animation-delay="0.5s">
							<a href="https://www.it-doneright.co.uk/blog/windows-10-is-going-to-require-7gb-of-storage-for-future-updates">
                            <div class="image">
                            <img class="img-responsive" src="https://www.it-doneright.co.uk/images/windows-ten-updates-needing-7gb-space-on-hard-drive.jpg" alt="Windows 10 is going to require 7gb of storage for future updates">
                            </div>
							<p>Windows 10 is going to require 7gb of storage for future updates</p>
                            </a>
						</div>
					</div>
					
				</div>
			</div>
		</div>

I did look on Google before posting but could not get my head around how to do it, could anyone point me in the right direction or start me off and will have a go

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

<div class="container">
   <nav>
      <ul>
           <li><a href="#"> Home </a></li>
      </ul>
   </nav>
</div>

I have php file which return data in json format

<?php

include_once('con.php');
$mydata = array();
$data = $con -> prepare('SELECT * FROM user');
$data -> execute();
while($result = $data->fetch()) {
    $mydata[] = $result['id'];
    $mydata[] = $result['first_name'];
    $mydata[] = $result['last_name'];
}
echo json_encode($mydata);
?>

the problem is the footable require both columns and rows how to get colums?

$(document).ready( function() {
	var ft = FooTable.init('#user', {
		columns: $.get("how to get the table column"),
		rows: $.get("row.php")
	});
});

There is no documentation about how to do that with php

look here https://fooplugins.github.io/FooTable/docs/examples/advanced/ajax.html

  * {
            box-sizing: content-box;
            }

<form id="contactForm" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF'],ENT_QUOTES); ?>" method='post'>

<!-- HTML HERE -->

</form>

I've been working on developing a CMS blog and now I'm trying to create a slideshow wit Bootstrap Carousel on the homepage to present the dynamic content (images + text) using the data from table 'posts'.

I tested this code, and it only presents one post. I mean, It's not possible to go to the next slide. I want to show all the posts on the slides.

*The DB connection is already on the includes. The connection was written on a small file called DB.php

Home.php

<header>
          <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                  <ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                  </ol>
                  <div class="carousel-inner" role="listbox">
              <?php
              // The default SQL query
                  $sql = "SELECT * FROM posts ORDER BY id desc";
                  $stmt = $ConnectingDB->query($sql);
                    while ($DataRows = $stmt->fetch()) {
                      $Id = $DataRows["id"];
                      $PostTitle = $DataRows["title"];
                      $Image = $DataRows["image"];
                      $PostText = $DataRows["post"];
              ?>
                    <!-- Slide -->
                    <div class="carousel-item active" style="background-image: url('uploads/<?php echo $Image; ?>')">
                      <div class="carousel-caption">
                        <div class="card-body black">
                          <h3 class="large-mistral-white"><?php echo $PostTitle; ?></h3>
                          <p class="small-times-white"><?php echo $PostText; ?></p>
                        </div>
                      </div>
                    </div>
                    <?php } ?>
                  </div>
                  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                  </a>
                  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                  </a>
                </div>
        </header>

DB.php

<?php

$DSN='mysql:host = localhost; dbname=everybody_blog';
$ConnectingDB = new PDO($DSN,'root','');
?>

i have 8 division (div), i want to display 4 rows in 4 division and the remain 4 rows in the next 4 division here is my code structure for carousel

<div class="nyie-outer">    
<div class="container">
    <div  id="nyieFull" class="carousel slide carousel-multi-item" data-interval="false" data-ride="carousel">
        <div class="outer-controls-top">
        <div class="nyie-title"><h5>THIS IS NYIE</h5></div>
        <div class="controls-top">    
            <a class="btn-floating" href="#nyieFull" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
            <a class="btn-floating" href="#nyieFull" data-slide="next"><i class="fa fa-chevron-right"></i></a>
        </div>
        </div>
        <div class="carousel-inner" role="listbox">
            <div class="carousel-item active">
                 first row

                 second row

                 third row

                 fourth row
            </div><!--/.First four rows here-->
            <div class="carousel-item">

                  fifth row

                 sixth row

                 seven throw

                 eighth row

            </div><!--/.second four rows here-->
        </div
    </div>    
</div> 
</div>

sql code   

CREATE TABLE  product(
prodId INT(11) NOT NULL UNIQUE AUTO_INCREMENT, 
image VARCHAR(255) NOT NULL,
prodName VARCHAR(255) NOT NULL,
prodPrice VARCHAR(255) NOT NULL,
description TEXT NOT NULL
PRIMARY KEY (prodId) 
);

php code

<?php 
include_once('db.php');
$sql = "SELECT image,prodName, prodPrice, description FROM product ORDER BY prodId ASC LIMIT 4";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
    // output data of each row
        while($row = mysqli_fetch_array($result)) {
            $activeprod =  '
            <div class="col-lg-3">
            <a href="more.php" class="newAdded">    
            <figure class="figure">   
               <img src="images/'. $row['image'] .'" alt="" class="img-responsive" >
                <figcaption class="figure-caption">
                    <span class="prodName"><b>Name: </b>'. $row['prodName'] .'</span>
                    <span class="prodPrice"><b>price: </b>'. $row['prodPrice'] .'</span>
                    <span class="desc"><b>description: </b>'. $row['description'] .'</span>    
                </figcaption>    
            </figure> 
            </a>
            </div>
            ';
    }
} 
?>

how can i echo that result in those rows