I have this
a simple panel using bootstrap which displays a list of departments in the table and with an input field in the bottom with a button to add. This panel is fixed in height, and as you can see, the content is overflowing the panel. I tried to make it scrollable but I still get the same end result.
What I want is for the the content in the table to be inside the panel and scrollable.
.panel-primary {
border-color: #b3b3b3;
}
.panel__add-pos {
height: 400px;
position: relative;
}
.panel-heading {
display: flex;
padding: 5px 15px;
}
.panel-body {
overflow-x: hidden;
max-height: none;
overflow-y: scroll;
}
.panel-title {
font-size: 14px;
}
.department-actions {
width: 70px;
height: 14px;
}
.department-actions a {
color: #d2d2d2;
}
.department-actions a:hover {
color: #000000;
}
.panel__add-dept form {
position: absolute;
bottom: 0;
margin-bottom: 10px;
width: 97%;
}
.panel__input-container {
border: 0;
border-bottom: 1px solid #cccccc;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
padding: 0;
padding-left: 10px;
}
.panel__input-container:focus {
border-color: none;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none);
}
[class*="btn"] {
border-radius: 0;
}
[class*="col-"] {
padding: 0 5px;
}
<div class="panel panel-primary panel__add-dept">
<div class="panel-heading">
<span class="panel-title">LIST OF DEPARTMENT</span>
</div>
<div class="panel-body">
<table class="table table-striped">
<thead>
<tr>
<th>Department Name</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Accounting Department</td>
<td>
<div class="department-actions pull-right">
<a href="http://localhost/" data-id="1" class="click-open">
<i class="fa fa-chevron-right pull-right"></i>
</a>
<a href="#" data-id="1">
<i class="fa fa-close pull-right"></i>
</a>
<a href="#" class="click-edit" data-name="Department" data-id="1" data-toggle="modal" data-target="#edits">
<i class="fa fa-pencil pull-right"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>Sales Department</td>
<td>
<div class="department-actions pull-right">
<a href="http://localhost/" data-id="2" class="click-open">
<i class="fa fa-chevron-right pull-right"></i>
</a>
<a href="#" data-id="2">
<i class="fa fa-close pull-right"></i>
</a>
<a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
<i class="fa fa-pencil pull-right"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>Sales Department</td>
<td>
<div class="department-actions pull-right">
<a href="http://localhost/" data-id="2" class="click-open">
<i class="fa fa-chevron-right pull-right"></i>
</a>
<a href="#" data-id="2">
<i class="fa fa-close pull-right"></i>
</a>
<a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
<i class="fa fa-pencil pull-right"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>Sales Department</td>
<td>
<div class="department-actions pull-right">
<a href="http://localhost/" data-id="2" class="click-open">
<i class="fa fa-chevron-right pull-right"></i>
</a>
<a href="#" data-id="2">
<i class="fa fa-close pull-right"></i>
</a>
<a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
<i class="fa fa-pencil pull-right"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>Sales Department</td>
<td>
<div class="department-actions pull-right">
<a href="http://localhost/" data-id="2" class="click-open">
<i class="fa fa-chevron-right pull-right"></i>
</a>
<a href="#" data-id="2">
<i class="fa fa-close pull-right"></i>
</a>
<a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
<i class="fa fa-pencil pull-right"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>Sales Department</td>
<td>
<div class="department-actions pull-right">
<a href="http://localhost/" data-id="2" class="click-open">
<i class="fa fa-chevron-right pull-right"></i>
</a>
<a href="#" data-id="2">
<i class="fa fa-close pull-right"></i>
</a>
<a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
<i class="fa fa-pencil pull-right"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>Sales Department</td>
<td>
<div class="department-actions pull-right">
<a href="http://localhost/" data-id="2" class="click-open">
<i class="fa fa-chevron-right pull-right"></i>
</a>
<a href="#" data-id="2">
<i class="fa fa-close pull-right"></i>
</a>
<a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
<i class="fa fa-pencil pull-right"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>Sales Department</td>
<td>
<div class="department-actions pull-right">
<a href="http://localhost/" data-id="2" class="click-open">
<i class="fa fa-chevron-right pull-right"></i>
</a>
<a href="#" data-id="2">
<i class="fa fa-close pull-right"></i>
</a>
<a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
<i class="fa fa-pencil pull-right"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>Sales Department</td>
<td>
<div class="department-actions pull-right">
<a href="http://localhost/" data-id="2" class="click-open">
<i class="fa fa-chevron-right pull-right"></i>
</a>
<a href="#" data-id="2">
<i class="fa fa-close pull-right"></i>
</a>
<a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
<i class="fa fa-pencil pull-right"></i>
</a>
</div>
</td>
</tr>
</tbody>
</table>
<form action="http://localhost/" id="list-dept-form" data-panel_name="Department" method="post" accept-charset="utf-8">
<div class="form-group add-department">
<input class="form-control panel__input-container" id="new_department" type="text" name="new_department" placeholder="Add new department" value="">
</div>
<div class="form-group">
<button type="button" class="btn btn-default button--dark pull-right" id="add-department" name="submit_dept">Add</button>
</div>
</form>
</div>
</div>
A scroll bar will not be added unless the content is taller than the parent. However, the parent must also have a limited height.
.panel-primary {
border-color: #b3b3b3;
}
.panel__add-pos {
height: 400px;
position: relative;
}
.panel-heading {
display: flex;
padding: 5px 15px;
}
.panel-body {
overflow-x: hidden;
max-height: none;
overflow-y: scroll;
height: 100px; /* --- like this --- */
}
.panel-title {
font-size: 14px;
}
.department-actions {
width: 70px;
height: 14px;
}
.department-actions a {
color: #d2d2d2;
}
.department-actions a:hover {
color: #000000;
}
.panel__add-dept form {
position: absolute;
bottom: 0;
margin-bottom: 10px;
width: 97%;
}
.panel__input-container {
border: 0;
border-bottom: 1px solid #cccccc;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
padding: 0;
padding-left: 10px;
}
.panel__input-container:focus {
border-color: none;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none);
}
[class*="btn"] {
border-radius: 0;
}
[class*="col-"] {
padding: 0 5px;
}
<div class="panel panel-primary panel__add-dept">
<div class="panel-heading">
<span class="panel-title">LIST OF DEPARTMENT</span>
</div>
<div class="panel-body">
<table class="table table-striped">
<thead>
<tr>
<th>Department Name</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Accounting Department</td>
<td>
<div class="department-actions pull-right">
<a href="http://localhost/" data-id="1" class="click-open">
<i class="fa fa-chevron-right pull-right"></i>
</a>
<a href="#" data-id="1">
<i class="fa fa-close pull-right"></i>
</a>
<a href="#" class="click-edit" data-name="Department" data-id="1" data-toggle="modal" data-target="#edits">
<i class="fa fa-pencil pull-right"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>Sales Department</td>
<td>
<div class="department-actions pull-right">
<a href="http://localhost/" data-id="2" class="click-open">
<i class="fa fa-chevron-right pull-right"></i>
</a>
<a href="#" data-id="2">
<i class="fa fa-close pull-right"></i>
</a>
<a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
<i class="fa fa-pencil pull-right"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>Sales Department</td>
<td>
<div class="department-actions pull-right">
<a href="http://localhost/" data-id="2" class="click-open">
<i class="fa fa-chevron-right pull-right"></i>
</a>
<a href="#" data-id="2">
<i class="fa fa-close pull-right"></i>
</a>
<a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
<i class="fa fa-pencil pull-right"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>Sales Department</td>
<td>
<div class="department-actions pull-right">
<a href="http://localhost/" data-id="2" class="click-open">
<i class="fa fa-chevron-right pull-right"></i>
</a>
<a href="#" data-id="2">
<i class="fa fa-close pull-right"></i>
</a>
<a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
<i class="fa fa-pencil pull-right"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>Sales Department</td>
<td>
<div class="department-actions pull-right">
<a href="http://localhost/" data-id="2" class="click-open">
<i class="fa fa-chevron-right pull-right"></i>
</a>
<a href="#" data-id="2">
<i class="fa fa-close pull-right"></i>
</a>
<a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
<i class="fa fa-pencil pull-right"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>Sales Department</td>
<td>
<div class="department-actions pull-right">
<a href="http://localhost/" data-id="2" class="click-open">
<i class="fa fa-chevron-right pull-right"></i>
</a>
<a href="#" data-id="2">
<i class="fa fa-close pull-right"></i>
</a>
<a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
<i class="fa fa-pencil pull-right"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>Sales Department</td>
<td>
<div class="department-actions pull-right">
<a href="http://localhost/" data-id="2" class="click-open">
<i class="fa fa-chevron-right pull-right"></i>
</a>
<a href="#" data-id="2">
<i class="fa fa-close pull-right"></i>
</a>
<a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
<i class="fa fa-pencil pull-right"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>Sales Department</td>
<td>
<div class="department-actions pull-right">
<a href="http://localhost/" data-id="2" class="click-open">
<i class="fa fa-chevron-right pull-right"></i>
</a>
<a href="#" data-id="2">
<i class="fa fa-close pull-right"></i>
</a>
<a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
<i class="fa fa-pencil pull-right"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>Sales Department</td>
<td>
<div class="department-actions pull-right">
<a href="http://localhost/" data-id="2" class="click-open">
<i class="fa fa-chevron-right pull-right"></i>
</a>
<a href="#" data-id="2">
<i class="fa fa-close pull-right"></i>
</a>
<a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
<i class="fa fa-pencil pull-right"></i>
</a>
</div>
</td>
</tr>
</tbody>
</table>
<form action="http://localhost/" id="list-dept-form" data-panel_name="Department" method="post" accept-charset="utf-8">
<div class="form-group add-department">
<input class="form-control panel__input-container" id="new_department" type="text" name="new_department" placeholder="Add new department" value="">
</div>
<div class="form-group">
<button type="button" class="btn btn-default button--dark pull-right" id="add-department" name="submit_dept">Add</button>
</div>
</form>
</div>
</div>
.panel__add-pos {
height: auto;
position: relative;
}
.panel-body {
max-height: 400px;
overflow-x: hidden;
max-height: none;
overflow-y: scroll
}
Try that css for your code
You can try this:
.panel {
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
}
and remove the styles you have on .panel-body
Related
I am trying to vertically center the unordered list '.header-top-widget' inside a div. But no way it is being centered.
I have tried:
.header-top-widget
{
display:flex;
align-items:center;
}
.header-top-widget a,
.header-top-social a {
display: inline-block;
margin-right: 30px;
line-height: 50px;
font-size: 14px;
color: #fff;
}
.header-top {
position: relative;
z-index: 1;
width: 100%;
height: 50px;
background-color: #0e2737;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<header class="header">
<div class="header-top">
<div class="container">
<div class="d-flex justify-content-between">
<div class="header-top-widget">
<ul class="list-inline">
<li class="list-inline-item">
<a href="url" title="instagram" target="_blank" class="nav-link">
<i class="fas fa-phone"></i> 96 Ernser Vista Suite 437, NY, US
</a>
</li>
<li class="list-inline-item">
<a href="url" title="instagram" target="_blank" class="nav-link">
<i class="fas fa-envelope-open-text"></i> (123) 456-78-910
</a>
</li>
</ul>
</div>
<div class="header-top-social">
<ul class="header-top-social list-inline">
<li class="list-inline-item">
<a href="url" title="instagram" target="_blank">
<i class="fab fa-instagram-square"></i>
</a>
</li>
<li class="list-inline-item">
<a href="url" title="twitter" target="_blank">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a href="url" title="facebook" target="_blank">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="list-inline-item">
<a href="url" title="linkedin" target="_blank">
<i class="fab fa-linkedin"></i>
</a>
</li>
<li class="list-inline-item">
<a href="url" title="skype" target="_blank">
<i class="fab fa-youtube"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<nav class="">
</nav>
</header>
Why is ul not being centered in the div with flexbox? Am I doing anything wrong semantically? I have referred to various questions in SO. This may be duplicate but I am not able to solve this while trying various options.
Please help with the workaround.
A temporary workaround could be having different line heights for the socials and widgets.
.header-top-widget a,
.header-top-social a {
display: inline-block;
margin-right: 30px;
line-height: 50px;
font-size: 14px;
color: #fff;
}
/* smaller widget line height */
.header-top-widget a{
line-height: 30px;
}
.header-top {
position: relative;
z-index: 1;
width: 100%;
height: 50px;
background-color: #0e2737;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<header class="header">
<div class="header-top">
<div class="container">
<div class="d-flex justify-content-between">
<div class="header-top-widget">
<ul class="list-inline">
<li class="list-inline-item">
<a href="url" title="instagram" target="_blank" class="nav-link">
<i class="fas fa-phone"></i> 96 Ernser Vista Suite 437, NY, US
</a>
</li>
<li class="list-inline-item">
<a href="url" title="instagram" target="_blank" class="nav-link">
<i class="fas fa-envelope-open-text"></i> (123) 456-78-910
</a>
</li>
</ul>
</div>
<div class="header-top-social">
<ul class="header-top-social list-inline">
<li class="list-inline-item">
<a href="url" title="instagram" target="_blank">
<i class="fab fa-instagram-square"></i>
</a>
</li>
<li class="list-inline-item">
<a href="url" title="twitter" target="_blank">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a href="url" title="facebook" target="_blank">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="list-inline-item">
<a href="url" title="linkedin" target="_blank">
<i class="fab fa-linkedin"></i>
</a>
</li>
<li class="list-inline-item">
<a href="url" title="skype" target="_blank">
<i class="fab fa-youtube"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<nav class="">
</nav>
</header>
How to add active class in AdminLTE-2.4.5 sidebar on click
I my laravel app i added multilevel sidebar and i want to add active class when i click it but i do not have any idea to do that so how can i do that any body help thanks in advance
sidebar image
http://prntscr.com/n1g3kl
this is my html code
<ul class="sidebar-menu" data-widget="tree">
<li class="treeview">
<a href="#">
<i class="fa fa-share"></i> <span>sidebar Menus</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li class="treeview">
<a href="#"><i class="fa fa-tasks"></i> Operation
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li class="treeview">
<li><i class="fa fa-circle-o"></i>General Dashboard</li>
</li>
</ul>
</li>
<li class="treeview">
<a href="#"><i class="fa fa-building"></i> Department
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li class="treeview">
<a href="#"><i class="fa fa-circle-o"></i> Driver
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i> All Driver</li>
<li><i class="fa fa-circle-o"></i> Pending Approval</li>
</ul>
</li>
</ul>
</li>
<li class="treeview">
<a href="#"><i class="fa fa-user"></i> Bd Partner
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i> Bd List</li>
</ul>
</li>
</ul>
</li>
</ul>
I made a sidebar which contains a drop-down. And if the dropdown is open. I want the <li class="nav-item nav-item-sidebar"> (Which is at the top of the whole dropdown) to have a certain CSS style. Which is
border-left: 3px solid #1ABB9C;
padding: 8px 8px 8px 5px;
background-color: #222732;
How can I achieve that?
HTML
<li class="nav-item nav-item-sidebar">
<a class="nav-link" href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">
<i class="fal fa-thumbs-up fa-lg sidebar-icon"></i>
<span class="sidebar-link">Dropdown</span>
<span class="fal fa-angle-right fa-lg sidebar-arrow rotate-effect"></span>
</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li class="nav-item">
<a href="#Bier1" class="nav-link sidebar-dropdown-nav-link">
<i class="fal fa-copy fa-lg sidebar-icon"></i>
<span class="sidebar-link">Files</span>
<span class="fal fa-angle-right fa-lg sidebar-arrow"></span>
</a>
</li>
<li class="nav-item">
<a href="#Bier2" class="nav-link sidebar-dropdown-nav-link">
<i class="fal fa-comments fa-lg sidebar-icon"></i>
<span class="sidebar-link">Comments</span>
<span class="fal fa-angle-right fa-lg sidebar-arrow"></span>
</a>
</li>
<li class="nav-item">
<a href="#Bier3" class="nav-link sidebar-dropdown-nav-link">
<i class="fal fa-image fa-lg sidebar-icon"></i>
<span class="sidebar-link">Pictures</span>
<span class="fal fa-angle-right fa-lg sidebar-arrow"></span>
</a>
</li>
</ul>
</li>
I guess it has something to do with a[aria-expanded="true"] but I'm not sure.
How can I achieve the above?
Here when the dropdown is called, collapse class will change the colour of the items. And btnBackground is called from a jquery, and it will apply the css. Try this out.
In the dropdown items, the effect is happening after loading the default css, but you can change it when the dropdown is loaded, this is to show how the colour changes from default to the css you added.
$(".dropdown-toggle").click(function() {
$(this).toggleClass("btnBackground");
});
.btnBackground {
border-left: 3px solid #1ABB9C;
padding: 8px 8px 8px 5px;
background-color: #222732;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<li class="nav-item nav-item-sidebar dropdown-toggle">
<a class="nav-link" href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">
<i class="fal fa-thumbs-up fa-lg sidebar-icon"></i>
<span class="sidebar-link">Dropdown</span>
<span class="fal fa-angle-right fa-lg sidebar-arrow rotate-effect"></span>
</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li class="nav-item">
<a href="#Bier1" class="nav-link sidebar-dropdown-nav-link">
<i class="fal fa-copy fa-lg sidebar-icon"></i>
<span class="sidebar-link">Files</span>
<span class="fal fa-angle-right fa-lg sidebar-arrow"></span>
</a>
</li>
<li class="nav-item">
<a href="#Bier2" class="nav-link sidebar-dropdown-nav-link">
<i class="fal fa-comments fa-lg sidebar-icon"></i>
<span class="sidebar-link">Comments</span>
<span class="fal fa-angle-right fa-lg sidebar-arrow"></span>
</a>
</li>
<li class="nav-item">
<a href="#Bier3" class="nav-link sidebar-dropdown-nav-link">
<i class="fal fa-image fa-lg sidebar-icon"></i>
<span class="sidebar-link">Pictures</span>
<span class="fal fa-angle-right fa-lg sidebar-arrow"></span>
</a>
</li>
</ul>
</li>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
You cant access parent elements with css, as far as I know.
But here you have a pure css solution to archive you goal.
.nav-item.nav-item-sidebar a[aria-expanded="true"],
.nav-item.nav-item-sidebar a[aria-expanded="true"] + ul {
border-left: 3px solid #1ABB9C;
padding: 8px 8px 8px 5px;
background-color: #222732;
}
Here is the Fiddle
I am trying two float two elements with inside a Bootstrap navigation, but it won't work.
.cls1 {
float: left !important;
}
.cls2 {
float: right !important;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-static-top hidden-sm hidden-md hidden-lg">
<div class="container">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse5" data-toggle="collapse" class="navbar-toggle cls1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="cls2">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-youtube-play" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-google-plus" aria-hidden="true"></i>
<i class="fa fa-pinterest-p" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-heart" aria-hidden="true"></i>
<i class="fa fa-tumblr" aria-hidden="true"></i>
<i class="fa fa-soundcloud" aria-hidden="true"></i>
<i class="fa fa-vimeo-square" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
<i class="fa fa-rss" aria-hidden="true"></i>
</div>
</div>
<div id="navbarCollapse5" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>NATURE</li>
<li>TRAVEL</li>
<li>CONTACT</li>
<li>ABOUT ME</li>
<li>MUSIC</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Am I missing something? Is there a conflict that I am not seeing?
there is class .hidden-lg it have css style
#media (max-width: 1199px) and (min-width: 992px)
.hidden-md {
display: none!important;
}
#media (min-width: 1200px)
.hidden-lg {
display: none!important;
}
#media (max-width: 991px) and (min-width: 768px)
.hidden-sm {
display: none!important;
}
Because of these bootstrap classes, the whole element should be hide from DOM. Below 768px of window size it should work.
Below edit the code and try it
.cls1 {
float: left !important;
}
.cls2 {
float: right !important;
}
#media (max-width: 768px) {
.cls3 {
float: right !important;
}
.cls2 {
display:none;
}
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<head>
<body>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse5" data-toggle="collapse" class="navbar-toggle cls1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="cls3 hidden-sm hidden-md hidden-lg">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-youtube-play" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-google-plus" aria-hidden="true"></i>
<i class="fa fa-pinterest-p" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-heart" aria-hidden="true"></i>
<i class="fa fa-tumblr" aria-hidden="true"></i>
<i class="fa fa-soundcloud" aria-hidden="true"></i>
<i class="fa fa-vimeo-square" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
<i class="fa fa-rss" aria-hidden="true"></i>
</div>
</div>
<div id="navbarCollapse5" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>NATURE</li>
<li>TRAVEL</li>
<li>CONTACT</li>
<li>ABOUT ME</li>
<li>MUSIC</li>
</ul>
</div>
<div class="cls2">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-youtube-play" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-google-plus" aria-hidden="true"></i>
<i class="fa fa-pinterest-p" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-heart" aria-hidden="true"></i>
<i class="fa fa-tumblr" aria-hidden="true"></i>
<i class="fa fa-soundcloud" aria-hidden="true"></i>
<i class="fa fa-vimeo-square" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
<i class="fa fa-rss" aria-hidden="true"></i>
</div>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
I am trying to create same size button (hyperlink) with FontAwesome.
HTML as below:
<a class="btn btn-lg btn-info" href="#">
Button 1 Info<br /> sub<br />
<i class="fa fa-flag fa-2x pull-right"></i>
</a>
<a class="btn btn-lg btn-info" href="#">
Button 2<br /><br />
<i class="fa fa-cloud-upload fa-2x pull-right"></i>
</a>
<a class="btn btn-lg btn-info" href="#">
Button<br /><br />
<i class="fa fa-cloud-download fa-2x pull-right"></i>
</a>
See Image as below.
All button should be of same size
Is there any inbuilt css class in font awesome?