CODEWITHSUNDEEP
htmltwitter-bootstrap
Jonas
Jonas

Reputation: 111

Bootstrap collapse divs in one row

I want to have a collapsible div in my bootstrapped grid. There will be 2-4 buttons per row. But if I press on button Video 1, the following buttons get displaced in the next row. The expanding text in the div has to be between the two rows of buttons, not at the bottom of all. I know that I can use a simple table (tried this, it works); but it has to be responsive and use a database.

Any ideas how to modify the bootstrap grid to suppress the button replacement?

<div class="container">
  <div class="row">
    <div class="col-xs-3">
	  <a href="#video1" class="btn btn-info" data-toggle="collapse">Video 1</a>
	</div>
			
    <div id="video1" class="collapse">
	  <div class="row">
	    <div id="Content1" class="col-xs-6">
		  <p>Video 1 Gelb</p>
		</div>
		<div id="Content2" class="col-xs-6">
          <p>Video 1 Rot</p>
		</div>
	  </div>
	</div>

    <div class="col-xs-3">
	  <a href="#video2" class="btn btn-info" data-toggle="collapse">Video 2</a>
	</div>
    
    <div id="video2" class="collapse">
	  <div class="row">
	    <div id="Content1" class="col-xs-6">
		  <p>Video 2 Gelb</p>
		</div>
		<div id="Content2" class="col-xs-6">
          <p>Video 2 Rot</p>
		</div>
	  </div>
	</div>

Upvotes: 1

Views: 2720

Answers (1)

Eliezer Wohl
Eliezer Wohl

Reputation: 607

I'm not sure exactly what you're going for. If you want them all in the same row, you have to keep in mind that the bootstrap grid system is 12 across. Any more and it will push it below (which is whats causing your current issue).

Do you mean" between the two columns of buttons" instead of "two rows of buttons"?

I came up with a solution as best I could. Everything stays on the same line.

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">

  </head>

  <body>

   <div class="container">
  <div class="row">
	  <div class="col-xs-6">
	    <div class="col-xs-4">
		  	<a href="#video1" class="btn btn-info" data-toggle="collapse">Video 1</a>
			</div>
			<div id="video1" class="collapse">
	    	<div id="Content1" class="col-xs-4">
		  		<p>Video 1 Gelb</p>
				</div>
				<div id="Content2" class="col-xs-4">
	        <p>Video 1 Rot</p>
				</div>
			</div>
		</div>
		<div class="col-xs-6">
	    <div class="col-xs-4">
		  	<a href="#video2" class="btn btn-info" data-toggle="collapse">Video 2</a>
			</div>
	    <div id="video2" class="collapse">
	    	<div id="Content1" class="col-xs-4">
		  		<p>Video 2 Gelb</p>
				</div>
				<div id="Content2" class="col-xs-4">
	        <p>Video 2 Rot</p>
				</div>
			</div>
		</div>
	</div>
    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
  </body>
</html>

Upvotes: 1

Related Questions