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/>
Related
I'm trying to create a menu system designed for XL,LG,MD,SM but with a different look for XS (mobile) in BOOTSTRAP4.
I've got the following HTML:
<div class="container-fluid">
<div class="d-flex">
<div class="mr-auto">
<ul id='menu'>
<li class="mt-1">
<span class="fas fa-th fa-lg"></span>
</li>
<li class="mt-1">
Menu 1
</li>
<li class="mt-1">
Menu 1
</li>
</ul>
</div>
<div class="d-flex">
<div class="">
<button class="btn btn-outline-warning btn-sm mr-1" data-toggle='modal' data-target='#login'><i class="fas fa-sign-in-alt mr5"></i>Login
</button>
</div>
<div class="">
<form class="form-inline mr-1" action='/search' method='POST'>
<div class="input-group input-group-sm mx-auto">
<input type="text" class="form-control" name='search_string' placeholder="Search" value=''>
<div class="input-group-append">
<button class="btn btn-outline-warning" type="submit"><i class="fas fa-search mr5"></i></button>
</div>
</div>
</form>
</div>
<div class="">
<div class="dropdown">
<button class="btn btn-outline-warning btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
</div>
</div>
</div>
</div>
</div>
</div>
Which can be found at JSFiddle.
This is working fine on the larger screens, but on XS it just compresses everything together and looks horrible. I want the two different sides to go on to two different rows, but when I add row>col classes, it negates the flexbox utilities. How can I achieve this?
This is the layout I need for large displays:
Which the above code performs okay. But for XS I want this layout:
Which I just cannot get working. Right now i've just created two completely separate menu divs one that displays on XS and one for the rest, as I can't get bootstrap4 to do what I want.
Please, if anyone knows how to get the login, search and dropdown on to its own row in the above code please help and show me.
Change Bootstrap Class
<div class="container-fluid">
<div class="d-sm-flex align-items-center"> /*Change Here*/
<div class="d-flex justify-content-between">/*Change Here*/
<ul id='menu'>
<li class="mt-1">
<span class="fas fa-th fa-lg"></span>
</li>
<li class="mt-1">
Menu 1
</li>
<li class="mt-1">
Menu 1
</li>
</ul>
</div>
<div class="d-flex justify-content-between"> /*Change Here*/
<div class="">
<button class="btn btn-outline-warning btn-sm mr-1" data-toggle='modal' data-target='#login'><i class="fas fa-sign-in-alt mr5"></i>Login
</button>
</div>
<div class="flex-fill"> /*Change Here*/
<form class="form-inline mr-1" action='/search' method='POST'>
<div class="input-group input-group-sm mx-auto">
<input type="text" class="form-control" name='search_string' placeholder="Search" value=''>
<div class="input-group-append">
<button class="btn btn-outline-warning" type="submit"><i class="fas fa-search mr5"></i></button>
</div>
</div>
</form>
</div>
<div class="">
<div class="dropdown">
<button class="btn btn-outline-warning btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
<a class="dropdown-item" href="#">Dropdown Option</a>
</div>
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/lalji1051/axL14kp5/3/
So as I said in the title corners of a bootstrap button are not being rounded and I can't figure out why.
I looked up other posts but none of the found solutions worked for me.
Code (layout.hbs)
...
<!-- navbar-nav -->
<ul class="navbar-nav ml-auto">
<!--Sell Tickets-->
<button type="button" class="btn btn-primary" style="margin-right:20px;">Sell tickets</button>
<!--/Sell Tickets-->
<!-- Currency Dropdown -->
<li class="nav-item dropdown d-none d-md-flex">
<a class="nav-link dropdown-toggle" href="#" role="button" id="dropdownCurrency" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
USD <i class="fa fa-caret-down fa-fw"></i>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownCurrency">
<button class="dropdown-item" type="button">USD</button>
<button class="dropdown-item" type="button">EUR</button>
</div>
</li>
<!-- /Currency Dropdown -->
<!-- Search Toggle -->
<li class="nav-item d-sm-none">
<i class="fa fa-search fa-lg"></i>
</li>
<!-- /Search Toggle -->
<!-- Shopping Cart Toggle -->
<li class="nav-item dropdown ml-1 ml-sm-3">
<a href="#" class="nav-link" data-toggle="modal" data-target="#cartModal">
<i class="fa fa-shopping-cart fa-lg"></i>
<span class="badge badge-pink badge-count">4</span>
</a>
</li>
<!-- /Shopping Cart Toggle -->
<!-- Notification Dropdown -->
<li class="nav-item dropdown ml-1 ml-sm-3">
<a class="nav-link dropdown-toggle" href="#" role="button" id="dropdownNotif" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-bell fa-lg"></i>
<span class="badge badge-info badge-count">3</span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownNotif">
<a class="dropdown-item has-icon" href="#"><i class="fa fa-envelope"></i> 1 New Message</a>
<a class="dropdown-item has-icon" href="#"><i class="fa fa-comment"></i> 2 New Comments</a>
</div>
</li>
<!-- /Notification Dropdown -->
...
Here is the website for full code http://ertagon.cf:3000/
Fixed by adding an inline style margin-right:20px
<button type="button" class="btn btn-primary" style="margin-right:20px; border-radius: 8px;">Sell tickets</button>
Thanks, #Chris W
I got a different problem. My Navbar order is gone backward. So I changed code order to 3-2-1 instead of 1-2-3 for showing 1-2-3. This is my code
<div class="collapse navbar-collapse" id="navbar-ex-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-expanded="false">Hesap <i class="fa fa-caret-down"></i></a>
<ul class="dropdown-menu" role="menu">
<li>
Ayarlar
</li>
<li class="divider"></li>
<li>
<a>Bilgisayara Son Erişim : 22:22:39 - 10.07.2015</a>
</li>
<li>
Çıkış Yap : scrappy#kodevreni.com
</li>
</ul>
</li>
</ul>
<a class="btn btn-link navbar-btn navbar-right">Kayıtlar</a>
<a class="btn btn-link navbar-btn navbar-right">Ekran Görüntüsü</a>
<a class="btn btn-link navbar-btn navbar-right">Yönetim</a>
</div>
I want to make it like this "Yönetim > Ekran Görüntüsü > Kayıtlar > Hesap (dropdown)". But It makes it backward so I changed the code upside down. But the problem is it shows as normal in mobile drop down button...
You can define your a tag float right as like this .
a.btn.btn-link.navbar-btn.navbar-right{float:right;}
<a class="btn btn-link navbar-btn navbar-right">Kayıtlar</a>
<a class="btn btn-link navbar-btn navbar-right">Ekran Görüntüsü</a>
<a class="btn btn-link navbar-btn navbar-right">Yönetim</a>
Hello please check this method it will work
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Yönetim</li>
<li>Ekran Görüntüsü</li>
<li>Kayıtlar</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header"></li>
<ul class="dropdown-menu">
<li>Ayarlar</li>
<li>Kayıtlar</li>
<li>Bilgisayara Son Erişim : 22:22:39 - 10.07.2015</li>
<li>Çıkış Yap : scrappy#kodevreni.com</li>
</ul>
</div>
I am using Admin Panel it works fine when I am using it without some modification.
But when I make some changes like removing page-wrapper div inside the wrapper div, I am not able to use the dropdown feature and all collapsing links are active by default.
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="index.html">SB Admin v2.0</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-envelope fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-messages">
<li>
<a href="#">
<div>
<strong>John Smith</strong>
<span class="pull-right text-muted">
<em>Yesterday</em>
</span>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<strong>John Smith</strong>
<span class="pull-right text-muted">
<em>Yesterday</em>
</span>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<strong>John Smith</strong>
<span class="pull-right text-muted">
<em>Yesterday</em>
</span>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>Read All Messages</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- /.dropdown-messages -->
</li>
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-tasks fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-tasks">
<li>
<a href="#">
<div>
<p>
<strong>Task 1</strong>
<span class="pull-right text-muted">40% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p>
<strong>Task 2</strong>
<span class="pull-right text-muted">20% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p>
<strong>Task 3</strong>
<span class="pull-right text-muted">60% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p>
<strong>Task 4</strong>
<span class="pull-right text-muted">80% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>See All Tasks</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- /.dropdown-tasks -->
</li>
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-alerts">
<li>
<a href="#">
<div>
<i class="fa fa-comment fa-fw"></i> New Comment
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-twitter fa-fw"></i> 3 New Followers
<span class="pull-right text-muted small">12 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-envelope fa-fw"></i> Message Sent
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-tasks fa-fw"></i> New Task
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-upload fa-fw"></i> Server Rebooted
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>See All Alerts</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- /.dropdown-alerts -->
</li>
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><i class="fa fa-user fa-fw"></i> User Profile
</li>
<li><i class="fa fa-gear fa-fw"></i> Settings
</li>
<li class="divider"></li>
<li><i class="fa fa-sign-out fa-fw"></i> Logout
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li>
<i class="fa fa-dashboard fa-fw"></i> Dashboard
</li>
<li>
<i class="fa fa-bar-chart-o fa-fw"></i> Charts<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Flot Charts
</li>
<li>
Morris.js Charts
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<i class="fa fa-table fa-fw"></i> Tables
</li>
<li>
<i class="fa fa-edit fa-fw"></i> Forms
</li>
<li>
<i class="fa fa-wrench fa-fw"></i> UI Elements<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Panels and Wells
</li>
<li>
Buttons
</li>
<li>
Notifications
</li>
<li>
Typography
</li>
<li>
Icons
</li>
<li>
Grid
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<i class="fa fa-sitemap fa-fw"></i> Multi-Level Dropdown<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Second Level Item
</li>
<li>
Second Level Item
</li>
<li>
Third Level <span class="fa arrow"></span>
<ul class="nav nav-third-level">
<li>
Third Level Item
</li>
<li>
Third Level Item
</li>
<li>
Third Level Item
</li>
<li>
Third Level Item
</li>
</ul>
<!-- /.nav-third-level -->
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<i class="fa fa-files-o fa-fw"></i> Sample Pages<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Blank Page
</li>
<li>
Login Page
</li>
</ul>
<!-- /.nav-second-level -->
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
</div>
<!-- /#wrapper -->
Where am I missing something?
Here is how it looks like.
I have a basic BootStrap 3 nav header. I would like to separate the existing header so that I have the single dropdown item on the far right, and the rest of the other main menu items to be on the far left. Not sure how to do this?
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
<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="index.html">Cost Tracking</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-left" style="margin-left:96px">
<button type="button" class="btn btn-primary btn-sm">Project Details</button>
<button type="button" class="btn btn-primary btn-sm">Cost Centre</button>
<button type="button" class="btn btn-primary btn-sm">Address Book</button>
<button type="button" class="btn btn-primary btn-sm">Time Tracking</button>
<button type="button" class="btn btn-primary btn-sm">Reports</button>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><i class="fa fa-gear fa-fw"></i> Settings
</li>
<li class="divider"></li>
<li><i class="fa fa-sign-out fa-fw"></i> Logout
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default navbar-static-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li class="background-color:#333">
<i class="fa fa-edit fa-fw"></i> Project Info
</li>
<li>
<i class="fa fa-user fa-fw"></i> Project Roles
</li>
<li>
<i class="fa fa-dashboard fa-fw"></i> Rate Schedule Review
</li>
<li>
<i class="fa fa-bar-chart-o fa-fw"></i> Surcharges
</li>
<li>
<i class="fa fa-group fa-fw"></i> Project Crews
</li>
<li>
<i class="fa fa-user fa-fw"></i> Project Employees
</li>
</ul>
<!-- /#side-menu -->
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
According to the docs to have a navigation over to the right hand side of the navbar you need to place it in it's own <ul>:
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><i class="fa fa-gear fa-fw"></i> Settings
</li>
<li class="divider"></li>
<li><i class="fa fa-sign-out fa-fw"></i> Logout
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
As a side note, the only direct child of a <ul> can be a <li>, so your <button>s need to be wrapped in list elements:
<li><button type="button" class="btn btn-primary btn-sm">Project Details</button></li>
Demo
If you don't want it in a separate list, then you'll have to override the float on the <ul> and then float the final <li> right. You'll also need the .dropdown-menu-right class on the dropdown <ul>.
...
<li><button type="button" class="btn btn-primary btn-sm">Reports</button></li>
<li class="dropdown pull-right">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-menu-right dropdown-user">
<li><i class="fa fa-gear fa-fw"></i> Settings
</li>
<li class="divider"></li>
<li><i class="fa fa-sign-out fa-fw"></i> Logout
</li>
</ul>
<!-- /.dropdown-user -->
</li>
CSS
.navbar-nav {
float: none;
}
Demo