resizing bootstrap accordion - html

Question

I have a section of a site that uses an h2, followed by an accordion. I am trying to have the accordion and h2 pull-left, however the accordion is the wrong size, unless it is expanded in which it enlarges itself. I have a sidebar column set up as so: <div class="col-md-3">
thus I want the h2, and accordion to be to the right of that but take up the full screen on the right of that. My accordion and h2 is set up as follows:
<div class="col-md-9 pull-right">
<div class="panel-body">
<h2 class="page-header col-md-9 pull-left">Action Strategies: What We Can Do Now</h2>
<div class="panel-group col-md-9 pull-left" id="accordion">
with each panel like so:
<!-- /.panel -->
<div class="panel panel-default">
<div class="panel-heading teachers">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Teachers and Support Staff</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<!-- content -->
</div>
</div>
</div>

Answer 1

As I understood your problem, pull-right is causing it. Please see the attached snippets if this is was you need.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="col-md-3">
<h3>Sidebar</h3>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro esse officiis ipsa, placeat praesentium laborum rerum iste aspernatur omnis ratione exercitationem eligendi. Soluta id ipsa nisi ex! Cumque, voluptatum laudantium hic, ea cum, vitae aperiam expedita delectus autem iusto nam voluptatem dolorum fugiat? Laudantium minima, eos eius harum voluptatem error!</div>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<h2 class="page-header col-md-9 pull-left">Action Strategies: What We Can Do Now</h2>
</div>
</div>
<div class="panel-group " id="accordion">
<div class="panel panel-default">
<div class="panel-heading teachers">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse1">Teachers and Support Staff 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos architecto atque nemo nisi explicabo dolor. Magni perferendis modi vero pariatur officia consectetur, vitae id. Aspernatur officia nam ipsum ea dolorum laborum error maxime quidem provident rerum facere eum, unde? Ducimus quos provident adipisci, odit porro itaque eligendi beatae obcaecati tenetur minima officiis libero, nesciunt quidem autem ex cupiditate ratione veniam repellat est consequuntur quibusdam aut suscipit at. Provident quod, dolor quae incidunt vitae non neque, molestiae minus veritatis deleniti eligendi laboriosam blanditiis nostrum eum quia qui voluptas nemo expedita aliquam dolorum nihil. Quas dolor neque voluptatibus quos optio reprehenderit, impedit?
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading teachers">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse2">Teachers and Support Staff 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ex laboriosam libero suscipit natus, voluptatibus, perferendis eos omnis impedit minima fugit a ipsum ipsa rem numquam placeat provident magnam asperiores mollitia vero magni laudantium pariatur. Obcaecati error rem dolor itaque quidem eligendi, voluptas vero voluptatem, labore adipisci perferendis quia velit reiciendis illo libero optio. Aliquam autem labore voluptas veritatis praesentium, in a tempore accusamus error ad laboriosam omnis consequuntur, pariatur dolor voluptates dolores vel. Repellat animi tenetur expedita nobis est a natus hic adipisci eligendi aliquam quo minus, dolorum nihil provident odit delectus suscipit omnis nostrum quod magni, voluptatum. Laboriosam!
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading teachers">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse3">Teachers and Support Staff 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, voluptatem, itaque cumque dolorem dicta eveniet porro voluptatibus unde ad nostrum est accusantium veniam, iste natus incidunt quis consectetur quod placeat deserunt corporis veritatis quidem! Eaque facilis quasi, rem reiciendis! Voluptatibus quasi, necessitatibus repellendus impedit, fugit minima vero eius, perferendis dignissimos vel nulla velit! Error commodi veniam maxime reprehenderit aut sint voluptatem id culpa autem corrupti optio expedita blanditiis odit dolorem obcaecati vitae delectus ea necessitatibus beatae laboriosam aliquid, eos eveniet nobis quos quidem? Quia itaque dicta quasi perferendis earum, fuga illo aperiam architecto nisi iure suscipit omnis esse facilis, saepe.
</div>
</div>
</div>
</div>
</div>
</div>
</div>