CODEWITHSUNDEEP
htmltwitter-bootstrapcssalignment
Deepak
Deepak

Reputation: 1068

Aligning div and navbar to the right using bootstrap

I have a html code right:

https://jsfiddle.net/zdwkvp3c/3/

I want to align the heading on left and dropdown and the ul ( Bar and Trend) on right, when on big screens\medium screens.

I want to align the heading on left and dropdown and ul ( Bar and Trend) on right, but this time, dropdown will be on top and ul ( Bar and Trend) below the dropdown, but both of these should be towards the right.

I have used nested rows and unable to get pull-right work. Kindly let me know if I am missing something in the code.

Upvotes: 0

Views: 37

Answers (1)

Mihai T
Mihai T

Reputation: 17687

i do not exactly understand what you want to achieve ( your instructions are not clear ) but take a look at the snippet below. is this what you want ?

or jsFiddle

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
    <div class="col-md-4 col-sm-12 header pull-left" style="background: green">
	By Companies
    </div>
    <div class="col-md-8 col-sm-6 col-xs-12 pull-right"  style="background: blue">
    <div class="row inner_row">
		     <div class="col-md-6 col-sm-6 col-xs-12 margin">
            <select style="width:100%;">
                    <option>DropdownVal1</option>
                    
                </select>
        </div>
       
			 <div class="col-md-6 col-sm-6 col-xs-12 margin" style="background: orange">
            <ul class="nav nav-pills navbar-right" style="float:right;">
                <li>
                    <a>Bar Chart</a>
                </li>
		<li>
                    <a>Line Chart</a>
                </li>
            </ul>
        </div>
				
		</div>
    </div>

</div>

Upvotes: 1

Related Questions