Nested row fluid grid not working - html

I have 5 dropdrowns and a column on right corner arranged horizontally in a same row. In the next row I would like to have few more dropdowns but I am not able to position in properly as the column on the right is width 500px;
Example:
--------- --------- --------- --------- ---------
dropdown1 dropdown2 dropdown3 dropdown4 dropdown5 column
--------- --------- --------- --------- --------- ---------
| Ads |
| |
>I want to have a drop down here | |
--------- --------- --------- --------- | |
dropdown1 dropdown2 dropdown3 dropdown4 | |
| |
| |
| |
| |
| |
| |
| |
| |
---------
But its getting positioned here >>
Here is what I have tried:
<div class="starter-template">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-2">
<div class="btn-group btn-block">
<button class="col-sm-10 btn btn-sm btn-default">Search Job</button>
<button class="col-sm-2 btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li>Reason 1</li>
<li>Reason 2</li>
<li>Reason 3</li>
<li>Reason 4</li>
</ul>
</div>
</div>
<div class="col-sm-2">
<div class="btn-group btn-block">
<button class="col-sm-10 btn btn-sm btn-default">Search Employer</button>
<button class="col-sm-2 btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li>Reason 1</li>
<li>Reason 2</li>
<li>Reason 3</li>
<li>Reason 4</li>
</ul>
</div>
</div>
<div class="col-sm-2">
<div class="btn-group btn-block">
<button class="col-sm-10 btn btn-sm btn-default">Search Referee</button>
<button class="col-sm-2 btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li>Reason 1</li>
<li>Reason 2</li>
<li>Reason 3</li>
<li>Reason 4</li>
</ul>
</div>
</div>
<div class="col-sm-2">
<div class="btn-group btn-block">
<button class="col-sm-10 btn btn-sm btn-default">Job fair & Events</button>
<button class="col-sm-2 btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li>Reason 1</li>
<li>Reason 2</li>
<li>Reason 3</li>
<li>Reason 4</li>
</ul>
</div>
</div>
<div class="col-sm-2">
<div class="btn-group btn-block">
<button class="col-sm-10 btn btn-sm btn-default">My RTH</button>
<button class="col-sm-2 btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li>Reason 1</li>
<li>Reason 2</li>
<li>Reason 3</li>
<li>Reason 4</li>
</ul>
</div>
</div>
<div class="col-sm-2 ad-block-right text-center" style="width:210px; height: 500px; border: thin black; border-style: dotted">
Advertisements
</div>
</div>
<!--############# NESTED ROW NOT WORKING ###########-->
<div class="row">
<div class="starter-template">
<div class="col-xs-6 col-sm-6">
<div class="">Search all jobs</div>
</div>
</div>
</div>
</div>
</div>
</div>


Your structure is not right. First use row, then inside row separate with col-sm-8 and col-sm-4 (here ads column). And inside col-sm-8 use row to separate rows of dropdrowns
<div class="starter-template">
<div class="row">
<div class="col-sm-8">
<div class="row">
<div class="col-sm-2">
<div class="btn-group btn-block">
<button class="col-sm-10 btn btn-sm btn-default">Search Job</button>
<button class="col-sm-2 btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li>Reason 1</li>
<li>Reason 2</li>
<li>Reason 3</li>
<li>Reason 4</li>
</ul>
</div>
</div>
<div class="col-sm-2">
<div class="btn-group btn-block">
<button class="col-sm-10 btn btn-sm btn-default">Search Employer</button>
<button class="col-sm-2 btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li>Reason 1</li>
<li>Reason 2</li>
<li>Reason 3</li>
<li>Reason 4</li>
</ul>
</div>
</div>
<div class="col-sm-2">
<div class="btn-group btn-block">
<button class="col-sm-10 btn btn-sm btn-default">Search Referee</button>
<button class="col-sm-2 btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li>Reason 1</li>
<li>Reason 2</li>
<li>Reason 3</li>
<li>Reason 4</li>
</ul>
</div>
</div>
<div class="col-sm-2">
<div class="btn-group btn-block">
<button class="col-sm-10 btn btn-sm btn-default">Job fair & Events</button>
<button class="col-sm-2 btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li>Reason 1</li>
<li>Reason 2</li>
<li>Reason 3</li>
<li>Reason 4</li>
</ul>
</div>
</div>
<div class="col-sm-2">
<div class="btn-group btn-block">
<button class="col-sm-10 btn btn-sm btn-default">My RTH</button>
<button class="col-sm-2 btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li>Reason 1</li>
<li>Reason 2</li>
<li>Reason 3</li>
<li>Reason 4</li>
</ul>
</div>
</div>
</div>
<!--############# NESTED ROW NOT WORKING ###########-->
<div class="row">
<div class="starter-template">
<div class="col-xs-6 col-sm-6">
<div class="">Search all jobs</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="col-sm-2 ad-block-right text-center" style="width:210px; height: 500px; border: thin black; border-style: dotted">
Advertisements
</div>
</div>
</div>
</div>
</div>


This is the basic skeleton you need:
<div class=row>
<div class=col-md-10>
<div class="row">
<div class=col-md-2>
dropdown1
</div>
<div class=col-md-2>
dropdown2
</div>
<div class=col-md-2>
dropdown3
</div>
<div class=col-md-2>
dropdown4
</div>
<div class=col-md-2>
dropdown5
</div>
</div>
<div class="row">
<div class=col-md-2>
dropdown1
</div>
<div class=col-md-2>
dropdown2
</div>
<div class=col-md-2>
dropdown3
</div>
<div class=col-md-2>
dropdown4
</div>
</div>
</div>
<div class=col-md-2>
// your ads here
</div>
</div>

Related

How to place bootstrap dropdown menu button in page-header on the right site?

The case seems idiotically simple, but I can not deal with setting the elements.
What I have:
or:
What I need:
Code:
JSFiddle
<div class="container">
<div class="page-header">
<h2>Header</h2>
<div class="btn-group <!-- pull-right -->">
<a class="btn btn-success" href="/Scope/New">Create</a>
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu pre-scrollable" role="menu">
<li class="dropdown-header">Create as copy: </li>
<li>Test 1</li>
<li>Test 45</li>
<li>Lorem ipsum</li>
</ul>
</div>
</div>
</div>
</div>

.page-header {
padding-bottom: 9px;
margin: 40px 0 20px;
border-bottom: 1px solid #eee;
display: flex;
align-items: center;
justify-content: space-between;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="page-header">
<h2>Header</h2>
<div class="btn-group">
<a class="btn btn-success" href="/Scope/New">Create</a>
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu pre-scrollable" role="menu">
<li class="dropdown-header">Create as copy: </li>
<li>Test 1</li>
<li>Test 45</li>
<li>Lorem ipsum</li>
</ul>
</div>
</div>
</div>
</div>
thats all , u can use flex.

Add clearfix in page-header and also add display: inline; to h2.
This will fix your issue. (currently h2 added inline, you can place it in your CSS file)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="page-header clearfix
">
<h2 style="display: inline;">Header</h2>
<div class="btn-group <!-- pull-right -->">
<a class="btn btn-success" href="/Scope/New">Create</a>
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu pre-scrollable" role="menu">
<li class="dropdown-header">Create as copy: </li>
<li>Test 1</li>
<li>Test 45</li>
<li>Lorem ipsum</li>
</ul>
</div>
</div>
</div>
</div>

add clearfix to page-header
<div class="page-header clearfix">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="page-header clearfix
">
<h2>Header</h2>
<div class="btn-group <!-- pull-right -->">
<a class="btn btn-success" href="/Scope/New">Create</a>
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu pre-scrollable" role="menu">
<li class="dropdown-header">Create as copy: </li>
<li>Test 1</li>
<li>Test 45</li>
<li>Lorem ipsum</li>
</ul>
</div>
</div>
</div>
</div>

bootstrap list button right

Hello I have list in bootstrap:
<h4><i class="fa fa-flag" aria-hidden="true"></i> 2</h4>
<ul id="filter-version" class="filter multiple-select term-list">
<li data-id="3">
a
</li>
<li data-id="1">
b
</li>
<li data-id="2">
c
</li>
</ul><button class="btn btn-default btn-sm more-less">Więcej</button>
<span class="btn btn-default btn-sm start-filter" data-filter="version">Pokaż</span>
How can i align properly "Więcej" and "Pokaż" to the right? If i use float: right then the buttons are in same line as "1,2,3,4".
Thanks.
http://jsfiddle.net/C2K9Z/156/

<h4><i class="fa fa-flag" aria-hidden="true"></i> 2</h4>
<ul id="filter-version" class="filter multiple-select term-list">
<li data-id="3">
a
</li>
<li data-id="1">
b
</li>
<li data-id="2">
c
</li>
</ul>
<button class="btn btn-default btn-sm more-less" style="float:right">Więcej</button>
<span class="btn btn-default btn-sm start-filter" data-filter="version" style="float:right">Pokaż</span><br/>

Display currently selected option in dropdown?

I have the following code:
<form class="search-bar" data-example-id="search-bar">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
<div class="input-group-btn">
<button type="button" class="btn btn-default">Search</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</div>
</div><!-- /.input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
What I am trying to do is get it functioning so that if a user clicks the dropdown and selections Option 1, Option 1 will be displayed in the dropdown rather than the little caret glyph.
This is using Bootstrap, just to clarify.

You use Bootstrap Select instead of Bootstrap dropdown:
http://silviomoreto.github.io/bootstrap-select/

You need to add some JS magic. Here's in jQuery flavour
jQuery
$(".dropdown-menu li a").click(function(){
$(this).parents(".input-group-btn").find('.dropdown-toggle').text($(this).text());
$(this).parents(".input-group-btn").find('.dropdown-toggle').val($(this).text());
});
Your HTML
<form class="search-bar" data-example-id="search-bar">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
<div class="input-group-btn">
<button type="button" class="btn btn-default">Search</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</div>
</div><!-- /.input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
And here's a working demo.
EDIT: You can stick this in the head of your page like so
<script type="text/javascript">
$(document).ready(function () {
$(".dropdown-menu li a").click(function () {
$(this).parents(".input-group-btn").find('.dropdown-toggle').text($(this).text());
$(this).parents(".input-group-btn").find('.dropdown-toggle').val($(this).text());
});
});
</script>

Bootstrap 3: dropdown pulled right

I need to have a dropdown pulled right. In my code below, the dropdown is perfectly pulled right, but clicking the dropdown is showing the options way off.
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<button class="btn btn-info">Button</button>
</div>
<div class="col-md-8">
<form class="form-inline pull-right" role="form">
<div class="form-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Option A</li>
<li>Option B</li>
</ul>
</div> <input data-type="text" class="form-control" type="text" placeholder="Search...">
</form>
</div>
</div>
</div>
Fiddle
How can I align the options with the dropdown?
Thanks

Add a btn-group class after form-group
<div class="form-group btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Dropdown
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Option A</li>
<li>Option B</li>
</ul>
</div>
Here is Fiddle

twitter bootstrap 3 input-group-addon with btn-group not the same size

I have to make an input-group-btn in twitter bootstrap with a dropdown-menu attached to it but the output image below shows that the btn-group is not of the same size with the input group.
Here is the html code:
<div class="row">
<div class="col-md-2"><button type="button" class="btn btn-primary" onclick="showModalAddStation();">Add Station</button></div>
<div class="col-md-4">
<div class="form-group">
<div class="input-group">
<div class="input-group-btn" >
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
<span data-bind="label" id="searchLabel">Search By</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
<input type="search" name="searchBy" id="searchBy" class="form-control" />
<span class="input-group-btn">
<button id="filter" class="btn btn-primary btn-block glyphicon glyphicon-plus" onclick="searchStationTable();"></button>
</span>
</div>
</div>
</div>

Your problems are :
The button of dropdown-menu you have btn-sm class, it will decrease size of button http://getbootstrap.com/components/#btn-dropdowns-sizing
solution : remove btn-sm class
You are using glyphicon on the button.
solution : you can use span, i tag or else on button if using glyphicon http://getbootstrap.com/components/#glyphicons-how-to-use
<div class="row">
<div class="col-md-2"><button type="button" class="btn btn-primary" onclick="showModalAddStation();">Add Station</button></div>
<div class="col-md-4">
<div class="form-group">
<div class="input-group">
<div class="input-group-btn" >
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
<span data-bind="label" id="searchLabel">Search By</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
<input type="search" name="searchBy" id="searchBy" class="form-control" />
<span class="input-group-btn">
<button id="filter" class="btn btn-primary btn-block" onclick="searchStationTable();">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
</div>
</div>
http://jsfiddle.net/1hm7thq5/