So i have a following structure in my html
<div container>
<div row>
<div col-3></div>
<div col-9>
<div row>
-<div col #problem here></div>
-<div col #problem here></div>
</div>
</div> -closing column col-9
</div> - closing row
</div> - closing container
As you can see i have one row nested inside another row, and then in that inside row i have two more columns (trying to divide that col-9 into more cols)
Problem is,for some reason the inside columns instead of being next to one another go underneath, and both act like they are col 12 in the row and take up the whole 100% of that col-9.
(Im trying to have input and button on the same line)
Thanks in advance
UPDATE: No, haha, i didn't forget the class attributes and how they work. I just didn't include them while typing the code here for the question. Like i said, its just the structure. or my code. If needed ill copy and paste the code exactly, but its quite lengthy
UPDATE CODE HERE:
<div class="container">
<div class="row">
<!-- ####################################################### NAV BAR ###########################################################-->
<div class="col col-md-3"> <!-- havbar div -->
<ul class="nav nav-pills nav-stacked admin-menu">
<li class="nav-item"><a class="nav-link active" id="home-tab" data-toggle="tab" onclick="openContent(event, 'home')" role="tab" aria-controls="home" aria-selected="true"><i class="fa fa-home fa-fw"></i>Home</a></li>
<li class="nav-item"><a class="nav-link active" id="profile-tab" data-toggle="tab" onclick="openContent(event, 'profile')" role="tab" aria-controls="profile" aria-selected="false"><i class="fa fa-list-alt fa-fw"></i>Profile</a></li>
<?php if ($super_admin == 1) echo '<li class="nav-item"><a class="nav-link active" id="addstaff-tab" data-toggle="tab" onclick="openContent(event, \'add_staff\')" role="tab" aria-controls="add_staff" aria-selected="false"><i class="fa fa-cogs fa-fw"></i>Add Staff Member</a></li>'?>
<li class="nav-item"><a class="nav-link active" id="settings-tab" data-toggle="tab" onclick="openContent(event, 'settings')" role="tab" aria-controls="settings" aria-selected="false"><i class="fa fa-cogs fa-fw"></i>Settings</a></li>
<li class="nav-item"><a href="logout.php" data-target-id="Logout"><i class="fa fa-cogs fa-fw"></i>Log Out</a></li>
</ul>
</div>
<!-- END OF NAVBAR -->
<div class="tab-content col-md-9 well admin-content"><!-- content div -->
<!-- ######################################################3################# HOME CONTENT ########################################################################################-->
<div id="home" class="tab_content">
<?php echo "<h1>Welcome " . $_SESSION['firstName'] . "!</h1>"?>
<div class="search">
<!-- Displays a text box to search for participant -->
<form action="">
<input type="text" id="participant" placeholder="Search for participant" onkeyup="showHint(this.value)">
<!-- <div id="suggestions"></div>-->
</form>
<br><br>
<!-- Displays possible participants (hints) -->
<p>Suggestions: <span id="txtHint"></span></p>
<script>
function showHint(str){
var xhttp;
if(str.length == 0){
document.getElementById("txtHint").innerHTML = "";
return;
}
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
if(xhttp.readyState == 4 && xhttp.status == 200){
document.getElementById("txtHint").innerHTML = xhttp.responseText;
// document.getElementById("suggestions").style.border="1px solid #A5ACB2";
}
};
xhttp.open("GET", "getparticipants.php?q=" + str, true);
xhttp.send();
}
</script>
<div class="col col-2"></div>
<div class="col col-8 table_div"><table class="table">
<?php
//table header
echo '
<thread>
<tr>
<th scope="col" align="center">ID</th>
<th scope="col" align="center">Name</th>
<th scope="col" align="center">Email</th>
</tr>
</thread>
<tbody>';
//Fetch and print all the records:
while ($row = mysqli_fetch_array($r, MYSQLI_ASSOC))
{
echo
'<tr>
<td align="center">' . $row['id'] . '</td>
<td align="center"><a class="client_name" href="client_profile_overview.php">' . $row['name'] . '</a></td>
<td align="center">' . $row['email'] . '</td>
<td align="center"><button type="button" class="btn btn-default btn-sm view_profile_btn" id="view_profile_btn">View Profile</button></td>
</tr>';
}
//close the table and free up the resources.
echo '</tbody></table>';
?>
</div>
</div>
</div>
<!-- ######################################################3################# PROFILE CONTENT ########################################################################################-->
<div id="profile" class="tab_content">
<h3>Profile</h3>
</div>
<!-- ######################################################3################# ADD STAFF CONTENT ########################################################################################-->
<div id="add_staff" class="tab_content">
<h3>Add Staff Member</h3>
<p>Enter Staff ID Number to be added to the System.</p>
<div class="row">
<form action="" method="post">
<div class="col col-5 float-left">
<input type="text" name="add_staff" id="staff_id_input" placeholder="New Staff ID">
</div>
<div class="col col-2 float-right">
<button class="btn btn-info" type="submit">Add</button>
</div>
</form>
</div>
</div>
</div>
<!-- ######################################################3################# Settings CONTENT ########################################################################################-->
<div id="settings" class="tab_content">
<h3>Settings</h3>
</div>
</div>
</div>
