<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <h1>Bootstrap 3 Variable-Width Modal</h1> <p>I wanted to override the default Bootstrap modal so it's variable-width, and height-optimized.</p> <p>Add "modal-wide" to the main modal div, and adjust the width in the CSS. In this example, I'm using 90%.</p> <p>Since I'm using jQuery to set the max-height of the content area based on the browser dimensions, the modal will be only as tall as necessary, and will provide a scrollbar if needed.</p> <a data-toggle="modal" href="#1Modal" class="btn btn-info">More</a> <a data-toggle="modal" href="#2Modal" class="btn btn-info">More</a> <div id="1Modal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">webmaster</h4> </div> <div class="modal-body"> <h1>Here is we what do!</h1> <li>Maintain websites for clients and businesses.</li><br> <li>Ensure the web servers, hardware and software are operating accurately.</li><br><li>Design websites.</li><br> <li>Generate and revise web pages.</li><br> <li>Lay out content on web pages.</li><br> <li>Generate and revise web pages.Deal with and respond to heavy volumes of email.></li><br> <li>Test websites to see if there are any parts that are difficult to use.</li><br> <li>Fix links that don't work and pictures that aren't appearing properly.</li><br><li> Keep files small so sites load faster.</li><br> <li>Test different browsers and ensure people with different computers can access a website.</li><br> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <div id="2Modal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Administrator</h4> </div> <div class="modal-body"> <h3>Growing your business or have a need to delegate a task?</h3> <p>We are client-focused, and provide high-quality freelance executive assistance to clients all around the world. All projects are given our undivided attention to detail. We deliver high-quality work with little to no supervision.</p> <p>Administrative Assistance Provided via reliable internet connection are:</p> <li>Responding to emails and phone calls</li> <li>Scheduling meetings</li> <li>Booking travel accommodations</li> <li>Manage calendar</li> <li>Market research</li> <li>Web communication: Skype, TeamViewer, GoToMeeting, etc.</li> <li>Prepare presentations and other comprehensive documents</li> <p>Hire us, we deliver excellent virtual, assistance services remotely efficiently and cost effectively Get started now </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <a data-toggle="modal" href="#3Modal" class="btn btn-info">More</a> <div id="shortModal" class="modal modal-wide fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">My Resume</h4> </div> <div class="modal-body"> <div id="intro" class="container-fluid"> <h1><center><font face="WildWest" size="7">My Resume</font> </center></h1> <span style="color:gray"></span> <hr size="3" ; width="75%"> <br> <p class="rad" style="text-align: center; text-indent: 0in; background-color: #f4511e;" align="center"><big style="color: white;"><big>Professional Application Developer</big></big> </p> <h2><strong><center>Skils I can rely on</center></strong></h2> <h4><Strong>2015 - Present Student at the Stride Center: </Strong> Certified Web Developer</h4> <ul><li>Front-end web development: HTML, CSS, JavaScript</li><br/> <li>jQuery</li><br/> <li>Back-end web development: </li><br/> <li>Experienced with HTML, CSS SCSS - Web page development using images, hyperlinks, tables, forms and frames etc</li><br/> <li>Familiar with ruby and ruby on rails</li><br/> <li>Able to work remotely and independently</li><br/> <li>Manual code writing, graphical user interface (GUI) authoring tools, and XHTML code validation</li><br/> <li>Web page content, and fundamental Web design concepts, Cascading Style Sheets (CSS) for formatting</li><br/> <li>Familiar with Ruby, JavaScript, PHP, HTML CSS and SCSS, GitHub, Cloud9 BitBucket</li> <br/> <li>Familiar to WordPress</li><br/> <li>CGI and connecting Web pages to databases</li><br/> <li>Internet marketing and search engine optimization (SEO) </li><br/> <li>Web page content, and fundamental Web design concepts, Cascading Style Sheets (CSS) for formatting </li><br/> <li>Development of Web sites as managed projects</li><br/> <li>Application Programming Interfaces (APIs)</li><br/></ul> <h4><strong>Administrative Skills</strong></h4> <ul><li>7 years as a Legal Secretary/Paralegal </li><br/> <li>Proficient in Microsoft Office Suite Outlook, WordPerfect and Adobe Photoshop</li><br/> <li>Effective communicator, strong interpersonal skills - motivated, driven and results oriented</li><br/> <li>Excellent presentation, negotiation, and closing skills</li><br/></ul> <h5><Strong>2015 Meeting Of The Mines Hackathon: </Strong> Grand Prize winners</h5> <ul>As the project manager, I utilize my administrative and management skills to direct our team to the finals. Winning over a group of students from UC Berkeley was the fuel we all needed to keep it pushing. </ul><br/> <h2><strong><center>Education</center></strong></h2> <ul> <li>2016 - Present: <a href="http://www.codecademy.com">Code Academy</a></li> <li>2017 - Present: <a href="http://www.freecodecamp.org">FreeCodeCamp.org</a></li> <li>2015 - 2016: The Stride Center - CIW - Cite Development Associate Certificaite, CompTIA Securities Plus</li> <li> 1977 San Francisco State University</li> <li> San Francisco city College</li> <li> Barclays Career College - Paralegal Certificate</li> <li> Fred Sands Real Estate School - Real Estate Broker</li></ul> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </div> </div> </div>

.modal.modal-wide .modal-dialog { width: 90%; } .modal-wide .modal-body { overflow-y: auto; } .modal-wide .modal-body { overflow-y: auto; } /* irrelevant styling */ body { text-align: center; } body p { max-width: 400px; margin: 20px auto; } #tallModal .modal-body p { margin-bottom: 900px }

// when .modal-wide opened, set content-body height based on browser height; 200 is appx height of modal padding, modal title and button bar $(".modal-wide").on("show.bs.modal", function() { var height = $(window).height() - 200; $(this).find(".modal-body").css("max-height", height); });