Question posted in 
I am creating a page for my University website which only allows me to edit or create pages within the scope of a content management system. So basically, the template remains fixed within which I can insert my html code. So I created a responsive page using bootstrap but the content is going out of bound (without scrolling). I tried fixing the container width but didn’t help. The page is working perfectly independently i.e when I run it as independent html file without the cms.
The nav works fine but the content in the container div doesn’t.
Here is the link to the page:
Boostrap Page in CMS
Here’s the code:
<!DOCTYPE html>
<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">
<title>Home Page | Pediatrics Research | UIC College of Medicine | </title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<style>
b, h3{
color: #336699;
}
.navbar {
background-color: rgb(31, 73, 125);
}
.navbar-default .navbar-nav > li >a{
color:white;
}
.navbar-default .navbar-brand {
color: white;
}
.navbar-default .navbar-brand:hover{
color: white;
}
.navbar-default .navbar-nav > li >a:hover{
color:white;
text-decoration: underline;
}
@media (min-width: 767px) {
.affix,.affix-top {
position:fixed;
}
}
.navbar-collapse ul{
margin-left: 10%;
}
#sidebar {
background-color: lightgrey;
}
ul#sidebar {
padding: 25px;
}
div#profile-right {
border-left: solid 3px red;
}
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">UIC Pediatrics</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Research</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false" href="#">Our Partners <span class="caret"></a>
<ul class="dropdown-menu">
<li><a href="#">Basic Research</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Clinical Trials</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Epidemiology Research</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Health Promotion Research</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Health System Redesign</a></li>
</ul></li>
<li><a href="#">Work With Us</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" id="sidenav">
<ul id="sidebar" class="nav nav-stacked">
<li><a href="#">Our Researchers</a></li>
<li><a href="#">Pediatrics - 1</a></li>
<li><a href="#">Pediatrics - 1</a></li>
<li><a href="#">Pediatrics - 1</a></li>
<li><a href="#">Pediatrics - 1</a></li>
<li><a href="#">Pediatrics - 1</a></li>
</ul>
</div>
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
<div class="row">
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<h2>Marian L. Fitzgibbon, PhD </br> <small>Professor of Pediatrics and Health Policy and Administration</small></h2>
<p><b>Contact Info</b></br>
Phone: (312) 996-0146 </br>
Fax: (312) 413-8950 </br>
E-mail: <a href="mailto:[email protected]">[email protected]</a> </br>
On Twitter: <a href="https://twitter.com/SBMPresident">@SBMPresident</a> </br>
<b>Institute for Health Research and Policy</b> </br>
University of Illinois at Chicago (MC 275) </br>
486 Westside Research Office Bldg. </br>
1747 West Roosevelt Road </br>
Chicago, IL 60608
</p>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<img src="http://www.ihrp.uic.edu/files/mlf2015-150X200.png" class="img-thumbnail" alt="Marian L. Fitzgibbon, PhD" style="width=50px;height=70px"/>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<h3>Profile</h3>
<p>
</p>
<h3>Research Interests</h3>
<p>
</p>
<h3>Recent and Noteworthy Publications</h3>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" id="profile-right">
</div>
</hr>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
2
Answers
Try this :
your .row has custom css added which is causing the problem
So you need to replace this class row in the content section with
col-xs-12 col-sm-12 col-md-12 col-lg-12. Basically this class will give a 100% full width condition .