Twitter Bootstrap Question posted in

Right Column not perfectly aligned – Twitter bootstrap

I’m creating a lms for a project,

But the problem is the Calendar is not properly horizonatly aligned. It’s kind of aligned middle of the screen. I want it to push right corner but it is not happening at the moment.

I’m using Bootstrap.

Here’s CODEPEN link 

$(function() {
    $('#nav-wrapper').height($("#nav").height());
    
    $('#nav').affix({
        offset: { top: $('#nav').offset().top }
    });
});
#nav.affix {
    position: fixed;
    top: 0;
    width: 100%
}

#nav > .navbar-inner {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
}

body{
	margin:0;
	padding:0;
	
	
}

.nav-sidebar { 
    width: 100%;
    padding: 0px 0; 
   /* border: 1px solid #ddd; */
}
.nav-sidebar a {
    color: #333;
    -webkit-transition: all 0.08s linear;
    -moz-transition: all 0.08s linear;
    -o-transition: all 0.08s linear;
    transition: all 0.08s linear;
    -webkit-border-radius: 4px 0 0 4px; 
    -moz-border-radius: 4px 0 0 4px; 
    border-radius: 4px 0 0 4px; 
}
.nav-sidebar .active a { 
    cursor: default;
    background-color: #428bca; 
    color: #fff; 
    text-shadow: 1px 1px 1px #666; 
}
.nav-sidebar .active a:hover {
    background-color: #428bca;   
}
.nav-sidebar .text-overflow a,
.nav-sidebar .text-overflow .media-body {
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis; 
}

/* Right-aligned sidebar */
.nav-sidebar.pull-right { 
    border-right: 0; 
    border-left: 1px solid #ddd; 
}
.nav-sidebar.pull-right a {
    -webkit-border-radius: 0 4px 4px 0; 
    -moz-border-radius: 0 4px 4px 0; 
    border-radius: 0 4px 4px 0; 
}

.center_row{
	
	 max-width: 800px;
	    margin-top: -30px;
  margin-left:25px;
    margin-right: 150px;
  color:#428bca;
  text-transform: capitalize;
}

.left-side{
	float:right;	
}

.navbar > .container {width:auto;}






* {box-sizing:border-box;}
ul {list-style-type: none;}
body {font-family: Verdana,sans-serif;}

.month {
    padding: 70px 25px;
    width: 100%;
    background: #428bca;
}

.month ul {
    margin: 0;
    padding: 0;
}

.month ul li {
    color: white;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.month .prev {
    float: left;
    padding-top: 10px;
}

.month .next {
    float: right;
    padding-top: 10px;
}

.weekdays {
    margin: 0;
    padding: 10px 0;
    background-color: #ddd;
}

.weekdays li {
    display: inline-block;
    width: 13.6%;
    color: #666;
    text-align: center;
}

.days {
    padding: 10px 0;
    background: #eee;
    margin: 0;
}

.days li {
    list-style-type: none;
    display: inline-block;
    width: 13.6%;
    text-align: center;
    margin-bottom: 5px;
    font-size:12px;
    color: #777;
}

.days li .active {
    padding: 5px;
    background: #428bca;
    color: white !important
}

/* Add media queries for smaller screens */
@media screen and (max-width:720px) {
    .weekdays li, .days li {width: 13.1%;}
}

@media screen and (max-width: 420px) {
    .weekdays li, .days li {width: 12.5%;}
    .days li .active {padding: 2px;}
}

@media screen and (max-width: 290px) {
    .weekdays li, .days li {width: 12.2%;}
}
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="index.js"></script> 
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
   <script src="  http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css"></script>
</head>


<body>
<!---FIXED NAV BAR START --->
<nav class="navbar navbar-fixed-top navbar-default" role="navigation" container="false">
  <div class="container">    
    <div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsable">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a href="#" class="navbar-brand">
  <img src="aaa.gif" class="img-responsive" alt="Cinque Terre" width="70" height="35">
</a>
</div><div class="collapse navbar-collapse" id="navbar-collapsable">  
<ul class="nav navbar-nav navbar-right">
<p class="navbar-text">Logged in as Some Person</p>
<li>
  <a href="/log_out">
    Log out
  </a>
</li>

</ul>
</div>
</div>
</nav>
<!---FIXED NAV BAR END --->


<br>
<br>
<br>
<br>
<div class="center_row">
<div class="row ">
<div class="col-md-8">
<div class="right_side">
<h3>LEARNING MANAGEMENT SYSTEM OF AAA</h3>
</div>
</div>

<div class="col-md-4">
<div class="left_side" style="margin-left:100px;margin-right:-500px;">
<h3 id="demo" class="text-right" style="text-transform: uppercase; "></h3>
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.toDateString();
</script>
</div>
</div>

</div>
</div>


<br>

<!-----LEFT HAND NAV BAR-->
<div class="row">
<div class="col-md-4">

<div class="container">
	
    
    <div class="row">
        <div class="col-md-2">
            <nav class="nav-sidebar">
                <ul class="nav">
                    <li class="active"><a href="javascript:;"><span class="glyphicon glyphicon-paperclip"></span> AAA Research Publications</a></li>
                    <li><a href="javascript:;">AAA Quaterly News</a></li>
                    <li><a href="javascript:;">Student Handbooks</a></li>
                    <li><a href="javascript:;">Award Handbooks</a></li>
					<li><a href="javascript:;">Regulations</a></li>
					<li><a href="javascript:;">Examination Time Tables</a></li>
					<li><a href="javascript:;">Class Time Tables</a></li>
					<li><a href="javascript:;">Contact Us</a></li>
                    <li class="nav-divider"></li>
                    <li><a href="javascript:;"><i class="glyphicon glyphicon-off"></i> Sign in</a></li>
                </ul>
            </nav>
        </div>
		
        <div class="col-md-8" >
          <h3 style="color: #428bca;">LATEST NEWS</h3>
        </div>
		
		
		<div class="col-md-2" id="pull-right" style="float:right !important;">
		





<div class="month">      
  <ul>
    <li class="prev">❮</li>
    <li class="next">❯</li>
    <li style="text-align:center">
      August<br>
      <span style="font-size:18px">2016</span>
    </li>
  </ul>
</div>

<ul class="weekdays">
  <li>Mo</li>
  <li>Tu</li>
  <li>We</li>
  <li>Th</li>
  <li>Fr</li>
  <li>Sa</li>
  <li>Su</li>
</ul>

<ul class="days">  
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li><span class="active">10</span></li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
  <li>24</li>
  <li>25</li>
  <li>26</li>
  <li>27</li>
  <li>28</li>
  <li>29</li>
  <li>30</li>
  <li>31</li>
</ul>




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



</div>
</div>

<!-----LEFT HAND NAV BAR END-->





</body>
</html>

EDIT:
What i want is as follows,

enter image description here

Tags:

2

Answers


  1. 0

    Change your section with below 

    <!-----LEFT HAND NAV BAR-->
<div class="row">
 <div class="col-md-12">

    <div class="container">
      <div class="col-md-2">
        <nav class="nav-sidebar">
          <ul class="nav">
            <li class="active"><a href="javascript:;"><span class="glyphicon glyphicon-paperclip"></span> AAA Research Publications</a></li>
            <li><a href="javascript:;">AAA Quaterly News</a></li>
            <li><a href="javascript:;">Student Handbooks</a></li>
            <li><a href="javascript:;">Award Handbooks</a></li>
            <li><a href="javascript:;">Regulations</a></li>
            <li><a href="javascript:;">Examination Time Tables</a></li>
            <li><a href="javascript:;">Class Time Tables</a></li>
            <li><a href="javascript:;">Contact Us</a></li>
            <li class="nav-divider"></li>
            <li><a href="javascript:;"><i class="glyphicon glyphicon-off"></i> Sign in</a></li>
          </ul>
        </nav>
      </div>

      <div class="col-md-8">
        <h3 style="color: #428bca;">LATEST NEWS</h3>
      </div>


      <div class="col-md-4" id="pull-right" style="float:right !important;">


        <div class="month">
          <ul>
            <li class="prev">❮</li>
            <li class="next">❯</li>
            <li style="text-align:center">
              August<br>
              <span style="font-size:18px">2016</span>
            </li>
          </ul>
        </div>

        <ul class="weekdays">
          <li>Mo</li>
          <li>Tu</li>
          <li>We</li>
          <li>Th</li>
          <li>Fr</li>
          <li>Sa</li>
          <li>Su</li>
        </ul>

        <ul class="days">
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
          <li>9</li>
          <li><span class="active">10</span></li>
          <li>11</li>
          <li>12</li>
          <li>13</li>
          <li>14</li>
          <li>15</li>
          <li>16</li>
          <li>17</li>
          <li>18</li>
          <li>19</li>
          <li>20</li>
          <li>21</li>
          <li>22</li>
          <li>23</li>
          <li>24</li>
          <li>25</li>
          <li>26</li>
          <li>27</li>
          <li>28</li>
          <li>29</li>
          <li>30</li>
          <li>31</li>
        </ul>


      </div>


  </div>


 </div>
</div>

<!-----LEFT HAND NAV BAR END-->

    Let me know if it doesn’t look exactly like you want.

    Login or Signup to reply.
  2. 0

    As per my view you should change the column grid as you are using col-md-4 but as you said you need it then go with col-md-12 and container-fluid to get the desired result.

    container always have fixed width in different different resolution(in px) but if you want full width then try to use container-fluid which will take 100% according to all screen.

    Check my codepan. I have removed row as it was taking extra margin and i have applied container-fluid to get the desired output. hope it will help.

    NOTE In .navbar-brand class you are using fix height(50px) by which your logo image is going out. Either increase the size of nav bar or remove that height so logo will be in nav bar. Thank you

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search