asked on

Bootstrap row is not starting on a newline.

Hi Experts,

Bootstrap row is not starting on a newline. It is starting at the end of the first row. Homepage button is not starting at the new row. Please find the html and css below.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 shrink-to-fit=no">
    <!-- Bootstrap CSS -->
	<link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <title>Stolen Generations</title>
  </head>
   <body>
    <div class="banner container-fluid">
<div class="row">
<div class="col-md-12">
<div id="tabs">	
<ul class="nav nav-pills" role="tablist">
    <li class="nav-item">	    
        <a class="nav-link active tab-head" data-toggle="tab" href="#1" id="1" role="tab">
		<div class="detail-content" style="color:rgb(255,255,255);width:130px;text-align:center;margin:0 auto">
		    <div class="number">
			      <h1 style="text-align:center;margin-bottom:25px">1</h1>
			</div>
			Marjorie Foster</br>
			07:48
			
		</div>
		</a>
		
    </li>
    <li class="nav-item">
        <a class="nav-link tab-head" data-toggle="tab" href="#2" role="tab">
		<div class="detail-content" style="color:rgb(255,255,255);width:130px;text-align:center;margin:0 auto">
		    <div class="number">
			      <h1 style="text-align:center;margin-bottom:25px">2</h1>
			</div>
			Barbara Raymond</br>
			04:53
			
		</div>		
		</a>
    </li>
    <li class="nav-item">
        <a class="nav-link tab-head" data-toggle="tab" href="#3" role="tab">
		<div class="detail-content" style="color:rgb(255,255,255);width:130px;text-align:center;margin:0 auto">
		    <div  class="number">
			      <h1 style="text-align:center;margin-bottom:25px">3</h1>
			</div>
			Charlie King</br>
			05:38
		</div>		
		</a>
    </li>
    <li class="nav-item">
        <a class="nav-link tab-head" data-toggle="tab" href="#4" role="tab">
		<div class="detail-content" style="color:rgb(255,255,255);width:130px;text-align:center;margin:0 auto">
		    <div  class="number">
			      <h1 style="text-align:center;margin-bottom:25px">4</h1>
			</div>
			Kathy Mills</br>
			05:22
			
		</div>		
		</a>
    </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
    <div class="tab-pane active tab-data" id="1" role="tabpanel"><p><h3>Marjorie Foster was a child on her mother's hip when she was taken away from the Daly River and placed in the Kahlin Compound. At Kahlin her name was changed, she was assigned a number and she received limited education before being sent out to work as a domestic servant.</br></br>

Centenary of Kahlin Compound, by Miranda Tetlow</br>
Reproduced by permission of the Australian Broadcasting Corporation © 2013 ABC Radio</br>
</h3></p></div>
	
    <div class="tab-pane tab-data" id="2" role="tabpanel"><p><h3>Barbara Raymond grew up in the Kahlin Compound. She tells of the enormous contribution that workers from Kahlin made to the development of Darwin.</br></br>

Centenary of Kahlin Compound, by Miranda Tetlow</br>
Reproduced by permission of the Australian Broadcasting Corporation © 2013 ABC Radio</br>
</h3> </p></div>
	
    <div class="tab-pane tab-data" id="3" role="tabpanel"><p><h3>Charlie King is a well-known radio broadcaster, football commentator and an anti-domestic violence campaigner. Charlie tells his mother’s story about her removal from Limbunya Station to the Kahlin Compound.</br></br>

Centenary of Kahlin Compound, by Miranda Tetlow</br>
Reproduced by permission of the Australian Broadcasting Corporation © 2013 ABC Radio</br>
</h3></p></div>
	
    <div class="tab-pane tab-data" id="4" role="tabpanel"><p><h3>Kathy Mills is a Kungarakan/Gurindji Elder, community activist and recipient of many awards including the Centenary Medal. Her mother was removed from Wave Hill Station and brought into the Kahlin Compound. Kathy has been a tireless advocate for having the history of Kahlin Compound properly recognised.</br></br>

Centenary of Kahlin Compound, by Miranda Tetlow</br>
Reproduced by permission of the Australian Broadcasting Corporation © 2013 ABC Radio</br>
</h3></p></div>	
</div> 


</div> 
</div>
</div>

<div class="row" style="margin:0 auto;text-align:center; width:260px; height:70px">
       <div class="col-md-12" style="display:inline-block">	
         <button class="middle-buttons btn btn-primary-outline" type="button" onclick="location.href='index.html';">
			Homepage  &nbsp;  &nbsp;  &nbsp;  &gt;					
		</button>
		</div>
</div>
</div>

Open in new window

css is

button {
    background: none;
    border: 1px solid white;
    position: relative;
    //left: 150px;
    //top: 80px;
	padding:15px;
}

.banner{
	  background-image: url("../images/stolen-background.png");
	  height:1500px;
	  width:2048px;
	  margin:0 auto;
	  display:flex;
	  justify-content:center;
	  flex-wrap:wrap;
	  flex-direction:row;
	  align-items:center;
	  align-content:center; 
	  align-items:center;	  
}

#tabs {
   margin:0 auto;	
}

tab-pane{
   max-width: 960px;   
}

tab-pane p{
   color:rgb(255,255,255);
}

.tab-data{
	width:1040px;
	height:300px;
	background-color:#E4E2CD;
}
.nav {
	margin: 0 auto;	
}

.nav-pills {
	margin: 0 auto;	
}
	
.nav-item a.active{
	background-color:#E4E2CD;
	margin-bottom:0px;
}

a.active div div.number{
	background-image:url('../images/speaker1.png');
	background-repeat:no-repeat;
	background-color:#E4E2CD;
	background-position:center;	
    margin-bottom:0 px;	
	height:100px;
}

a.active div.detail-content {
	color:grey!important;
	font-weight:bold;
}

.nav-pills .nav-link.active {
	background-color:#E4E2CD;
    width:230px;
    height:230px;
    text-align:center;
    margin:0 auto;	
}

.nav-link{
	width:220px;
	height:210px;
	text-align:center;
	margin:0 auto;
}

.nav-item {
    margin:20px;
	background-color:#9B8C61;
	width:230px;
	height:175px;
	margin: 20 auto!important;
	text-align:center;
}

.tab-pane{
	margin:20px;
}

.number {
	width:100px;
	height:100px;
	margin:0 auto;
	text-align:center;
}

.middle-buttons{
	background-color:transparent;
    color:#CFCDB4;
    border: 2px solid #CFCAB7;
	width:250px;
	height:65px;
    margin : 0 auto;
	font-size:32px;
	text-align:center;	
	vertical-align:middle;
	diplay:inline-block;
}

body, html {
  height: 100%;
}
button {
  background: none;
  border: 1px solid white;
  position: relative;
  paddding:15px;
  display: block;
  margin: 0 auto;
  left: 50%;
  top: 50%;
  transform: translateX(-50%);
}


.blinker {
	-webkit-animation: blink 1s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation: blink 1s;
    -moz-animation-iteration-count: infinite;
    -o-animation: blink 1s;
    -o-animation-iteration-count: infinite;
}

@-webkit-keyframes blink {
    0% {
        opacity: 1;
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@-moz-keyframes blink {
    0% {
        opacity: 1;
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@-o-keyframes blink {
    0% {
        opacity: 1;
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

Open in new window

I am attaching the html and css for reference. Please help me in resolving this issue.

style.css screen2.html

with many thanks,
Bharath AK

SOLUTION

Eddie Shipman

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

coder

ASKER

Hi Eddie,

In the above code there is no closing div for tab-content. it is working fine. But in my code,

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 shrink-to-fit=no">
    <!-- Bootstrap CSS -->
	<link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <title>Stolen Generations</title>
  </head>
   <body>
		<div class="banner container-fluid">
		<div class="row">
            <div class="col-md-12">
				<div id="tabs">	
					<ul class="nav nav-pills" role="tablist">
						<li class="nav-item">	    
							<a class="nav-link active tab-head" data-toggle="tab" href="#1" id="1" role="tab">
							<div class="detail-content" style="color:rgb(255,255,255);width:130px;text-align:center;margin:0 auto">
								<div class="number">
									  <h1 style="text-align:center;margin-bottom:25px">1</h1>
								</div>
								Marjorie Foster</br>
								07:48
								
							</div>
							</a>		
						</li>
						<li class="nav-item">
							<a class="nav-link tab-head" data-toggle="tab" href="#2" role="tab">
							<div class="detail-content" style="color:rgb(255,255,255);width:130px;text-align:center;margin:0 auto">
								<div class="number">
									  <h1 style="text-align:center;margin-bottom:25px">2</h1>
								</div>
								Barbara Raymond</br>
								04:53			
							</div>		
							</a>
						</li>
						<li class="nav-item">
							<a class="nav-link tab-head" data-toggle="tab" href="#3" role="tab">
							<div class="detail-content" style="color:rgb(255,255,255);width:130px;text-align:center;margin:0 auto">
								<div  class="number">
									  <h1 style="text-align:center;margin-bottom:25px">3</h1>
								</div>
								Charlie King</br>
								05:38
							</div>		
							</a>
						</li>
						<li class="nav-item">
							<a class="nav-link tab-head" data-toggle="tab" href="#4" role="tab">
							<div class="detail-content" style="color:rgb(255,255,255);width:130px;text-align:center;margin:0 auto">
								<div  class="number">
									  <h1 style="text-align:center;margin-bottom:25px">4</h1>
								</div>
								Kathy Mills</br>
								05:22
								
							</div>		
							</a>
						</li>
					</ul>


					<div class="tab-content">
						<div class="tab-pane active tab-data" id="1" role="tabpanel"><p><h3>Marjorie Foster was a child on her mother's hip when she was taken away from the Daly River and placed in the Kahlin Compound. At Kahlin her name was changed, she was assigned a number and she received limited education before being sent out to work as a domestic servant.</br></br>

						Centenary of Kahlin Compound, by Miranda Tetlow</br>
						Reproduced by permission of the Australian Broadcasting Corporation © 2013 ABC Radio</br>
						</h3></p>
						</div>
	
						<div class="tab-pane tab-data" id="2" role="tabpanel"><p><h3>Barbara Raymond grew up in the Kahlin Compound. She tells of the enormous contribution that workers from Kahlin made to the development of Darwin.</br></br>

						Centenary of Kahlin Compound, by Miranda Tetlow</br>
						Reproduced by permission of the Australian Broadcasting Corporation © 2013 ABC Radio</br>
						</h3> </p>
						</div>
	
						<div class="tab-pane tab-data" id="3" role="tabpanel"><p><h3>Charlie King is a well-known radio broadcaster, football commentator and an anti-domestic violence campaigner. Charlie tells his mother’s story about her removal from Limbunya Station to the Kahlin Compound.</br></br>

						Centenary of Kahlin Compound, by Miranda Tetlow</br>
						Reproduced by permission of the Australian Broadcasting Corporation © 2013 ABC Radio</br>
						</h3></p>
						</div>
	
						<div class="tab-pane tab-data" id="4" role="tabpanel"><p><h3>Kathy Mills is a Kungarakan/Gurindji Elder, community activist and recipient of many awards including the Centenary Medal. Her mother was removed from Wave Hill Station and brought into the Kahlin Compound. Kathy has been a tireless advocate for having the history of Kahlin Compound properly recognised.</br></br>

						Centenary of Kahlin Compound, by Miranda Tetlow</br>
						Reproduced by permission of the Australian Broadcasting Corporation © 2013 ABC Radio</br>
						</h3></p>
						</div>	
					</div> 
				</div>

			</div> 
		
		</div>
		<div class="row" style="margin:0 auto;text-align:center; width:260px; height:70px">
			<div class="col-md-12">
			   <div class="col-md-12" style="display:inline-block">	
				 <button class="middle-buttons btn btn-primary-outline" type="button" onclick="location.href='index.html';">
					Homepage  &nbsp;&gt;					
				</button>
				</div>
			</div>
		</div>
	</div>






		<script src="js/jquery-3.3.1.min.js"></script>
		<script src="js/popper.min.js"></script>
		<script src="js/bootstrap.min.js"></script>	
		<script> 
     $(function() {		  
		  $("a.active").find("h1").hide();
		  var adio;
		  adio = document.createElement('audio');
		  adio.src = "audio/Stolen - Audio - Marjorie Foster.mp3";
		  adio.pause;
		  adio.currentTime = 0;
		  adio.play();
		  adio.autoplay;
		  $("a.active div div").addClass("blinker");
		  
		  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {			    
			$("a.active").find("h1").hide();
			$("a:not(.active)").find("h1").show();
			switchAudio();
			$("a.active div div").addClass("blinker");
		  })
    
		  function switchAudio()
		  {
			var num = $("a.active").find("h1").text();
			stopAudio();      
			switch(num) {
			  case "1":				
				adio.src = "audio/Stolen - Audio - Marjorie Foster.mp3";				
				break;
			  case "2":				
				adio.src = "audio/Stolen - Audio - Barbara Raymond.mp3";				
				break;
			  case "3":				
				adio.src = "audio/Stolen - Audio - Charlie King.mp3";				
				break;
			  case "4":				
				adio.src = "audio/Stolen - Audio - Kathy Mills.mp3";				
				break;
			}
			adio.play();
		  }  
		  

		  function stopAudio(){
			console.log("stop audio");
			adio.pause;
			adio.currentTime = 0;			
			$("a.active").find("h1").hide();
			$("a:not(.active)").find("h1").show();
			$("a div div").removeClass("blinker");
		  }
  
		  adio.onended = function() {
			$("a.active div div").removeClass("blinker");        
		  }
		  
		  $("a.active").find("h1").hide();	
		  $("#1").trigger("click");		  
	});	
</script>	
	</body> 
 </html>

Open in new window

It is not working properly. I feel all div tags are properly closed. But not working properly Please correct me where I am wrong.

With Many thanks,
Bharath AK

SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

Eddie Shipman

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

coder

ASKER

Hi,

I am using bootstarp 4, I will test this today and get back to you.

With Many thanks,
Bharath AK

coder

ASKER

Hi ,

I got my problem resolved. Now it is working fine. I had changed the background image which was having high resolution, with proper resolution file. Now it is working fine.

With Many thanks,

Bharath AK