I had created asection with multiple columns. Now, I wish to start a new row, so I created a new container as well. But when I run the file, the new row is not added. Instead, another column is being made. Can anyone help me in debugging this code.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Gaegu" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Maven+Pro" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Patrick+Hand" rel="stylesheet">
<title> Techversity </title>
<style type="text/css">
* {
box-sizing: border-box
}
body {
font-family: "Lato", sans-serif;
}
/* Style the tab */
.tab {
float: left;
background-color: #e7e7e7;
width: 20%;
height: 700px;
border-top: 1px solid #ccc;
}
/* Style the buttons inside the tab */
.tab button {
display: block;
background-color: #e7e7e7;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current "tab button" class */
.tab button.active {
background-color: white;
border: none;
border-top: black solid;
border-color: grey;
}
/* Style the tab content */
.tabcontent {
float: left;
padding: 0px 12px;
width: 80%;
border: none;
height: 700px;
background-color: #e7e7e7;
}
.nav-item:hover {
background-color: rgba(0, 0, 0, 0.08);
}
#community-col {
height: 300px;
}
#mission-contact:hover {
border-color: white;
border-radius: 5px;
}
@media (min-width: 800px) {
.para-padding {
padding-left: 120px;
padding-right: 120px;
}
}
@media (max-width: 800px) {
.tabcontent {
height: 800px;
}
.tab {
height: 800px;
}
}
@media (max-width: 600px) {
.tab {
height: 300px;
width: 100vw;
}
#contact-mission {
width: 5px;
}
.tabcontent {
width: 100vw;
}
}
@media (max-width: 800px) {
#community-mission-image {
display: none;
}
#community-mission-image-2 {
display: inline;
}
}
@media (min-width: 600px) {
#hidetabs {
display: none;
}
}
@media (max-width: 1023px) {
#design-mission-image {
width: 100px;
}
@media (min-width: 1150px) {
#design-mission-image {
min-width: 300px;
}
</style>
<script>
$(document).ready(function() {
$("#hidetabs").click(function() {
$(".tab").hide(300);
$("#showtabs2").show(300);
});
});
$(document).ready(function() {
$("#showtabs").click(function() {
$(".tab").show(300);
});
});
$(document).ready(function() {
$("#showtabs2").click(function() {
$(".tab").show(300);
$("#showtabs").hide();
$("#showtabs2").hide();
$("#hidetabs").show();
});
});
</script>
</head>
<body class="sidebar-collapse">
<div class="tab" id="test">
<br>
<br>
<center>
<h2><i id="showtabs" class="fa fa-diamond" style="display: none;"></i><i id="hidetabs" class="fa fa-gear"></i></h2>
</center>
<center>
<p style="font-family: 'Gaegu', cursive;"></p>
</center>
<button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen" style="font-family: 'Maven Pro', sans-serif;">Design</button>
<button class="tablinks" onclick="openCity(event, 'Paris')" style="font-family: 'Maven Pro', sans-serif;">Community</button>
<button class="tablinks" onclick="openCity(event, 'Tokyo')" style="font-family: 'Maven Pro', sans-serif;">Development</button>
</div>
<div id="London" class="tabcontent">
<br>
<br>
<section id="services">
<header class="section-header wow fadeInUp">
<h1><i id="showtabs2" class="fa fa-diamond" style="display: none;"></i>
<center>
<p style="font-family: 'Gaegu', cursive;">f8guo</p>
</center>
</h1>
</header>
<br>
</section>
<div class="container">
<div class="row">
<div class="col-md-8">
<center>
<ul class="nav nav-pills">
<li class="nav-item" style="width: 30%">
<a href="" class="active nav-link" data-toggle="pill" data-target="#tabone">bjkjk</a>
</li>
<li class="nav-item" style="width: 30%">
<a class="nav-link" href="" data-toggle="pill" data-target="#tabtwo">fyfo</a>
</li>
</ul>
</center>
<div class="tab-content mt-2">
<div class="tab-pane fade show active" id="tabone" role="tabpanel">
<p class="development-tab-content">
<center>
<h3>
<i class="fa fa-diamond"></i>
</h3>
</center>
</p>
<p style="font-size: 20px;font-family: arial;">ri guibypyionoytfrxrexxe6r7ct78yunuuinbyvftrcreerzqxwtceytibyouiuonuununiuiyvrrcrctubtybuoyoboy8byuytvvttv
<br>
</p>
<br>
<br>
<br>
<center><a href="#" id="contact-mission" class="btn btn-outline-primary" style="font-size: 22px;width: 300px;outline-width: 50px;height: 50px">Contact</a></center>
</div>
<div class="tab-pane fade" id="tabtwo" role="tabpanel">
<center>
<h3>
<i class="fa fa-diamond"></i>
</h3>
</center>
<p style="font-size: 20px;font-family: arial;">hdsyhfuihiucxhiviuszhpuoidgashoihofdiihuaugeffuhfioiohiohiohgfsoufgufguffgufgosfuoisfousfdhofshosgfhheefhhefhevr uereru0eue0e90ru r</p>
<br>
<br>
<br>
<center><a href="#" id="contact-mission" class="btn btn-outline-primary" style="font-size: 22px;width: 300px;outline-width: 50px;height: 50px;font-family: 'Pacifico', cursive;">Contact</a></center>
</div>
</div>
</div>
<div class="col-md-4">
<center>
<br>
<br>
<br><img src="images/webdesign.svg" id="design-mission-image" style="object-fit: scale-down;width: 190px;padding-top: 35px;overflow: hidden;">
</center>
</div>
</div>
</div>
<div id="Paris" class="tabcontent">
<br>
<br>
<section id="services">
<header class="section-header wow fadeInUp">
<center>
<h1>MISSION</h1>
</center>
</header>
<br>
</section>
<div class="row" id="community-row">
<div class="col-md-12" id="community-col">
<h3>
<center>
<p>gsdgrr</p>
</center>
</h3>
<p style="font-size: 20px;font-family: arial;margin-left: 30px;margin-right: 30px;" class="para-padding">I j[pjigihdfhighihofojs0daidsa0isda0af0dihfihsiha0finvfzfkob
<br>
<br>hifapifhdsodspofhIfdhihidfhhfidhfdvkjkjugofbovxhbuvobbvbouobupfvbpbpfvbibfiubiuvfvdhohovnighivingr g vrnun90ecun09enuxdhinxhfchfhinncifnicfnicf
</p>
<br>
</div>
</div>
</div>
<div id="Tokyo" class="tabcontent">
<br>
<br>
<section id="services">
<header class="section-header wow fadeInUp">
<center>
<h1>MISSION</h1>
</center>
</header>
<br>
</section>
<div class="row" id="community-row">
<div class="col-md-12" id="community-col">
<h3>
<center>
<p>Development</p>
</center>
</h3>
<br>
<p style="font-size: 20px;font-family: arial;margin-left: 30px;margin-right: 30px;" class="para-padding">ucfiuiyivhvjhcdtyfuuguilo;gggggggohkvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvhllllllllvlihhhhhhhhhhhhhh
<br>
<br> tkuffyuooot87cghkcgkcggggggggggggggggggggggggggg
</p>
<br>
<br>
</div>
</div>
</div>
</div>
<br>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>
<div class="col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>
</div>
</div>
</body>
</html>How can I make the data appear in a new row below the previous one? Any help will be apreciated! Thanks in advance!
I think your problem lies in mixing up different Bootstrap versions. Change the links to Bootstrap 4 in your <head> to Bootstrap 3 and your last row appears below, instead of to the right:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Also, you have a link to both Bootstrap.js versions 3.3.7 and 4.0.0 in your head, so one of them should be removed anyway.
Besides that, your last two media queries are missing a closing bracket:
@media (max-width: 1023px) {
#design-mission-image {
width: 100px;
}
}
@media (min-width: 1150px) {
#design-mission-image {
min-width: 300px;
}
}
And there are a lot of things going on in your code that you might want to clean up, like inline styling, empty tags and <br>s. Break down your code to the bare minimals, and it will be a lot easier to find any problems.