I am new in Bootstrap 3.
I am trying to create a customized list in Bootstrap 3.
What I have done is-
HTML-
<ul class="list-group">
<li class="list-group-item" id="baal">
<div class="inline" style="width : 10%;">
1
</div>
<div class="inline" style="width : 10%;">
2
</div>
<div class="inline nopadding" style="width : 60%">
<div>
name
</div>
<div>
<div class="inline" style="width : 33%;">
31
</div>
<div class="inline" style="width : 33%;">
32
</div>
<div class="inline" style="width : 33%;">
33
</div>
</div>
<div>
XXXX
</div>
</div>
<div class="inline" style="width : 10%;">
4
</div>
<div class="inline" style="width : 10%;">
5
</div>
</li>
<li class="list-group-item">Music</li>
<li class="list-group-item">Videos</li>
</ul>
CSS-
div.inline
{
float:left;
overflow: auto;
}
li.list-group-item
{
min-height: 100px;
vertical-align : center;
}
And getting a list like this-
But I want to have the inner items vertically aligned.
So I want to have a output like it-
Can anyone help me please?
Thanks in advance for helping.
This lends itself to using a sub-menu rather than divs. See -
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
li.list-group-item {
min-height: 100px;
vertical-align: center;
}
.sub li {
display: inline-block;
vertical-align: middle;
text-align: center;
width: 10%;
}
<ul class="list-group">
<li class="list-group-item" id="baal">
<ul class="sub">
<li class="inline">1</li>
<li class="inline">2</li>
<li class="inline">
<p>name</p>
<p>31</p>
<p>XXXX</p>
</li>
<li class="inline">32</li>
<li class="inline">33</li>
<li class="inline">4</li>
<li class="inline">5</li>
</ul>
</li>
<li class="list-group-item">Music</li>
<li class="list-group-item">Videos</li>
</ul>
Use the grid system, probably worth noting however that this will only work with up to 12 records.
<div class="container">
<div class="row">
<div class="col-lg-1 col-lg-offset-2">
Name
</div>
</div>
<div class="row">
<div class="col-lg-1">
1
</div>
<div class="col-lg-1">
2
</div>
<div class="col-lg-1">
3
</div>
<div class="col-lg-1">
4
</div>
<div class="col-lg-1">
5
</div>
<div class="col-lg-1">
6
</div>
<div class="col-lg-1">
7
</div>
</div>
<div class="row">
<div class="col-lg-1 col-lg-offset-2">
xxxx
</div>
</div>
</div>
produces:
if you want to use "vertical-align", you should add "display: table-cell" to the .list-group-item class
Related
I am just learning how to use css and bootstrap to create an website based on a psd template, problem is that i cant keep my search box inside the container and it stays in the bottom of it.
Here is my code
.search-area {
margin-top: 3px;
text-align: right;
}
.search-area input {
background: #333333;
color: #ffffff;
border: 0px solid;
}
<body>
<div id="header-area1">
<div class="container">
<div class="top-header col-12 bg-succes">
<div class="left-header col-8">
<div class="feed-area">
<ul>
<li> Sign Up</li>
<li> Login</li>
<li> Rss Feed</li>
<li id="last"> Archived News</li>
</ul>
</div>
<div class="right-header col-4">
<div class="search-area">
<form action="">
<input type="textplaceholder=" Search...">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
I rewrote your code to fix it. do not forget to user "row" class out of your columns in bootstrap
<div id="header-area1">
<div class="container">
<div class="top-header col-12 bg-succes">
<div class="row">
<div class="left-header col-8">
<div class="feed-area">
<ul>
<li> Sign Up</li>
<li> Login</li>
<li> Rss Feed</li>
<li id="last"> Archived News</li>
</ul>
</div>
</div>
<div class="right-header col-4">
<div class="search-area">
<form action="">
<input type="textplaceholder=" Search...">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
Update my answer missing of row before col
.search-area {
margin-top: 3px;
text-align: right;
}
.search-area input {
background: #333333;
color: #ffffff;
border: 0px solid;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<body>
<div id="header-area1">
<div class="container">
<div class="top-header row bg-succes">
<div class=" col-8">
<div class="feed-area">
<ul>
<li> Sign Up</li>
<li> Login</li>
<li> Rss Feed</li>
<li id="last"> Archived News</li>
</ul>
</div>
</div>
<div class=" col-4">
<div class="search-area">
<form action="">
<input type="text" placeholder=" Search...">
</form>
</div>
</div>
</div>
</div>
</div>
</body>
Use this HTML structure for right align to searchbox.
Add col-6 with feed-area class. And instead os this <div class="left-header col-8"> use this <div class="left-header row">
<div id="header-area1">
<div class="container">
<div class="row">
<div class="top-header col-12 bg-succes">
<div class="left-header row">
<div class="feed-area col-6">
<ul>
<li>
Sign Up
</li>
<li>
Login
</li>
<li>
Rss Feed
</li>
<li id="last">
Archived News
</li>
</ul>
</div>
<div class="right-header col-4">
<div class="search-area">
<form action="">
<input type="textplaceholder=">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.search-area {
margin-top: 3px;
text-align: right;
}
.search-area input {
background: #333333;
color: #ffffff;
border: 0px solid;
}
So here is my problem. I use some ui-grid on my interface to show information, but I would like to have 2 grid of 3 columns side by side (aligned vertically). So far, I haven't found exemple of it and i tried to code it, but without success. Is there someone here with better experience then me who knows how its possible? So far, that's what i thought about the solution :
<ul data-role="listview" data-inset="true" data-icon="false">
<li data-role="list-divider">
<div class="ui-grid-b" style="width: 50%">
<div class="ui-block-a">Header 1</div>
<div class="ui-block-b">Header 2</div>
<div class="ui-block-c">Header 3</div>
</div>
<div class="ui-grid-b" style="width: 50%; float: right">
<div class="ui-block-a">Header 1</div>
<div class="ui-block-b">Header 2</div>
<div class="ui-block-c">header 3</div>
</div>
</li>
</ul>
I just try to get two table side by side like this one:https://jsfiddle.net/8o39tqgz/1/
EDIT
Just tried display: inline, but it doesn't work on the same line... https://jsfiddle.net/s71zpcgs/
How about this?
<ul data-role="listview" data-inset="true" data-icon="false">
<li data-role="list-divider">
<div class="ui-grid-b" style="width: 50%; float: left">
<div class="ui-block-a column" >Header 1</div>
<div class="ui-block-b column" >Header 2</div>
<div class="ui-block-c column" >header 3</div>
</div>
<div class="ui-grid-b" style="width: 50%; float: left">
<div class="ui-block-a column" >Header 1</div>
<div class="ui-block-b column" >Header 2</div>
<div class="ui-block-c column" >header 3</div>
</div>
</li>
</ul>
And then at your css add this
.column{
width:33%;
float:left;
/* you can optionally set a fixed height */
}
I guess its not exactly what I wanted, but that will do it. Ty to #ezanker for the solution :
HTML
<div data-role="page" id="page1">
<div data-role="header">
<h1>My page</h1>
</div>
<div role="main" class="ui-content">
<ul data-role="listview" data-inset="true" data-icon="false" class="gridUL">
<li data-role="list-divider">
<div class="ui-grid-a bothGrids">
<div class="ui-block-a">
<table class="halfGrid" style="width: 98%" >
<thead>
<tr><th>header 1</th><th>header 2</th><th>header 3</th></tr>
</thead>
<tbody>
<tr><td>content 1</td><td>Some bigger content in this cell</td><td>content 3</td></tr>
<tr><td>content 1</td><td>content 2</td><td>content 3</td></tr>
</tbody>
</table>
</div>
<div class="ui-block-b ">
<table class="halfGrid" style="width: 98%">
<thead>
<tr><th>header 1</th><th>header 2</th><th>header 3</th></tr>
</thead>
<tbody>
<tr><td>content 1</td><td>content 2</td><td>content 3</td></tr>
<tr><td>content 1</td><td>content 2</td><td>content 3</td></tr>
</tbody>
</table>
</div>
</div>
</li></ul>
</div>
</div>
CSS
.halfGrid {
margin-left: 1%;
margin-right: 1%;
border-spacing: 0;
border-collapse: collapse;
}
.halfGrid td, .halfGrid th {
border: 1px solid #aaa;
padding: 4px;
text-align: center;
width: 33%;
font-weight: normal;
white-space: normal;
}
.halfGrid th {
font-weight: bold;
}
IMPORTANT EDIT
Actually, I got the idea of splitting the screen in two and wrap one table in each side and that work exactly as I wanted! Im so happy, I was working on it for many hours... Felt like running in circle, but its finally done! Here is the code :
HTML
<div class="wrap">
<div class="fleft">
<ul data-role="listview" data-inset="true" data-icon="false" style="min-width:350px">
<li data-role="list-divider">
<div class="ui-grid-b">
<div class="ui-block-a" style="width:33%">PN</div>
<div class="ui-block-b" style="width:34%">Amendment</div>
<div class="ui-block-c" style="width:33%">Designation</div>
</div>
</li>
<!-- Data found -->
<li>
<a href="javascript:alert('Hello world');">
<div class="ui-grid-b">
<div class="ui-block-a" style="width:33%">Info1</div>
<div class="ui-block-b" style="width:34%">Info2</div>
<div class="ui-block-c" style="width:33%">Info3</div>
</div>
</a>
</li>
</ul>
</div>
<div class="fright">
<ul data-role="listview" data-inset="true" data-icon="false" style="min-width:350px">
<li data-role="list-divider">
<div class="ui-grid-b">
<div class="ui-block-a" style="width:33%">PN</div>
<div class="ui-block-b" style="width:34%">Amendment</div>
<div class="ui-block-c" style="width:33%">Designation</div>
</div>
</li>
<!-- Data found -->
<li>
<a href="javascript:alert('Hello world');">
<div class="ui-grid-b">
<div class="ui-block-a" style="width:33%">Info1</div>
<div class="ui-block-b" style="width:34%">Info2</div>
<div class="ui-block-c" style="width:33%">Info3</div>
</div>
</a>
</li>
</ul>
</div>
</div>
CSS
.wrap
{
width: 100%;
overflow:auto;
padding:2px;
}
.fleft
{
float:left;
width: 50%;
}
.fright
{
float: right;
width: 50%;
}
Found solution in this post : Split page vertically using CSS and integrated the part of my code. Here is the jsfiddle : http://jsfiddle.net/G6N5T/1211/
You could nest two 3 column grids within one 2 column grid:
<ul data-role="listview" data-inset="true" data-icon="false" class="gridUL">
<li data-role="list-divider">
<div class="ui-grid-a bothGrids">
<div class="ui-block-a">
<div class="ui-grid-b halfGrid">
<div class="ui-block-a cell">header 1</div>
<div class="ui-block-b cell">header 2</div>
<div class="ui-block-c cell">header 3</div>
</div>
</div>
<div class="ui-block-b ">
<div class="ui-grid-b halfGrid">
<div class="ui-block-a cell">Header 1</div>
<div class="ui-block-b cell">Header 2</div>
<div class="ui-block-c cell">header 3</div>
</div>
</div>
</div>
</li>
</ul>
.halfGrid {
margin-left: 1%;
margin-right: 1%;
}
.halfGrid .cell {
border: 1px solid #aaa;
padding: 4px;
text-align: center;
}
Updated FIDDLE
I am using a customized li element in Bootstrap 3.
What I want is something like it-
.
What I have done is-
HTML-
<ul class="list-group">
<li class="list-group-item" id="baal">
<div style="display: inline;">
<div class="inline">
Anything <img id="image_click" src="http://www.neatimage.com/im/lin_logo.gif">
</div>
<div class="inline">
<img id="image_click" src="http://www.neatimage.com/im/lin_logo.gif">
</div>
<blockquote>
<p>angulard it's obviously tremendously helpful to a lot of people - they took the time to search for a solution,</p>
</blockquote>
<div>
More thing
</div>
</div>
</li>
<li class="list-group-item">
<div class="inline">
<div>
1
</div>
<div>
2
</div>
</div>
<div class="divider-vertical"></div>
<div class="inline">
<div>
3
</div>
<div>
4
</div>
</div>
</li>
<li class="list-group-item">Music</li>
<li class="list-group-item">Videos</li>
</ul>
So, the div's HTML is something like-
<li class="list-group-item">
<div class="inline">
<div>
1
</div>
<div>
2
</div>
</div>
<div class="divider-vertical"></div>
<div class="inline">
<div>
3
</div>
<div>
4
</div>
</div>
</li>
And the CSS is -
/* List Item Styling */
div.inline
{
float:left;
}
.divider-vertical
{
height: 50px;
margin: 0 9px;
border-left: 1px solid #F2F2F2;
border-right: 1px solid #FFF;
}
/* End - List Item Styling */
But what I am getting is-
Can anyone help me to solve this problem?
Thanks in advance for helping.
Use the .clearfix class as follows:
<li class="list-group-item">
<div class="inline">
<div>
1
</div>
<div>
2
</div>
</div>
<div class="divider-vertical"></div>
<div class="inline">
<div>
3
</div>
<div>
4
</div>
</div>
<div class="clearfix"></div>
</li>
css:
/* List Item Styling */
div.inline, .divider-vertical
{
height: 50px;
float:left;
}
.divider-vertical
{
margin: 0 9px;
border-left: 1px solid #F2F2F2;
border-right: 1px solid #FFF;
}
My pen: http://codepen.io/helloworld/pen/yyoJGR
Why is the white separater and the list-grouping flowing through the divs or the parent row?
<div class="container columnStyle">
<div class="row">
<div class="row-same-height">
<div class="col-xs-3 col-xs-height">
<img class="img-responsive" src="http://s7.postimg.org/agarkavmj/whoiswho.png"></img>
</div>
<div class="col-xs-9 col-xs-height" >
<div class="container">
<div class="row">
<div class="page-header">
<h1>Who is who
<p>
<small>Organization & Processes</small>
</p>
</h1>
</div>
</div>
</div>
<div class="container">
<div class="row">
<ul class="list-group">
<li class="list-group-item">Org Charts </li>
<li class="list-group-item">GAM / KAM Charts</li>
<li class="list-group-item">Process flow</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
.columnStyle{
background: #006AB3;
}
Because you use the class .containermultiple times.
This class has a fixed width of 1170px;
.container {
width: 1170px;
}
you should have only 1 .containerfor the wrapper and then, inside of it, remove the other .container and just use .row
See it in action : http://codepen.io/anon/pen/ogeLRb
I have some problem in bootstrap, I develope website but after completation of website client say they dont want to responsive website.
So, I first fix the .container width to 960px !important;
It will works..!! But Problem is I am also using .row class every where row class is making responsiveness which its contains..
I want 100% width background at footer but when I resize browser & scroll horizontally it will removes the background color.
What can I do...
See Website : Snapshot 1
When browser resize then see Whats the problem occure : Snapshot 2
my html code is written in bootstrap 3 :
<footer>
<div class="row footercolor">
<div class="container">
<div class="row">
<div class="col-xs-2 ">
<div class="row">
<h5 class="undr footertitle">Lorem Ipsum</h5>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<h5 class="undr footertitle">QUICK LINKS</h5>
<div class="col-xs-6">
<ul class="footerlist list-group">
</ul>
</div>
<div class="col-xs-6">
<ul class="footerlist list-group">
</ul>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="row">
<h5 class="undr footertitle">OUR NEIGHBORHOODS</h5>
<div class="col-xs-6">
<ul class="footerlist list-group">
</ul>
</div>
<div class="col-xs-6">
<ul class="footerlist list-group ">
</ul>
</div>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<h5 class="undr footertitle">GET WEEKLY LISTING UPDATES</h5>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon btn-ftrbtn">Add Me</span>
</div>
</div>
<div class="row"><br/></div>
<div class="row">
<ul class="list-unstyled list-inline pull-right">
<li><img src="img/fb.png"></li>
<li><img src="img/twitter.png"></li>
<li><img src="img/pintrest.png"></li>
</ul>
</div>
</div>
</div>
</div>
</div> <!-- /container -->
</footer>
& My CSS Code is :
.footercolor {
background-color: #5e6872;
}
.footer{color:#c6c6c9}
.footertitle {
font-family: 'myriad_prosemibold_condensed' !important;
font-size: 13px!important;
color: #fff !important;
letter-spacing: 0.5px;
}
.footerlist li a {
font-family: 'myriad_prolight_semicondensed' !important;
font-size: 12px!important;
color: #c6c6c9 !important;
text-decoration: none
}
.footerlist li a:hover {
color: #fff !important;
cursor: pointer
}
.row {
margin-left: 0 !important;
margin-right: 0 !important;
}
.container{min-width:960px !important;}
At the last Please Give me solution for that...
Any Help will be appreciated...
Add the below code to your CSS file will fix the issue.
html, body {
min-width:960px;
}
You have incorrect markup for bootstrap mate....
Use container > row > span
Instead of :
<div class="row footercolor">
<div class="container">
Order should be :
<div class="container footercolor"> <!-- notice the reverse order now -->
<div class="row ">