I am trying to implement AdminLTE theme in my project. I am an intern and working with jsf+hibernate. I have been told to use adminlte theme and trying to work it out with jsf.
At the beginning I fixed the stylesheeet syntax and JS syntax. After that fixed the /> parts of the code to apply on JSF. Now everything is looking same except icons. I am trying to implement them same way as I implemented JS and CSS files but it does not work.
For example, code was:
<link rel="stylesheet" href="dist/css/adminlte.min.css">
and I am using it like:
<h:outputStylesheet library="dist/css" name="adminlte.min.css" />
It works when I'm use:
<h:graphicImage name ="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8"/>
instead of:
<img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8"/>
Icons look like this:
My template.xhtml:
<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>AdminLTE 3 | Starter</title>
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback"/>
<h:outputStylesheet library="plugins/fontawesome-free/css" name="all.min.css" />
<h:outputStylesheet library="dist/css" name="adminlte.min.css" />
</h:head>
<h:body class="hold-transition sidebar-mini">
<div class="wrapper">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item d-none d-sm-inline-block">
Home
</li>
<li class="nav-item d-none d-sm-inline-block">
Contact
</li>
</ul>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<!-- Navbar Search -->
<li class="nav-item">
<a class="nav-link" data-widget="navbar-search" href="#" role="button">
<i class="fas fa-search"></i>
</a>
<div class="navbar-search-block">
<form class="form-inline">
<div class="input-group input-group-sm">
<input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search"/>
<div class="input-group-append">
<button class="btn btn-navbar" type="submit">
<i class="fas fa-search"></i>
</button>
<button class="btn btn-navbar" type="button" data-widget="navbar-search">
<i class="fas fa-times"></i>
</button>
</div>
</div>
</form>
</div>
</li>
<!-- Messages Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-comments"></i>
<span class="badge badge-danger navbar-badge">3</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<h:graphicImage name ="dist/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle"/>
<div class="media-body">
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">Call me whenever you can...</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<h:graphicImage name ="dist/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3"/>
<div class="media-body">
<h3 class="dropdown-item-title">
John Pierce
<span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">I got your message bro</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<h:graphicImage name ="dist/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3"/>
<div class="media-body">
<h3 class="dropdown-item-title">
Nora Silvester
<span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">The subject goes here</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
See All Messages
</div>
</li>
<!-- Notifications Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-bell"></i>
<span class="badge badge-warning navbar-badge">15</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<span class="dropdown-header">15 Notifications</span>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-envelope mr-2"></i> 4 new messages
<span class="float-right text-muted text-sm">3 mins</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-users mr-2"></i> 8 friend requests
<span class="float-right text-muted text-sm">12 hours</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-file mr-2"></i> 3 new reports
<span class="float-right text-muted text-sm">2 days</span>
</a>
<div class="dropdown-divider"></div>
See All Notifications
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="fullscreen" href="#" role="button">
<i class="fas fa-expand-arrows-alt"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
<i class="fas fa-th-large"></i>
</a>
</li>
</ul>
</nav>
<!-- /.navbar -->
<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Brand Logo -->
<a href="index3.html" class="brand-link">
<h:graphicImage name="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8"/>
<span class="brand-text font-weight-light">PM System</span>
</a>
<!-- Sidebar -->
<div class="sidebar">
<!-- Sidebar user panel (optional) -->
<div class="user-panel mt-3 pb-3 mb-3 d-flex">
<div class="image">
<h:graphicImage name ="dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image"/>
</div>
<div class="info">
Kullanıcı Adı
</div>
</div>
<!-- SidebarSearch Form -->
<div class="form-inline">
<div class="input-group" data-widget="sidebar-search">
<input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search"/>
<div class="input-group-append">
<button class="btn btn-sidebar">
<i class="fas fa-search fa-fw"></i>
</button>
</div>
</div>
</div>
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item menu-open">
<a href="#" class="nav-link active">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>
Starter Pages
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link active">
<i class="far fa-circle nav-icon"></i>
<p>Active Page</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Inactive Page</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-th"></i>
<p>
Simple Link
<span class="right badge badge-danger">New</span>
</p>
</a>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0">Starter Page</h1>
</div><!-- /.col -->
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item active">Starter Page</li>
</ol>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->
<!-- Main content -->
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's
content.
</p>
Card link
Another link
</div>
</div>
<div class="card card-primary card-outline">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's
content.
</p>
Card link
Another link
</div>
</div><!-- /.card -->
</div>
<!-- /.col-md-6 -->
<div class="col-lg-6">
<div class="card">
<div class="card-header">
<h5 class="m-0">Featured</h5>
</div>
<div class="card-body">
<h6 class="card-title">Special title treatment</h6>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
<div class="card card-primary card-outline">
<div class="card-header">
<h5 class="m-0">Featured</h5>
</div>
<div class="card-body">
<h6 class="card-title">Special title treatment</h6>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<!-- /.col-md-6 -->
</div>
<!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Control sidebar content goes here -->
<div class="p-3">
<h5>Title</h5>
<p>Sidebar content</p>
</div>
</aside>
<!-- /.control-sidebar -->
<!-- Main Footer -->
<footer class="main-footer">
<!-- To the right -->
<div class="float-right d-none d-sm-inline">
Anything you want
</div>
<!-- Default to the left -->
<strong>Copyright © 2014-2021 AdminLTE.io.</strong> All rights reserved.
</footer>
</div>
<!-- ./wrapper -->
<!-- REQUIRED SCRIPTS -->
<h:outputScript library="plugins/jquery" name="jquery.min.js"/>
<h:outputScript library="plugins/bootstrap/js" name="bootstrap.bundle.min.js"/>
<h:outputScript library="dist/js" name="adminlte.min.js"/>
</h:body>
</html>
can you try font awsome like this:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
So I have the below code that will render a mega menu for me using the Bulma Framework, but I'm running into issues on having it position center underneath.
Please note: Please click "Run code" and then expand to full page to see what I mean, the mobile version doesn't show it.
The code that I have renders the mega menus as such:
I want to have the hoverable menu item be centered with the mega menu (Meaning have the middle "Sub Menu Title" be right below the blog hover dropdown.
There is a min-width: 50% set on the .navbar-dropdown class.
All help would be appreciated.
.navbar-item.is-mega {
position: static;
.is-mega-menu-title {
margin-bottom: 0;
padding: .375rem 1rem;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.1/css/bulma.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav class="navbar">
<div class="navbar-brand">
<a class="navbar-item" href="http://bulma.io">
<img src="http://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
</a>
<div class="navbar-burger burger" data-target="navMenubd-example">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navMenubd-example" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Home1
</a>
<a class="navbar-item">
Home2
</a>
<a class="navbar-item">
Home3
</a>
<a class="navbar-item">
Home3
</a>
<a class="navbar-item">
Home3
</a>
<a class="navbar-item">
Home3
</a>
<div class="navbar-item has-dropdown is-hoverable is-mega">
<div class="navbar-link flex">
Blog <span class="tag is-info ml-2">Hover here<span>
</div>
<div id="blogDropdown" class="navbar-dropdown " style="min-width: 50%" data-style="width: 18rem;">
<div class="container is-fluid">
<div class="columns">
<div class="column">
<h1 class="title is-6 is-mega-menu-title">Sub Menu Title</h1>
<a class="navbar-item" href="/2017/08/03/list-of-tags/">
<div class="navbar-content">
<p>
<small class="has-text-info">03 Aug 2017</small>
</p>
<p>New feature: list of tags</p>
</div>
</a>
<a class="navbar-item" href="/2017/08/03/list-of-tags/">
<div class="navbar-content">
<p>
<small class="has-text-info">03 Aug 2017</small>
</p>
<p>New feature: list of tags</p>
</div>
</a>
<a class="navbar-item" href="/2017/08/03/list-of-tags/">
<div class="navbar-content">
<p>
<small class="has-text-info">03 Aug 2017</small>
</p>
<p>New feature: list of tags</p>
</div>
</a>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title">Sub Menu Title</h1>
<a class="navbar-item" href="/2017/08/03/list-of-tags/">
<div class="navbar-content">
<p>
<small class="has-text-info">03 Aug 2017</small>
</p>
<p>New feature: list of tags</p>
</div>
</a>
<a class="navbar-item " href="/documentation/overview/start/">
Overview
</a>
<a class="navbar-item " href="http://bulma.io/documentation/modifiers/syntax/">
Modifiers
</a>
<a class="navbar-item " href="http://bulma.io/documentation/columns/basics/">
Columns
</a>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title">Sub Menu Title</h1>
<a class="navbar-item " href="/documentation/overview/start/">
Overview
</a>
<a class="navbar-item " href="http://bulma.io/documentation/modifiers/syntax/">
Modifiers
</a>
<a class="navbar-item " href="http://bulma.io/documentation/columns/basics/">
Columns
</a>
<a class="navbar-item " href="http://bulma.io/documentation/layout/container/">
Layout
</a>
</div>
</div>
</div>
<hr class="navbar-divider">
<div class="navbar-item">
<div class="navbar-content">
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
<strong>Stay up to date!</strong>
</div>
</div>
<div class="level-right">
<div class="level-item">
<a class="button bd-is-rss is-small" href="http://bulma.io/atom.xml">
<span class="icon is-small">
<i class="fa fa-rss"></i>
</span>
<span>Subscribe</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="navbar-item">
Home
</a>
</div>
<div class="navbar-end">
<a class="navbar-item is-hidden-desktop-only" href="https://github.com/jgthms/bulma" target="_blank">
<span class="icon" style="color: #333;">
<i class="fa fa-github"></i>
</span>
</a>
<a class="navbar-item is-hidden-desktop-only" href="https://twitter.com/jgthms" target="_blank">
<span class="icon" style="color: #55acee;">
<i class="fa fa-twitter"></i>
</span>
</a>
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="http://bulma.io" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&hashtags=bulmaio&url=http://bulma.io&via=jgthms">
<span class="icon">
<i class="fa fa-twitter"></i>
</span>
<span>
Tweet
</span>
</a>
</p>
<p class="control">
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.1.zip">
<span class="icon">
<i class="fa fa-download"></i>
</span>
<span>Download</span>
</a>
</p>
</div>
</div>
</div>
</div>
</nav>
Currently in bulma.min.css .navbar-dropdown has:
position: absolute;
left: 0;
Thus you could add those 2 lines to do the trick:
left: 50%; // will position it at 50% of its relative parent (the .navbar)
transform: translateX(-50%); // will translate it 50% of its own width to the left
I want to have a layout that has a header and a fotoer and between header and footer there are some list items with posts. Im using bootstrap, I want the header to look like this:
But its not working, its showing like this: https://jsfiddle.net/83vnj5ru/1/.
The search icon dont have a background white color and the Filter 1 and Filter 2 dropdowns are not aligned at the right like in the image. Do you know why?
HTML:
<div class="container py-5">
<div class="row">
<div class="col">
<ul class="list-group forum">
<li class="list-group-item bg-custom-light2 py-4">
<div class="row">
<form class="col-5">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-search"></i></span>
</div>
<input type="email" class="form-control" id="exampleInputEmail1"
aria-describedby="emailHelp" placeholder="Search">
</div>
</div>
</form>
</div>
<div class="col-7 text-right">
<div class="dropdown">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter 1
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">item1</a>
</div>
</div>
<div class="dropdown">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter 2
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">item1</a>
</div>
</div>
</div>
</li>
<li class="list-group-item">list item 1</li>
<li class="list-group-item">list item 2</li>
<li class="list-group-item bg-custom-light2 py-4">container footer</li>
</ul>
</div>
</div>
</div>
CSS:
.bg-custom-light2{
background-color: #fafafa;
}
.input-group-text, .input-group-prepend{
background-color:none;
}
.input-group-text{
color:gray;
}
See if it helps you
.bg-custom-light2{
background-color: #fafafa;
}
.input-group-text, .input-group-prepend{
background-color:none;
}
.input-group-text{
color:gray;
}
.filters{
width: auto;
display: inline-block;
}
.search-icon{
background-color: #ffffff !important;
border: 1px solid #ced4da !important;
border-right: 1px solid transparent !important;
}
.search-input{
border-left: 1px solid transparent !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<div class="container py-5">
<div class="row">
<div class="col">
<ul class="list-group forum">
<li class="list-group-item bg-custom-light2 py-4">
<div class="row">
<form class="col-5">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text search-icon"><i class="fa fa-search"></i></span>
</div>
<input type="email" class="form-control search-input" id="exampleInputEmail1"
aria-describedby="emailHelp" placeholder="Search">
</div>
</div>
</form>
<div class="col-7 text-right">
<div class="dropdown filters">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter 1
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">item1</a>
</div>
</div>
<div class="dropdown filters">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter 2
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">item1</a>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item">list item 1</li>
<li class="list-group-item">list item 2</li>
<li class="list-group-item bg-custom-light2 py-4">container footer</li>
</ul>
</div>
</div>
</div>
Is there an easy way to do something similar to this in bootstrap? A search bar with a drop down selector for a different category? I've been looking through their documentation, something similar to this but with the dropdown being attached to the search bar is what I'm looking for. I want it to be part of my navbar. I recall seeing an example online but can't seem to find it now. Also wondering where it would go in relation to my header at the moment
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<nav>
<ul class="nav pull-left">
<li><%= link_to 'New Review',
if (current_user)
new_review_path
else
log_in_path
end %></li>
</ul>
</nav>
<nav>
<ul class="nav pull-right">
<li><%= link_to "Home", '/' %></li>
<li><%= link_to "Help", '#' %></li>
<% if current_user %>
<li><%= link_to "Log out", log_out_path %>
<% else %>
<li><%= link_to "Sign up", sign_up_path %></li>
<li><%= link_to "Log in", log_in_path %></li>
<% end %>
</ul>
</nav>
</div>
</div>
</header>
Please, refer this it satisfied your requirement
HTML:
<div class="container">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">Filter by</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Contains</li>
<li>It's equal</li>
<li>Greather than ></li>
<li>Less than < </li>
<li class="divider"></li>
<li>Anything</li>
</ul>
</div>
<input type="hidden" name="search_param" value="all" id="search_param">
<input type="text" class="form-control" name="x" placeholder="Search term...">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
</div>
</div>
</div>
CSS:
body{
margin-top:20px;
}
JS:
$(document).ready(function(e){
$('.search-panel .dropdown-menu').find('a').click(function(e) {
e.preventDefault();
var param = $(this).attr("href").replace("#","");
var concept = $(this).text();
$('.search-panel span#search_concept').text(concept);
$('.input-group #search_param').val(param);
});
});
Refer this link
http://bootsnipp.com/snippets/featured/search-panel-with-filters
See if this example that helps you..
javascript:
/* activate scrollspy menu */
$('body').scrollspy({
target: '#navbar-collapsible',
offset: 50
});
/* smooth scrolling sections */
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - 50
}, 1000);
return false;
}
}
});
CSS:
/*
A custom Bootstrap 3.1 template
from http://bootply.com
This CSS code should follow the 'bootstrap.css'
in your HTML file.
license: MIT
author: bootply.com
*/
html,body {
height:100%;
background:center no-repeat fixed url('/assets/example/bg_suburb.jpg');
background-size: cover;
}
.icon-bar {
background-color:#fff;
}
.navbar-trans {
background-color:#279ddd;
color:#fff;
}
.navbar-trans li>a:hover,.navbar-trans li>a:focus,.navbar-trans li.active {
background-color:#38afef;
}
.navbar-trans a{
color:#fefefe;
}
.navbar-trans .form-control:focus {
border-color: #eee;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(100,100,100,0.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(100,100,100,0.6);
}
section {
padding-top:70px;
padding-bottom:50px;
min-height:calc(100% - 1px);
}
.v-center {
padding-top:10%;
font-size:70px;
}
.well {
border-color:transparent;
}
a.list-group-item.active,[class*='-info'] {
background-color: #168ccc;
color:#fff;
}
#section1 {
background-color: #168ccc;
color:#dedeff;
}
#section2 {
background-color: #e5e5ef;
color:#686868;
}
#section3 {
background-color: #168ccc;
color:#ddd;
}
#section4 {
background-color: #fff;
color:#444;
}
#section5,#section7,#section7 a {
color:#f5f5f5;
}
#section6 {
background-color: #168ccc;
color:#ddd;
}
footer {
background-color:#494949;
color:#ddd;
min-height:100px;
padding-top:20px;
padding-bottom:40px;
}
footer .nav>li>a {
padding:3px;
color:#ccc;
}
footer .nav>li>a:hover {
background-color:transparent;
color:#fff;
}
HTML:
<nav class="navbar navbar-trans navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
<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="#">Brand</a>
</div>
<div class="navbar-collapse collapse" id="navbar-collapsible">
<ul class="nav navbar-nav navbar-left">
<li>What</li>
<li>When</li>
<li>How</li>
<li>Four</li>
<li>Five</li>
<li>Why</li>
<li>Who</li>
<li> </li>
</ul>
<form class="navbar-form">
<div class="form-group" style="display:inline;">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-chevron-down"></span></button>
<ul class="dropdown-menu">
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
</div>
<input type="text" class="form-control" placeholder="What are searching for?">
<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span> </span>
</div>
</div>
</form>
</div>
</div>
</nav>
<section class="container-fluid" id="section1">
<h1 class="text-center v-center">Sectionalize.</h1>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="row">
<div class="col-sm-10 col-sm-offset-2 text-center"><h3>Robust</h3><p>There is other content and snippets of details or features that can be placed here..</p><i class="fa fa-cog fa-5x"></i></div>
</div>
</div>
<div class="col-sm-4 text-center">
<div class="row">
<div class="col-sm-10 col-sm-offset-1 text-center"><h3>Simple</h3><p>You may also want to create content that compells users to scroll down more..</p><i class="fa fa-user fa-5x"></i></div>
</div>
</div>
<div class="col-sm-4 text-center">
<div class="row">
<div class="col-sm-10 text-center"><h3>Clean</h3><p>In the first 30 seconds of a user's visit to your site they decide if they're going to stay..</p><i class="fa fa-mobile fa-5x"></i></div>
</div>
</div>
</div><!--/row-->
<div class="row"><br></div>
</div><!--/container-->
</section>
<section class="container-fluid" id="section2">
<div class="row">
<div class="col-sm-8 col-sm-offset-2 text-center">
<h1>What is Bootstrap?</h1>
<br>
<p class="lead">Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It is the No.1 project on GitHub with 65,000+ stars and 23,800 forks (as of March 2014) [1] and has been used by NASA and MSNBC, among many others..</p>
<br>
<i style="font-size:120px" class="fa fa-camera fa-5x"></i>
<p>Big 'ol Camera Icon</p>
</div>
</div>
</section>
<section class="container-fluid" id="section3">
<h1 class="text-center">Bootstrap is Responsive</h1>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h3 class="text-center">Vertical scrolling has become a popular and lasting trend in Web design.</h3>
<div class="row">
<div class="col-xs-4 col-xs-offset-1">Some brand-tacular designs even have home page content that is taller that 12,000 pixels. That's a lotta content.</div>
<div class="col-xs-2"></div>
<div class="col-xs-4 text-right">Anyhoo, this is just some random blurb of text, and Bootply.com is a playground and code editor for Bootstrap.</div>
</div>
<p class="text-center">
<img src="/assets/example/img_mtnpeople.png" class="img-responsive center-block ">
</p>
</div>
</div>
</section>
<section class="container-fluid" id="section4">
<h2 class="text-center">Change this Content. Change the world.</h2>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<img src="/assets/example/bg_smartphones.jpg" class="img-responsive center-block ">
<p class="text-center">Images will scale down proportionately as browser width narrows.</p>
</div>
</div>
</section>
<section class="container-fluid" id="section5">
<div class="col-sm-10 col-sm-offset-1">
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-12">
<div class="list-group">
<a href="#" class="list-group-item active">
<h2 class="list-group-item-heading">Basic</h2>
<h6>Free to get started</h6>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Option 100 - more about this</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Option 2 - this is more about this</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Option 3 GB</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Option 4</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Feature</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Feature</p>
</a>
<a href="#" class="list-group-item">
<button class="btn btn-primary btn-lg btn-block">Get Started</button>
</a>
</div>
</div><!--/left-->
<div class="col-sm-4 col-xs-12">
<div class="list-group text-center">
<a href="#" class="list-group-item active">
<h2 class="list-group-item-heading">Better</h2>
<h6>Most popular plan</h6>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Option 200 - more about this</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Option 2 - this is more about this</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Option 5 GB</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Option 6</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Feature</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Feature</p>
</a>
<a href="#" class="list-group-item">
<button class="btn btn-default btn-lg btn-block">$10 per month</button>
</a>
</div>
</div><!--/middle-->
<div class="col-sm-4 col-xs-12">
<div class="list-group text-right">
<a href="#" class="list-group-item active">
<h2 class="list-group-item-heading">Best</h2>
<h6>For enterprise grade</h6>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Option 100 - more about this</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Option 2 - this is more about this</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Option 8 GB</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Option 10</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Unlimited</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Unlimited</p>
</a>
<a href="#" class="list-group-item">
<button class="btn btn-default btn-lg btn-block">$20 per month</button>
</a>
</div>
</div><!--/right-->
</div><!--/row-->
</div><!--/container-->
</div>
</section>
<section class="container-fluid" id="section6">
<h2 class="text-center">Do you see what I mean?</h2>
<p class="text-center lead">Add some compelling information here</p>
<img src="/assets/example/bg_iphone.png" class="img-responsive center-block ">
</section>
<section class="container" id="section7">
<h1 class="text-center">Social Media Fascination</h1>
<div class="row">
<!--fontawesome icons-->
<div class="col-sm-1 col-sm-offset-2 col-xs-4 text-center">
<i class="fa fa-github fa-4x"></i>
</div>
<div class="col-sm-1 col-xs-4 text-center">
<i class="fa fa-foursquare fa-4x"></i>
</div>
<div class="col-sm-1 col-xs-4 text-center">
<i class="fa fa-facebook fa-4x"></i>
</div>
<div class="col-sm-1 col-xs-4 text-center">
<i class="fa fa-pinterest fa-4x"></i>
</div>
<div class="col-sm-1 col-xs-4 text-center">
<i class="fa fa-google-plus fa-4x"></i>
</div>
<div class="col-sm-1 col-xs-4 text-center">
<i class="fa fa-twitter fa-4x"></i>
</div>
<div class="col-sm-1 col-xs-4 text-center">
<i class="fa fa-dribbble fa-4x"></i>
</div>
<div class="col-sm-1 col-xs-4 text-center">
<i class="fa fa-instagram fa-4x"></i>
</div>
</div><!--/row-->
<div class="row">
<div class="col-md-12 text-center">
<br><br>
<p>
Get the code for this template.
</p>
</div>
</div>
</section>
<footer id="footer">
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3 column">
<h4>Information</h4>
<ul class="nav">
<li>Products</li>
<li>Services</li>
<li>Benefits</li>
<li>Developers</li>
</ul>
</div>
<div class="col-xs-6 col-md-3 column">
<h4>Follow Us</h4>
<ul class="nav">
<li>Twitter</li>
<li>Facebook</li>
<li>Google+</li>
<li>Pinterest</li>
</ul>
</div>
<div class="col-xs-6 col-md-3 column">
<h4>Contact Us</h4>
<ul class="nav">
<li>Email</li>
<li>Headquarters</li>
<li>Management</li>
<li>Support</li>
</ul>
</div>
<div class="col-xs-6 col-md-3 column">
<h4>Customer Service</h4>
<ul class="nav">
<li>About Us</li>
<li>Delivery Information</li>
<li>Privacy Policy</li>
<li>Terms & Conditions</li>
</ul>
</div>
</div><!--/row-->
</div>
</footer>
http://bootply.com/129806
This is a full-width search form in the navbar along with an input-group-btn on the left side of the input that is used as a dropdown of categories.
I have a problem where I have these div boxes (.span4), they all remain inside a .row-fluid (which is the container with white background). The problem is that the boxes exceed their width and "stick out".
Is there some way to make the spacing between the .span4's to auto adjust to the container width?
See jsfiddle here:
http://jsfiddle.net/QcSqx/1/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="main-container">
<div class="row-fluid">
<div class="span12">
<h3 class="mycharacters">My characters</h3>
<div class="btn-group pull-right" data-toggle="buttons-radio">
<i class="icon-th-large"></i>
<i class="icon-list"></i>
</div>
<div class="btn-group pull-right">
<a class="add-character-button btn btn-success btn-small dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-plus icon-white"></i> Add character
</a>
<ul class="dropdown-menu">
<li>Add manually</li>
<li class="nav-header">Import</li>
<li>.dnd4e-file</li>
</ul>
</div>
<i class="icon-cog icon-white"></i> Back to Uberview
</div>
</div>
<div class="row">
<div class="span12" id="actor_result"><div class="row-fluid">
<div class="span4 well well-small"><div class="media">
<a class="pull-left" href="#"><img class="media-object img-circle actor" src="http://qnap.mcederman.com/images/avatar/actor/Davius.png"></a><div class="overflow-media-body media-body">
<div class="btn-group pull-right">
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu">
<li><a href="actor_profile?id=1"><i class="icon-pencil"></i> Edit
</a></li>
<li><a href="set_avatar_actor?id=1"><i class="icon-picture"></i> Change avatar
</a></li>
<li><a href="actorview?delete&id=1"><i class="icon-trash"></i> Delete
</a></li>
</ul>
</div>
<h4 class="media-heading">Davius</h4>
<div>
<i class="icon-heart"></i><strong> Health: </strong>17/20hp</div>
<br><br>
</div>
<div>
<i class="icon-fire"></i><strong> Effects: </strong>
</div>
<div id="actoreffects" class="actor-text">aaaaaaa
a
a
a</div>
<div>
<i class="icon-edit"></i><strong> Notes: </strong>
</div>
<div id="actornotes" class="actor-text">hehe
asa
sd
asd</div>
</div></div>
<div class="span4 well well-small"><div class="media">
<a class="pull-left" href="#"><img class="media-object img-circle actor" src="http://qnap.mcederman.com/images/avatar/actor/Awesome%20Maximus.png"></a><div class="overflow-media-body media-body">
<div class="btn-group pull-right">
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu">
<li><a href="actor_profile?id=3"><i class="icon-pencil"></i> Edit
</a></li>
<li><a href="set_avatar_actor?id=3"><i class="icon-picture"></i> Change avatar
</a></li>
<li><a href="actorview?delete&id=3"><i class="icon-trash"></i> Delete
</a></li>
</ul>
</div>
<h4 class="media-heading">Awesomeson Maaaximilian</h4>
<div>
<i class="icon-heart"></i><strong> Health: </strong>10/30hp</div>
<br><br>
</div>
<div>
<i class="icon-fire"></i><strong> Effects: </strong>
</div>
<div id="actoreffects" class="actor-text">herro</div>
<div>
<i class="icon-edit"></i><strong> Notes: </strong>
</div>
<div id="actornotes" class="actor-text">lol</div>
</div></div>
<div class="span4 well well-small"><div class="media">
<a class="pull-left" href="#"><img class="media-object img-circle actor" src="http://qnap.mcederman.com/images/avatar/actor/Master%20Thief%20Sven.png"></a><div class="overflow-media-body media-body">
<div class="btn-group pull-right">
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu">
<li><a href="actor_profile?id=4"><i class="icon-pencil"></i> Edit
</a></li>
<li><a href="set_avatar_actor?id=4"><i class="icon-picture"></i> Change avatar
</a></li>
<li><a href="actorview?delete&id=4"><i class="icon-trash"></i> Delete
</a></li>
</ul>
</div>
<h4 class="media-heading">Master Thief Sven</h4>
<div>
<i class="icon-heart"></i><strong> Health: </strong>20/13hp</div>
<br><br>
</div>
<div>
<i class="icon-fire"></i><strong> Effects: </strong>
</div>
<div id="actoreffects" class="actor-text">Yeeeeeesss.....huh? ah! ...yeeees</div>
<div>
<i class="icon-edit"></i><strong> Notes: </strong>
</div>
<div id="actornotes" class="actor-text">wes</div>
</div></div>
<div class="span4 well well-small"><div class="media">
<a class="pull-left" href="#"><img class="media-object img-circle actor" src="http://qnap.mcederman.com/images/avatar/actor/Giant%20Frederic.png"></a><div class="overflow-media-body media-body">
<div class="btn-group pull-right">
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu">
<li><a href="actor_profile?id=5"><i class="icon-pencil"></i> Edit
</a></li>
<li><a href="set_avatar_actor?id=5"><i class="icon-picture"></i> Change avatar
</a></li>
<li><a href="actorview?delete&id=5"><i class="icon-trash"></i> Delete
</a></li>
</ul>
</div>
<h4 class="media-heading">Giant Frederic</h4>
<div>
<i class="icon-heart"></i><strong> Health: </strong>25/27hp</div>
<br><br>
</div>
<div>
<i class="icon-fire"></i><strong> Effects: </strong>
</div>
<div id="actoreffects" class="actor-text">Farting</div>
<div>
<i class="icon-edit"></i><strong> Notes: </strong>
</div>
<div id="actornotes" class="actor-text">I will cruuuush you!</div>
</div></div>
<div class="span4 well well-small"><div class="media">
<a class="pull-left" href="#"><img class="media-object img-circle actor" src="http://qnap.mcederman.com/images/avatar/actor/One%20eyed%20idiot.jpeg"></a><div class="overflow-media-body media-body">
<div class="btn-group pull-right">
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu">
<li><a href="actor_profile?id=6"><i class="icon-pencil"></i> Edit
</a></li>
<li><a href="set_avatar_actor?id=6"><i class="icon-picture"></i> Change avatar
</a></li>
<li><a href="actorview?delete&id=6"><i class="icon-trash"></i> Delete
</a></li>
</ul>
</div>
<h4 class="media-heading">One eyed idiot</h4>
<div>
<i class="icon-heart"></i><strong> Health: </strong>25/35hp</div>
<br><br>
</div>
<div>
<i class="icon-fire"></i><strong> Effects: </strong>
</div>
<div id="actoreffects" class="actor-text">Rested</div>
<div>
<i class="icon-edit"></i><strong> Notes: </strong>
</div>
<div id="actornotes" class="actor-text">Can't see straight</div>
</div></div>
</div>
</div>
</div>
</div>
</div>
bootstrap puts padding and borders on the well class, which will make the span4s overflow when you add the well class to that div. my suggestion would be to nest the well classes within the span4 divs..
<div class="span4">
<div class="well well-small">
Contents of the div within the well
</div>
</div>
also, it looks like you tried putting 4 boxes on a line.. when you have 12 columns to work with, and you want to put 4 columns in a row-fluid row, you should use span3 (span3 * 4columns = 12 - full width)