How to make use Bootstrap Grid with PHP-Twitter bootstrap

TMiller96
March 30, 2019
82 views
1 vote
2 Answers

Basically I want to make this page responsive so it is easily viewed on a mobile device using only the bootstrap grid(container, rows, columns) no styling from Bootstrap. Right now it is not doing so despite me having tried numerous ways. My other pages that do not have PHP have not given me much trouble but this one has and I cannot get it to display well on a phone.

I tried starting with the container at the very top of the page, outside the php block then making a row for my h2 tags and trying to do the same inside my while loop. However, it did not become responsive and the results and the column headers were not align properly.

“headerprofile.php”

<head>
<link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap-grid.min.css"/>

        <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<?php
require_once('includes/headerprofile.php');
require_once('includes/database.php');
?>

<html>
     <head>

        <style>
form.searchbar {
                 margin: 25px 50px;
            }

h1.profile {
margin: 25px 50px;
}
    h2 {     
  margin: 20px 45px;
     }
 h1 {     
   text-align: center;
     } 

p {
  margin: 20px 45px;
}

.responsive {
  width: 100%;
  height: auto;
}

body {margin: 0;}

ul.nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgb(119,13,41);
}


ul.nav li {float: left;}

ul.nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul.nav li a:hover:not(.active) {

    background-color: rgb(237,235,235);
    color: rgb(119,13,41);
    }

ul.nav li a.active {
        background-color: rgb(169,5,51);
    }

ul.nav li.right 
        {
        float: right;
    }

@media screen and (max-width: 600px) {
  ul.nav li.right, 
  ul.nav li {float: none;}
}

.table  { 
                display: table;
                margin-left: auto;
                margin-right: auto;
                text-align: left;
            }
            .tr{ 
                display: table-row; 
                padding: 7px;
            }
            .td{ 
                display: table-cell;
                padding: 7px;
            }


</style>
    </head>
<body> 
<h1 class="profile"> My Appointments </h1>

        <div class ="search" id="browse">
            <p> Find your appointment below or search by keyword</p>

        <form id="" class="searchbar" action="searchAppt.php" method="get">
           <input type="text" name="terms" size="40" class = "sbar" required value="Search by keyword" oninput="validity.valid||(value='');"
                       onblur="if (this.value == '') {
                                    this.value = 'Enter keyword';
                                }"
                       onfocus="if (this.value == 'Enter keyword') {
             this.value = '';
         }"/>&nbsp;&nbsp;
                <button type="submit" class = "btn">Search</button>
            </form>
        </div>
    </div>

    <hr>

    <h2> Future Appointments</h2>
    <p>
    <label> Appointment(s): <br/> 

        <?php     
            $sql = "select a.id, a.lname, a.fname, a.phonenum, a.room, a.building, a.issue, a.start_time, a.end_time, a.username 
            from appointments as a
            where a.email = '". $_SESSION['email'] ."' and a.start_time >= NOW()
            ";
            $result = $conn->query($sql);

            if ($result->num_rows > 0) {
                echo "<div class='table'>
                <div class='tr'>
                <div class='td'><b>Ticket #</b></div>
                <div class='td'><b>Username</b></div>
                <div class='td'><b>Building</b></div>
                <div class='td'><b>Issue</b></div>
                <div class='td'><b>Date</b></div>
                <div class='td'><b>Start Time</b></div>
                <div class='td'><b>End Time</b></div>
                <div class='td'></div>
                </div>";
                // output data of each row
                while($row = $result->fetch_assoc()) {
                    $starttimefuture = strtotime($row["start_time"]); //converts date time received from MySQL into a string
                    $endtimefuture = strtotime($row["end_time"]);
                    $datefuture = date("m/d/y", $starttimefuture);
                    $startfuture = date("g:i A", $starttimefuture);
                    $endfuture = date("g:i A", $endtimefuture);
                    $buildingfuture = str_replace('_',' ', $row["building"]);
                    echo "<div class='tr'>
                    <div class='td'>".$row["id"]."</div>
                    <div class='td'>".$row["username"]."</div>
                    <div class='td'>".$buildingfuture."</div>
                    <div class='td'>".$row["issue"]."</div>
                    <div class='td'>".$datefuture."</div>
                    <div class='td'>".$startfuture."</div>
                    <div class='td'>".$endfuture."</div>
                    <div class='td'><form action='ticketdetails.php' method='post'>
                        <input type='hidden' name='id' value='".$row["id"]."'>
                        <input type='submit' value='Ticket Details'></form>
                    </div>
                    </div>";
                }
                echo "</div>";
            } else {
                echo "<br/><b>No future appointments!</b>";
            }
        ?>
    </label>
    </p> 

    <hr>

Answers

assuming a bootstrap4 grid, and only example – this would be 3 columns wrapping on a mobile

<h2> Future Appointments</h2>
    <p>
    <label> Appointment(s): <br/> 
    </label>

<div class="container">
        <?php     
            $sql = "select a.id, a.lname, a.fname, a.phonenum, a.room, a.building, a.issue, a.start_time, a.end_time, a.username 
            from appointments as a
            where a.email = '". $_SESSION['email'] ."' and a.start_time >= NOW()
            ";
            $result = $conn->query($sql);

            if ($result->num_rows > 0) {
                echo "
            <div class='row'>
               <div class='col-4 col-md-1'><b>Ticket #</b></div>
               <div class='col-4 col-md-2'><b>Username</b></div>
               <div class='col-4 col-md-2'><b>Building</b></div>
               <div class='col-4 col-md-2'><b>Issue</b></div>
               <div class='col-4 col-md-2'><b>Date</b></div>
               <div class='col-4 col-md-1'><b>Start Time</b></div>
               <div class='col-4 col-md-1'><b>End Time</b></div>
               <div class='col-4 col-md-1'></div>
            </div>";
                // output data of each row
                while($row = $result->fetch_assoc()) {
                    $starttimefuture = strtotime($row["start_time"]); //converts date time received from MySQL into a string
                    $endtimefuture = strtotime($row["end_time"]);
                    $datefuture = date("m/d/y", $starttimefuture);
                    $startfuture = date("g:i A", $starttimefuture);
                    $endfuture = date("g:i A", $endtimefuture);
                    $buildingfuture = str_replace('_',' ', $row["building"]);
                    echo "<div class='row'>
            <div class='col-4 col-md-1'>".$row["id"]."</div>
            <div class='col-4 col-md-2'>".$row["username"]."</div>
            <div class='col-4 col-md-2'>".$buildingfuture."</div>
            <div class='col-4 col-md-2'>".$row["issue"]."</div>
            <div class='col-4 col-md-2'>".$datefuture."</div>
            <div class='col-4 col-md-1'>".$startfuture."</div>
            <div class='col-4 col-md-1'>".$endfuture."</div>
            <div class='col-4 col-md-1'>
                <form action='ticketdetails.php' method='post'>
                    <input type='hidden' name='id' value='".$row["id"]."'>
                    <input type='submit' value='Ticket Details'>
                </form>
            </div>
                    </div>";
                }
            } else {
                echo "<br/><b>No future appointments!</b>";
            }
        ?>
</div>

Given what you’ve shown, you need to move at least the headerprofile.php include so that it renders inside the <head> tag:

<?php
require_once('includes/database.php');
?>

<!doctype html>
<html>
     <head>
        <?php require_once('includes/headerprofile.php'); ?>

        <style>
            form.searchbar {
                margin: 25px 50px;
            }

            h1.profile {
            margin: 25px 50px;
            }
            h2 {     
              margin: 20px 45px;
            }
            h1 {     
               text-align: center;
            } 

            p {
              margin: 20px 45px;
            }

            .responsive {
              width: 100%;
              height: auto;
            }

            body {margin: 0;}

            ul.nav {
              list-style-type: none;
              margin: 0;
              padding: 0;
              overflow: hidden;
              background-color: rgb(119,13,41);
            }


            ul.nav li {float: left;}

            ul.nav li a {
              display: block;
              color: white;
              text-align: center;
              padding: 14px 16px;
              text-decoration: none;
            }

            ul.nav li a:hover:not(.active) {
                background-color: rgb(237,235,235);
                color: rgb(119,13,41);
            }

            ul.nav li a.active {
                background-color: rgb(169,5,51);
            }

            ul.nav li.right {
                float: right;
            }

            @media screen and (max-width: 600px) {
              ul.nav li.right, 
              ul.nav li {float: none;}
            }

            .table  { 
                display: table;
                margin-left: auto;
                margin-right: auto;
                text-align: left;
            }
            .tr{ 
                display: table-row; 
                padding: 7px;
            }
            .td{ 
                display: table-cell;
                padding: 7px;
            }
        </style>
    </head>
    <body> 
        <h1 class="profile"> My Appointments </h1>

        <div class ="search" id="browse">
            <p> Find your appointment below or search by keyword</p>

            <form id="" class="searchbar" action="searchAppt.php" method="get">
               <input type="text" name="terms" size="40" class = "sbar" required value="Search by keyword" oninput="validity.valid||(value='');"
                           onblur="if (this.value == '') {
                                        this.value = 'Enter keyword';
                                    }"
                           onfocus="if (this.value == 'Enter keyword') {
                 this.value = '';
             }"/>&nbsp;&nbsp;
                <button type="submit" class = "btn">Search</button>
            </form>
        </div>

        <hr>

        <h2> Future Appointments</h2>

        <p>
            <label> Appointment(s):</label>     
        </p> 

        <?php     
            $sql = "select a.id, a.lname, a.fname, a.phonenum, a.room, a.building, a.issue, a.start_time, a.end_time, a.username 
            from appointments as a
            where a.email = '". $_SESSION['email'] ."' and a.start_time >= NOW()
            ";
            $result = $conn->query($sql);

            if ($result->num_rows > 0) {
                echo "<div class='table'>
                <div class='tr'>
                <div class='td'><b>Ticket #</b></div>
                <div class='td'><b>Username</b></div>
                <div class='td'><b>Building</b></div>
                <div class='td'><b>Issue</b></div>
                <div class='td'><b>Date</b></div>
                <div class='td'><b>Start Time</b></div>
                <div class='td'><b>End Time</b></div>
                <div class='td'></div>
                </div>";
                // output data of each row
                while($row = $result->fetch_assoc()) {
                    $starttimefuture = strtotime($row["start_time"]); //converts date time received from MySQL into a string
                    $endtimefuture = strtotime($row["end_time"]);
                    $datefuture = date("m/d/y", $starttimefuture);
                    $startfuture = date("g:i A", $starttimefuture);
                    $endfuture = date("g:i A", $endtimefuture);
                    $buildingfuture = str_replace('_',' ', $row["building"]);
                    echo "<div class='tr'>
                    <div class='td'>".$row["id"]."</div>
                    <div class='td'>".$row["username"]."</div>
                    <div class='td'>".$buildingfuture."</div>
                    <div class='td'>".$row["issue"]."</div>
                    <div class='td'>".$datefuture."</div>
                    <div class='td'>".$startfuture."</div>
                    <div class='td'>".$endfuture."</div>
                    <div class='td'><form action='ticketdetails.php' method='post'>
                        <input type='hidden' name='id' value='".$row["id"]."'>
                        <input type='submit' value='Ticket Details'></form>
                    </div>
                    </div>";
                }
                echo "</div>";
            } else {
                echo "<p><b>No future appointments!</b></p>";
            }
        ?>

        <hr>
    </body>
</html>

I’ve also cleaned up some of the markup that would be invalid (divs inside labels, etc.).

Please signup or login to give your own answer.

Click here to cancel reply.