i used two different menu for desktop and mobile. when i go in mobile view collapse menu is not working.I use:
$(".navbar-collapse").collapse('hide');
After using this on page load it shows first then hide.
Here is my mobile menu code:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="top-header">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header pull-left" style="margin-left:5px">
<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>
</div>
<a href="http://localhost/eboighar/" class="logo-mini">
<img src="http://localhost/eboighar/img/eboi-s-logo.png" alt="Eboighar Small Logo">
</a>
<div class="pull-right cart-mview-top">
<a id="cart_at_head2" class="pull-right">
<div class="total" style="margin-top:10px;">
<span style="color: #666666;font-size: 14px;margin-top: 13px;padding-right: 5px;" id="headeritems3">0</span>
</div>
<img src="http://localhost/eboighar/img/cart.png" style="margin-right:5px;border-left: 1px solid #b3b3b3; margin-top: 0px;padding-left: 5px;" alt="cart">
</a>
<!-- <img class="header-busket" src="asset/busket.png"/> -->
<div id="cart-sumary2" class=" col-xs-12 m-tab-view" style="display : none;background:#fafafa;">
<div class="cart-sumary2-mobile" style="background:#fafafa;">
<h4 class="txt-blue" style="text-align:center">Cart Summary</h4>
<img id="close_cart_up2" class="close-cart" src="http://localhost/eboighar/img/minus.png" alt="eboighar Ico" style="position: absolute;top:15px; right:15px; height:16px;">
<div>
<div class="padding-10" id="cart_item_holder2">
<div class="bg-fa">
<div id="cart_product_list2" class="mCustomScrollbar _mCS_2 mCS-autoHide mCS_no_scrollbar"><div id="mCSB_2" class="mCustomScrollBox mCS-dark mCSB_vertical mCSB_inside" style="max-height: 300px;" tabindex="0"><div id="mCSB_2_container" class="mCSB_container mCS_y_hidden mCS_no_scrollbar_y" style="position:relative; top:0; left:0;" dir="ltr"><div class="btm-border-sum no_item"><strong>You Cart is empty</strong>
<div class="clear_both"></div>
</div></div><div id="mCSB_2_scrollbar_vertical" class="mCSB_scrollTools mCSB_2_scrollbar mCS-dark mCSB_scrollTools_vertical" style="display: none;"><div class="mCSB_draggerContainer"><div id="mCSB_2_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height: 30px; top: 0px;" oncontextmenu="return false;"><div class="mCSB_dragger_bar" style="line-height: 30px;"></div></div><div class="mCSB_draggerRail"></div></div></div></div></div>
<div id="price_and_button2" style="display: none;">
<div class="pull-right" style="font-size:18px;">Total : Tk <font id="cart_list_total2" class="text-red">0.00</font></div>
<div class="clear_both"></div>
<div class="crt_btn_con ">
</div>
</div>
</div>
</div>
</div>
</div><!-- End of Cart Summery. -->
</div>
<div class="clearfix"> </div>
</div>
</div>
<div stylle="clear:both; margin:0 5px;">
<form class="menu-search-frm" role="search" action="http://localhost/eboighar/index.php/index/searchbookview_m/" method="post" onsubmit="return submfrom_2(0)" name="searchForm_2" id="searchForm_2">
<div class="form-group menu-top-search">
<div class="input-group" style="padding:0 6px;">
<input class="form-control" style="border:1px solid #ccc;background:#fff;" id="search2" name="search2" autocomplete="off" onkeyup="lookup_2(this.value,event);" value="" placeholder="Enter Book Title, Author or Publisher" type="text">
<div class="suggestionsBox" id="suggestions_2" style="display: none; position:absolute; z-index:999999999999999999;background:#fff;left: 27%;top:30px;">
<!-- <img src="http://localhost/eboighar/images/view/upArrow.png" style="position: relative; top: -10px; left: 30px;" alt="upArrow" /> -->
<div class="suggestionList" id="autoSuggestionsList_2" style="max-height:300px; overflow:auto">
</div>
</div>
<div class="input-group-btn">
<a style="border:0px;" class="btn btn-default add_serch glyphicon glyphicon-search" id="basic-addon2" href="javascript:submfrom_2(1); "> </a>
</div>
</div>
</div>
</form>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="m_menu_top_con" class="navbar-collapse collapse mobile-menu-top" aria-expanded="false">
<div style="clear:both"></div>
<a id="close_mobile_menu" class="close_mobile_menu btn pull-right" style=" margin: -6px -10px -3px;padding: 0;border:none !important"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
<div style="clear:both"></div>
<ul class="nav navbar-nav ">
<li class="active">
<i class="glyphicon glyphicon-home ico-danger"></i> Home
</li>
<li>
<i class="glyphicon glyphicon-user ico-success"></i> About eBoighar
</li>
<li><span><img class="nav-2-ico_ac" src="http://localhost/eboighar/img/howtobuy.PNG" alt="Eboighar How to Buy"></span>How to buy books</li>
<li><i class=" glyphicon glyphicon-tasks ico-warning"></i> Order unlisted books</li>
<!-- <li><i class="glyphicon glyphicon-file ico-info"></i> Tutorials</li> -->
<li><i class="glyphicon glyphicon-gift ico-danger"></i> Bulk order</li>
<li><i class="glyphicon glyphicon-briefcase ico-success"></i> Medical equipment</li>
<li><i class="glyphicon glyphicon-print ico-info"></i> Printing & Binding </li>
<li>
<i class="glyphicon glyphicon-globe ico-warning"></i> News
</li>
<li>
<i class="glyphicon glyphicon-earphone ico-info"></i> Contact Us
</li>
</ul>
<div style="clear:both"></div>
<p class="log pull-right" style="margin-bottom:10px;">
<a class="" href="http://localhost/eboighar/index.php/index/login" style="font-size:12px; color:#000000; padding: 5px 7px;"><i class="glyphicon glyphicon-lock"></i>Login</a>
<a class="" href="http://localhost/eboighar/index.php/index/signup/" style="font-size:12px; color:#000000; padding: 5px 7px;"><i class="glyphicon glyphicon-user"></i>Signup</a>
</p>
</div><!-- /.navbar-collapse -->
</nav>
You can see problem Here : http://eboighar.com/
Some one help to solve this...
Related
I have a grid view (using flex box approach) and i want to change it to list view using style sheet and j query/java script. Problem: Since in grid view approach all elements are in separate div, while changing it to list view they all need to be in single line (some still need vertically aligned) and this is responsive application.
I have created style sheet class to change flex box from row to column and things look good. But now all div are not in single line. Need some help with style sheet class.
On click of a button, i will remove grid-row, grid-item and add grid-column and grid-column-item classes. But as shown in HTML, it is all div structure in grid-item class. I need to change this div as well (like product_search_img class on extreme left in a single line followed by next three div in one column (in same line) and then followed by price, add to cart button in one column.
Current Layout:
Required Layout:
.grid-row {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
.grid-item {
height: 400px;
flex-basis: 25%;
-ms-flex: auto;
max-width: 230px;
position: relative;
padding: 7px;
box-sizing: border-box;
}
.grid-column {
display: flex;
flex-flow: column wrap;
justify-content: flex-start;
}
.grid-column-item {
height: 200px;
flex-basis: 25%;
-ms-flex: auto;
max-width: 920px;
position: relative;
padding: 7px;
border-bottom: 1px solid #ccc;
}
.grid-column-item:first-child {
margin-top: 7px;
border-top: 1px solid #ccc;
}
<div class="grid-row">
<div class="grid-item" data-rank="1">
<div class="product_info_panel">
<div class="font-12 text-align-left margin-left-sm margin-top-sm">
<span class="color-font-blue bold">Sponsored</span>
</div>
<a href="#" data-name="sponsored_search_result_link">
<div class="product_search_img">
<img class="img-thumbnail" src="https://cdn.images.express.co.uk/img/dynamic/67/590x/Cristiano-Ronaldo-1069886.jpg?r=1547113668491" title="i5 (6th Gen) i5-6300U Dual-core (2 Core) " width="100%">
</div>
</a>
<div class="font-10 text-align-left status-flag">
<a tabindex="0" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag1 ProductAssociationCategoryFlagsList" data-toggle="popover" data-content="This product has accessories" id="statusflag1" data-original-title=""
title="This product has accessories">Accessories</a>
<a tabindex="1" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag2 HideProductStatusFlag" data-toggle="popover" data-content="body" id="statusflag2" data-original-title="" title=""></a>
</div>
<a href="#" data-name="sponsored_search_result_link" data-identifier="92440Z">
<div class="p-line-3 font-14 margin-top-lg margin-bottom-sm textUpperCase color-font-blue text-align-left" title="HP Book">
i5-6300U Dual-core (2 Core)
</div>
</a>
<div class="font-12 text-align-left margin-top-md">
<div class="show">
<span class="color-font-dark-gray bold">VPN: </span><span class="color-font-dark-gray">F47UT</span>
</div>
<div class="show">
<span class="color-font-dark-gray bold">SKU: </span><span class="color-font-dark-gray">440Z</span>
</div>
</div>
<div class="font-24 font-light margin-top-sm margin-bottom-sm text-align-left">$1,345.46</div>
<div class="row" id="login-mode-cntl">
<div class="color-font-green margin-bottom-sm">In Stock</div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3 padding-vsm">
<input class="form-control text-center AddInput-default" title="Please enter the value">
</div>
<div class="col-xs-9 col-sm-9 padding-vsm">
<button type="button" class="form-control btn AddBtn-default font-12 textUpperCase bold AddBtn" title="Add To Cart">
<i class="fas fa-shopping-cart"></i>
Add
</button>
</div>
</div>
</div>
</div>
<div class="grid-item" data-rank="1">
<div class="product_info_panel">
<div class="font-12 text-align-left margin-left-sm margin-top-sm">
<span class="color-font-blue bold">Sponsored</span>
</div>
<a href="#" data-name="sponsored_search_result_link">
<div class="product_search_img">
<img class="img-thumbnail" src="https://cdn.images.express.co.uk/img/dynamic/67/590x/Cristiano-Ronaldo-1069886.jpg?r=1547113668491" title="i5 (6th Gen) i5-6300U Dual-core (2 Core) " width="100%">
</div>
</a>
<div class="font-10 text-align-left status-flag">
<a tabindex="0" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag1 ProductAssociationCategoryFlagsList" data-toggle="popover" data-content="This product has accessories" id="statusflag1" data-original-title=""
title="This product has accessories">Accessories</a>
<a tabindex="1" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag2 HideProductStatusFlag" data-toggle="popover" data-content="body" id="statusflag2" data-original-title="" title=""></a>
</div>
<a href="#" data-name="sponsored_search_result_link" data-identifier="92440Z">
<div class="p-line-3 font-14 margin-top-lg margin-bottom-sm textUpperCase color-font-blue text-align-left" title="HP Book">
i5-6300U Dual-core (2 Core)
</div>
</a>
<div class="font-12 text-align-left margin-top-md">
<div class="show">
<span class="color-font-dark-gray bold">VPN: </span><span class="color-font-dark-gray">F47UT</span>
</div>
<div class="show">
<span class="color-font-dark-gray bold">SKU: </span><span class="color-font-dark-gray">440Z</span>
</div>
</div>
<div class="font-24 font-light margin-top-sm margin-bottom-sm text-align-left">$1,345.46</div>
<div class="row" id="login-mode-cntl">
<div class="color-font-green margin-bottom-sm">In Stock</div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3 padding-vsm">
<input class="form-control text-center AddInput-default" title="Please enter the value">
</div>
<div class="col-xs-9 col-sm-9 padding-vsm">
<button type="button" class="form-control btn AddBtn-default font-12 textUpperCase bold AddBtn" title="Add To Cart">
<i class="fas fa-shopping-cart"></i>
Add
</button>
</div>
</div>
</div>
</div>
<div class="grid-item" data-rank="1">
<div class="product_info_panel">
<div class="font-12 text-align-left margin-left-sm margin-top-sm">
<span class="color-font-blue bold">Sponsored</span>
</div>
<a href="#" data-name="sponsored_search_result_link">
<div class="product_search_img">
<img class="img-thumbnail" src="https://cdn.images.express.co.uk/img/dynamic/67/590x/Cristiano-Ronaldo-1069886.jpg?r=1547113668491" title="i5 (6th Gen) i5-6300U Dual-core (2 Core) " width="100%">
</div>
</a>
<div class="font-10 text-align-left status-flag">
<a tabindex="0" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag1 ProductAssociationCategoryFlagsList" data-toggle="popover" data-content="This product has accessories" id="statusflag1" data-original-title=""
title="This product has accessories">Accessories</a>
<a tabindex="1" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag2 HideProductStatusFlag" data-toggle="popover" data-content="body" id="statusflag2" data-original-title="" title=""></a>
</div>
<a href="#" data-name="sponsored_search_result_link" data-identifier="92440Z">
<div class="p-line-3 font-14 margin-top-lg margin-bottom-sm textUpperCase color-font-blue text-align-left" title="HP Book">
i5-6300U Dual-core (2 Core)
</div>
</a>
<div class="font-12 text-align-left margin-top-md">
<div class="show">
<span class="color-font-dark-gray bold">VPN: </span><span class="color-font-dark-gray">F47UT</span>
</div>
<div class="show">
<span class="color-font-dark-gray bold">SKU: </span><span class="color-font-dark-gray">440Z</span>
</div>
</div>
<div class="font-24 font-light margin-top-sm margin-bottom-sm text-align-left">$1,345.46</div>
<div class="row" id="login-mode-cntl">
<div class="color-font-green margin-bottom-sm">In Stock</div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3 padding-vsm">
<input class="form-control text-center AddInput-default" title="Please enter the value">
</div>
<div class="col-xs-9 col-sm-9 padding-vsm">
<button type="button" class="form-control btn AddBtn-default font-12 textUpperCase bold AddBtn" title="Add To Cart">
<i class="fas fa-shopping-cart"></i>
Add
</button>
</div>
</div>
</div>
</div>
<div class="grid-item" data-rank="1">
<div class="product_info_panel">
<div class="font-12 text-align-left margin-left-sm margin-top-sm">
<span class="color-font-blue bold">Sponsored</span>
</div>
<a href="#" data-name="sponsored_search_result_link">
<div class="product_search_img">
<img class="img-thumbnail" src="https://cdn.images.express.co.uk/img/dynamic/67/590x/Cristiano-Ronaldo-1069886.jpg?r=1547113668491" title="i5 (6th Gen) i5-6300U Dual-core (2 Core) " width="100%">
</div>
</a>
<div class="font-10 text-align-left status-flag">
<a tabindex="0" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag1 ProductAssociationCategoryFlagsList" data-toggle="popover" data-content="This product has accessories" id="statusflag1" data-original-title=""
title="This product has accessories">Accessories</a>
<a tabindex="1" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag2 HideProductStatusFlag" data-toggle="popover" data-content="body" id="statusflag2" data-original-title="" title=""></a>
</div>
<a href="#" data-name="sponsored_search_result_link" data-identifier="92440Z">
<div class="p-line-3 font-14 margin-top-lg margin-bottom-sm textUpperCase color-font-blue text-align-left" title="HP Book">
i5-6300U Dual-core (2 Core)
</div>
</a>
<div class="font-12 text-align-left margin-top-md">
<div class="show">
<span class="color-font-dark-gray bold">VPN: </span><span class="color-font-dark-gray">F47UT</span>
</div>
<div class="show">
<span class="color-font-dark-gray bold">SKU: </span><span class="color-font-dark-gray">440Z</span>
</div>
</div>
<div class="font-24 font-light margin-top-sm margin-bottom-sm text-align-left">$1,345.46</div>
<div class="row" id="login-mode-cntl">
<div class="color-font-green margin-bottom-sm">In Stock</div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3 padding-vsm">
<input class="form-control text-center AddInput-default" title="Please enter the value">
</div>
<div class="col-xs-9 col-sm-9 padding-vsm">
<button type="button" class="form-control btn AddBtn-default font-12 textUpperCase bold AddBtn" title="Add To Cart">
<i class="fas fa-shopping-cart"></i>
Add
</button>
</div>
</div>
</div>
</div>
</div>
From your comment, I believe you're already able to get the outer block to work as required, in the example below I have edited and created 3 separate blocks and did some restructuring.
Also, check the In Stock div, it will toggle between list_view and grid_view.
There will be few additional divs you will need to create deeper inside second_block example to handle VPN and SKU in the same line for List View.
.grid-row {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
.grid-item {
/* height: 400px; */
flex-basis: 25%;
-ms-flex: auto;
max-width: 230px;
position: relative;
padding: 7px;
box-sizing: border-box;
border: 2px solid red;
}
.grid-column {
display: flex;
flex-flow: column wrap;
justify-content: flex-start;
}
.grid-column-item {
height: 200px;
flex-basis: 25%;
-ms-flex: auto;
max-width: 920px;
position: relative;
padding: 7px;
border-bottom: 1px solid #ccc;
}
.grid-column-item:first-child {
margin-top: 7px;
border-top: 1px solid #ccc;
}
.outer_block {
display: flex;
flex-direction: column;
}
.list_view {
display: none;
}
#media only screen and (max-width: 800px) {
.grid-row {
flex-direction: column;
}
.grid-item {
min-width: 100%;
}
.outer_block {
flex-direction: row;
}
.img-thumbnail {
width: 100px;
}
.second_block {
flex: 1;
}
.grid_view {
display: none;
}
}
<div class="grid-row">
<div class="grid-item" data-rank="1">
<div class="product_info_panel">
<div class="font-12 text-align-left margin-left-sm margin-top-sm">
<span class="color-font-blue bold">Sponsored</span>
</div>
<div class="outer_block">
<div class="first_block">
<!-- Image -->
<a href="#" data-name="sponsored_search_result_link">
<div class="product_search_img">
<img class="img-thumbnail" src="https://cdn.images.express.co.uk/img/dynamic/67/590x/Cristiano-Ronaldo-1069886.jpg?r=1547113668491" title="i5 (6th Gen) i5-6300U Dual-core (2 Core) " width="100%" />
</div>
</a>
</div>
<div class="second_block">
<!-- Accessories Text -->
<div class="font-10 text-align-left status-flag">
<a tabindex="0" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag1 ProductAssociationCategoryFlagsList" data-toggle="popover" data-content="This product has accessories" id="statusflag1" data-original-title=""
title="This product has accessories">Accessories</a
>
<a
tabindex="1"
role="button"
data-placement="bottom"
data-trigger="focus"
class="color-font-black bold statusflag statusflag2 HideProductStatusFlag"
data-toggle="popover"
data-content="body"
id="statusflag2"
data-original-title=""
title=""
></a>
</div>
<!-- Link to Prod Description -->
<a href="#" data-name="sponsored_search_result_link" data-identifier="92440Z">
<div class="p-line-3 font-14 margin-top-lg margin-bottom-sm textUpperCase color-font-blue text-align-left" title="HP Book">
i5-6300U Dual-core (2 Core)
</div>
</a>
<!-- VPN AND SKU -->
<div class="font-12 text-align-left margin-top-md">
<div class="show">
<span class="color-font-dark-gray bold">VPN: </span
><span class="color-font-dark-gray">F47UT</span>
</div>
<div class="show">
<span class="color-font-dark-gray bold">SKU: </span
><span class="color-font-dark-gray">440Z</span>
</div>
</div>
<!-- In Stock when in List View-->
<div id="login-mode-cntl" class="list_view">
<div class="color-font-green margin-bottom-sm">In Stock</div>
</div>
</div>
<div class="third_block">
<!-- Adding Button -->
<div class="row">
<!-- Price -->
<div class="font-24 font-light margin-top-sm margin-bottom-sm text-align-left">
$1,345.46
</div>
<!-- In Stock when in Grid View-->
<div class="row" id="login-mode-cntl" class="grid_view">
<div class="color-font-green margin-bottom-sm">In Stock</div>
</div>
<div class="col-xs-3 col-sm-3 padding-vsm">
<input class="form-control text-center AddInput-default" title="Please enter the value" />
</div>
<div class="col-xs-9 col-sm-9 padding-vsm">
<button type="button" class="form-control btn AddBtn-default font-12 textUpperCase bold AddBtn" title="Add To Cart">
<i class="fas fa-shopping-cart"></i>
Add
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This is my first post here so please don't be mad at me if I'm doing something wrong.
Here is the case: Trying to add bootstrap 3 scrollspy functionality into my code on codepen and it's basically not working. Tried different solutions from stackoverflow, etc. and nothing helps.
Is there any good person who can take look into my code?
HTML:
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Patryk Jamróz</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active">About <span class="sr-only">(current)</span></li>
<li>Projects</li>
<li>Contact </li>
</ul>
</nav><!-- navbar -->
<div data-spy="scroll" data-target="#nav" data-offset="0">
<h3 class="text-center" id="about">about</h3>
<h3 class="text-center" id="projects">projects</h3>
<h3 class="text-center" id="contact">contact</h3>
</div>
CSS:
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-left: 0;
margin-right: 0;
}
body {
position: relative;
}
In codepen settings tab I included:
CSS:
bootstrap.min.css
JS:
jquery.min.js
bootstrap.min.js
Here is a link to my codepen: https://codepen.io/PatrykJamroz/full/RMZJva
First thing is you need to initiate the body and not a div tag so your body should have the following:
<body data-spy="scroll" data-target=".navbar" data-offset="0">
And not the:
<div data-spy="scroll" data-target="#nav" data-offset="0">
because the body is the thing that the scroll event is attached to so initiating a div does no good unless you are scrolling with that div.
Next you need to attach it the the .navbar or the nav itself would be the best practice. And also I see that you are using jquery 3 and this may cause an issue with bootstrap 3 so you may want to switch to jquery 2.
I think that you don't really undestand how bootstrap scrollspy actually work. You have to make the 'body' as the main scrollspy container! take a look:
$('body').scrollspy({
target: '#bs-example-navbar-collapse-1'
})
$('#scrollDiv').on('activate.bs.scrollspy', function () {
//Do stuff if there is a new event in scrollspy
})
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-left: 0;
margin-right: 0;
}
body {
position: relative;
}
<div id="scrollDiv" class="container-fluid" data-spy="scroll" data-target="#bs-example-navbar-collapse-1">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Patryk Jamróz</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active">About <span class="sr-only">(current)</span></li>
<li>Projects</li>
<li>Contact </li>
</ul>
</nav><!-- navbar -->
<div>
<div id="about" class="col-md-12">
<h3 class="text-center">about</h3>
<div class="row">
<div class="col-sm-6">
<img class="img-responsive center-block" src="https://thumb1.shutterstock.com/display_pic_with_logo/2877733/272163653/stock-photo-happy-young-man-wearing-glasses-and-smiling-as-he-works-on-his-laptop-to-get-all-his-business-272163653.jpg" alt="not me">
</div>
<div class="col-sm-6">
<h4>Mechanical Designer</h4>
<p><span><i class="fa fa-user-circle"></i></span> An open-minded, creative and focused on new tech solutions</br>
<span><i class="fa fa-tv"></i></span> Excellent knowledge of such tools as SolidWorks and SolidWorks Simulation</br
<span><i class="fa fa-check"></i></span> FCT, ICT, EOL test systems, rack cabinets, inline systems and sheet metal</br>
<span><i class="fa fa-language"></i></span> English language advanced both speaking and writing</br>
<span><i class="fa fa-graduation-cap"></i></span> AGH UST graduate - Master of Engineering in Mechanical Engineering</br>
<span><i class="fa fa-coffee"></i></span> Automotive, active lifestyle, IT</p>
</div>
</div>
</div>
</div> <!-- About section -->
<hr>
<div id="projects" class="col-md-12">
<h3 class="text-center">projects</h3>
<div class="row">
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="http://www.hawkridgesys.com/blog/wp-content/uploads/2018/01/01-Improving-Assembly-Performance-with-SpeedPak.png" alt="dron">
1st well
</div>
</div>
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="https://embedwistia-a.akamaihd.net/deliveries/678ea92af801e6c2d37e149980d62bcc38d7770b.jpg" alt="engine">
2nd well
</div>
</div>
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="https://blog.onu1.com/hubfs/solidworks-2018-3d-interconnect.png?t=1520267377858" alt="whatever">
3rd well
</div>
</div>
</div> <!-- Projects 1st row -->
<div class="row">
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="https://blog.onu1.com/hubfs/solidworks-2018-3d-interconnect.png?t=1520267377858" alt="whatever">
4th well
</div>
</div>
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="https://blog.onu1.com/hubfs/solidworks-2018-3d-interconnect.png?t=1520267377858" alt="whatever">
5th well
</div>
</div>
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="https://blog.onu1.com/hubfs/solidworks-2018-3d-interconnect.png?t=1520267377858" alt="whatever">
6th well
</div>
</div>
</div> <!-- Projects 2nd row -->
</div>
<hr>
<div id="contact" class="col-md-12">
<h3 class="text-center">contact</h3>
<h3 class="text-center">Don't hesitate to contact me at:</h3>
<div class="col-xs-12" style="height:5px;"></div>
<h4 class="text-center"><span><i class="fa fa-envelope"></i></span> jamroz.patryk#gmail.com</h4>
<h3 class="text-center">...or just fill the form below!</h3>
<div class="col-xs-12" style="height:5px;"></div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">E-mail</span>
<input type="text" class="form-control" placeholder="Your E-mail address" aria-describedby="basic-addon1">
</div> <!-- email input-->
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Name</span>
<input type="text" class="form-control" placeholder="Your name" aria-describedby="basic-addon1">
</div> <!-- name input -->
<div class="input-group input-group-lg">
<span class="input-group-addon" id="basic-addon1">Message</span>
<input type="text" class="form-control" placeholder="Your message to me" aria-describedby="basic-addon1">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Send!</button>
</span>
</div> <!-- message input -->
</div>
<div class="col-xs-12" style="height:50px;"></div>
<div class="panel-footer text-center">Made by Patryk Jamróz. March 2018.</div>
</div><!-- Container fluid -->
In that way it work! Good luck, bye.
u can try whit jquery
$("#yourtarget").click(function() {
$('html, body').animate({
scrollTop: $("#yourDiv").offset().top
}, 2000);
});
I am looking to get a container containing a row and then a list-group-horizontal group of items and ensure that it fills the entire HTML page horizontally, and is centered. Currently, these group items bunch to the left and do not fill the page horizontally until the screen size is very narrow, rescaling to lower width when the page is reduced in width.
Currently the result of the code is the following:
I want category 1, 2 and 3 to fill the page, and adjust when more categories are added.
/*!
* Start Bootstrap - Shop Homepage HTML Template (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
body {
padding-top: 70px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
.slide-image {
width: 100%;
}
.list-group-horizontal .list-group-item {
display: inline-block;
}
.list-group-horizontal .list-group-item {
margin-bottom: 0;
margin-left:-4px;
margin-right: 0;
}
.list-group-horizontal .list-group-item:first-child {
border-top-right-radius:0;
border-bottom-left-radius:4px;
}
.list-group-horizontal .list-group-item:last-child {
border-top-right-radius:4px;
border-bottom-left-radius:0;
}
.carousel-holder {
margin-bottom: 30px;
}
.carousel-control,
.item {
border-radius: 4px;
}
.caption {
height: 130px;
overflow: hidden;
}
.caption h4 {
white-space: nowrap;
}
.thumbnail img {
width: 100%;
}
.ratings {
padding-right: 10px;
padding-left: 10px;
color: #d17581;
}
.thumbnail {
padding: 0;
}
.thumbnail .caption-full {
padding: 9px;
color: #333;
}
footer {
margin: 50px 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Shop Homepage - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<!-- <link href="css/bootstrap.min.css" rel="stylesheet">-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Custom CSS -->
<link href="css/shop-homepage.css" rel="stylesheet">
<link href="css/dropdown.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<!-- Support paging via http://www.tutorialspoint.com/php/mysql_paging_php.htm-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">eBuy Platform</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
Your Profile
</li>
<li>
<!-- This should be dependent on your user type-->
Your Bids/Your Auctions
</li>
<li>
<!-- This should be depending on user type-->
Submit Auction
</li>
<li>
Logout
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="container">
<div class="row">
<div class="col-md-12" style="padding-top:50px">
<p class="lead">Username</p>
<div class="list-group list-group-horizontal">
Category 1
Category 2
Category 3
</div>
</div>
<!-- End of row of categories-->
</div>
</div>
<!-- Page Content -->
<div class="container">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="input-group" id="adv-search">
<input type="text" class="form-control" placeholder="Search for items" />
<div class="input-group-btn">
<div class="btn-group" role="group">
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="filter">Filter by</label>
<select class="form-control">
<option value="0" selected>All Snippets</option>
<option value="1">Featured</option>
<option value="2">Most popular</option>
<option value="3">Top rated</option>
<option value="4">Most commented</option>
</select>
</div>
<div class="form-group">
<label for="contain">Author</label>
<input class="form-control" type="text" />
</div>
<div class="form-group">
<label for="contain">Contains the words</label>
<input class="form-control" type="text" />
</div>
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</form>
</div>
</div>
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Start listings of auctions-->
<div class="col-md-9">
<!--
<div class="row carousel-holder" style="padding-top:50px">
<div class="col-md-12">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img class="slide-image" src="http://placehold.it/800x300" alt="">
</div>
<div class="item">
<img class="slide-image" src="http://placehold.it/800x300" alt="">
</div>
<div class="item">
<img class="slide-image" src="http://placehold.it/800x300" alt="">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
-->
<div class="row" style="padding-top:50px">
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$24.99</h4>
<h4>First Auction
</h4>
<p>Description of product</p>
</div>
<div class="ratings">
<p class="pull-right">15 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$64.99</h4>
<h4>Second Auction
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">12 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$74.99</h4>
<h4>Third Auction
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">31 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$84.99</h4>
<h4>Fourth Auction
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">6 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$94.99</h4>
<h4>Fifth Auction
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">18 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>
<!--
<div class="col-sm-4 col-lg-4 col-md-4">
To be filled out
</div>
-->
</div>
</div>
</div>
</div>
<!-- /.container -->
<div class="container">
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Your Website 2014</p>
</div>
</div>
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
.Here where you have <!--Start listings of auctions--> .col-md-9, change to .col-md-12
Update:
Add to .list-group-horizontal .list-group-item this:
width:33.3%;
text-align:center
Snippet
/*!
* Start Bootstrap - Shop Homepage HTML Template (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
body {
padding-top: 70px;
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
.slide-image {
width: 100%;
}
.list-group-horizontal .list-group-item {
display: inline-block;
width:33.3%;
text-align:center
}
.list-group-horizontal .list-group-item {
margin-bottom: 0;
margin-left: -4px;
margin-right: 0;
}
.list-group-horizontal .list-group-item:first-child {
border-top-right-radius: 0;
border-bottom-left-radius: 4px;
}
.list-group-horizontal .list-group-item:last-child {
border-top-right-radius: 4px;
border-bottom-left-radius: 0;
}
.carousel-holder {
margin-bottom: 30px;
}
.carousel-control,
.item {
border-radius: 4px;
}
.caption {
height: 130px;
overflow: hidden;
}
.caption h4 {
white-space: nowrap;
}
.thumbnail img {
width: 100%;
}
.ratings {
padding-right: 10px;
padding-left: 10px;
color: #d17581;
}
.thumbnail {
padding: 0;
}
.thumbnail .caption-full {
padding: 9px;
color: #333;
}
footer {
margin: 50px 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<!-- Support paging via http://www.tutorialspoint.com/php/mysql_paging_php.htm-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">eBuy Platform</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
Your Profile
</li>
<li>
<!--This should be dependent on your user type-->
Your Bids/Your Auctions
</li>
<li>
<!-- This should be depending on user type-->
Submit Auction
</li>
</ul>
<!-- /.navbar-collapse -->
</div>
</div>
<!-- /.container -->
</nav>
<div class="container">
<div class="row">
<div class="col-md-12" style="padding-top:50px">
<p class="lead">Username</p>
<div class="list-group list-group-horizontal">
Category 1
Category 2
Category 3
</div>
</div>
<!-- End of row of categories-->
</div>
</div>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="input-group" id="adv-search">
<input type="text" class="form-control" placeholder="Search for items" />
<div class="input-group-btn">
<div class="btn-group" role="group">
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span>
</button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="filter">Filter by</label>
<select class="form-control">
<option value="0" selected>All Snippets</option>
<option value="1">Featured</option>
<option value="2">Most popular</option>
<option value="3">Top rated</option>
<option value="4">Most commented</option>
</select>
</div>
<div class="form-group">
<label for="contain">Author</label>
<input class="form-control" type="text" />
</div>
<div class="form-group">
<label for="contain">Contains the words</label>
<input class="form-control" type="text" />
</div>
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</form>
</div>
</div>
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Start listings of auctions-->
<div class="col-md-12">
<div class="row" style="padding-top:50px">
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$24.99</h4>
<h4>First Auction
</h4>
<p>Description of product</p>
</div>
<div class="ratings">
<p class="pull-right">15 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$64.99</h4>
<h4>Second Auction</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">12 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$74.99</h4>
<h4>Third Auction
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">31 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$84.99</h4>
<h4>Fourth Auction
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">6 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$94.99</h4>
<h4>Fifth Auction
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">18 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>
<!--
<div class="col-sm-4 col-lg-4 col-md-4">
To be filled out
</div>
-->
</div>
</div>
<!-- /.container -->
<div class="container">
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Your Website 2014</p>
</div>
</div>
</footer>
</div>
<!-- /.container -->
I want to modify the calendar in the index.html page of the free template
here
I'm trying to add the ability to add and delete events in the calendar. What should I add to this particular fraction of code?
<li>Add new event</li>
<li>Clear events</li>
<li class="divider"></li>
<li>View calendar</li>
The code for the calender is given below
<div class="box box-solid bg-green-gradient">
<div class="box-header ui-sortable-handle" style="cursor: move;">
<i class="fa fa-calendar"></i>
<h3 class="box-title">Calendar</h3>
<!-- tools box -->
<div class="pull-right box-tools">
<!-- button with a dropdown -->
<div class="btn-group">
<button class="btn btn-success btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-bars"></i></button>
<ul class="dropdown-menu pull-right" role="menu">
<li>Add new event</li>
<li>Clear events</li>
<li class="divider"></li>
<li>View calendar</li>
</ul>
</div>
<button class="btn btn-success btn-sm" data-widget="collapse"><i class="fa fa-minus"></i></button>
<button class="btn btn-success btn-sm" data-widget="remove"><i class="fa fa-times"></i></button>
</div><!-- /. tools -->
</div><!-- /.box-header -->
<div class="box-body no-padding">
<!--The calendar -->
<div id="calendar" style="width: 100%"><div class="datepicker datepicker-inline"><div class="datepicker-days" style="display: block;"><table class="table table-condensed"><thead><tr><th class="prev" style="visibility: visible;">«</th><th colspan="5" class="datepicker-switch">June 2015</th><th class="next" style="visibility: visible;">»</th></tr><tr><th class="dow">Su</th><th class="dow">Mo</th><th class="dow">Tu</th><th class="dow">We</th><th class="dow">Th</th><th class="dow">Fr</th><th class="dow">Sa</th></tr></thead><tbody><tr><td class="old day">31</td><td class="day">1</td><td class="day">2</td><td class="day">3</td><td class="day">4</td><td class="day">5</td><td class="day">6</td></tr><tr><td class="day">7</td><td class="day">8</td><td class="day">9</td><td class="day">10</td><td class="day">11</td><td class="day">12</td><td class="day">13</td></tr><tr><td class="day">14</td><td class="day">15</td><td class="day">16</td><td class="day">17</td><td class="day">18</td><td class="day">19</td><td class="day">20</td></tr><tr><td class="day">21</td><td class="day">22</td><td class="day">23</td><td class="day">24</td><td class="day">25</td><td class="day">26</td><td class="day">27</td></tr><tr><td class="day">28</td><td class="day">29</td><td class="day">30</td><td class="new day">1</td><td class="new day">2</td><td class="new day">3</td><td class="new day">4</td></tr><tr><td class="new day">5</td><td class="new day">6</td><td class="new day">7</td><td class="new day">8</td><td class="new day">9</td><td class="new day">10</td><td class="new day">11</td></tr></tbody><tfoot><tr><th colspan="7" class="today" style="display: none;">Today</th></tr><tr><th colspan="7" class="clear" style="display: none;">Clear</th></tr></tfoot></table></div><div class="datepicker-months" style="display: none;"><table class="table table-condensed"><thead><tr><th class="prev" style="visibility: visible;">«</th><th colspan="5" class="datepicker-switch">2015</th><th class="next" style="visibility: visible;">»</th></tr></thead><tbody><tr><td colspan="7"><span class="month">Jan</span><span class="month">Feb</span><span class="month">Mar</span><span class="month">Apr</span><span class="month">May</span><span class="month">Jun</span><span class="month">Jul</span><span class="month">Aug</span><span class="month">Sep</span><span class="month">Oct</span><span class="month">Nov</span><span class="month">Dec</span></td></tr></tbody><tfoot><tr><th colspan="7" class="today" style="display: none;">Today</th></tr><tr><th colspan="7" class="clear" style="display: none;">Clear</th></tr></tfoot></table></div><div class="datepicker-years" style="display: none;"><table class="table table-condensed"><thead><tr><th class="prev" style="visibility: visible;">«</th><th colspan="5" class="datepicker-switch">2010-2019</th><th class="next" style="visibility: visible;">»</th></tr></thead><tbody><tr><td colspan="7"><span class="year old">2009</span><span class="year">2010</span><span class="year">2011</span><span class="year">2012</span><span class="year">2013</span><span class="year">2014</span><span class="year">2015</span><span class="year">2016</span><span class="year">2017</span><span class="year">2018</span><span class="year">2019</span><span class="year new">2020</span></td></tr></tbody><tfoot><tr><th colspan="7" class="today" style="display: none;">Today</th></tr><tr><th colspan="7" class="clear" style="display: none;">Clear</th></tr></tfoot></table></div></div></div>
</div><!-- /.box-body -->
<div class="box-footer text-black">
<div class="row">
<div class="col-sm-6">
<!-- Progress bars -->
<div class="clearfix">
<span class="pull-left">Task #1</span>
<small class="pull-right">90%</small>
</div>
<div class="progress xs">
<div class="progress-bar progress-bar-green" style="width: 90%;"></div>
</div>
<div class="clearfix">
<span class="pull-left">Task #2</span>
<small class="pull-right">70%</small>
</div>
<div class="progress xs">
<div class="progress-bar progress-bar-green" style="width: 70%;"></div>
</div>
</div><!-- /.col -->
<div class="col-sm-6">
<div class="clearfix">
<span class="pull-left">Task #3</span>
<small class="pull-right">60%</small>
</div>
<div class="progress xs">
<div class="progress-bar progress-bar-green" style="width: 60%;"></div>
</div>
<div class="clearfix">
<span class="pull-left">Task #4</span>
<small class="pull-right">40%</small>
</div>
<div class="progress xs">
<div class="progress-bar progress-bar-green" style="width: 40%;"></div>
</div>
</div><!-- /.col -->
</div><!-- /.row -->
</div>
</div>
The links for 'Add new event' and 'Clear events' will just lead you to the top of the page which is indicated when you say href="#". Perhaps you should look into adding a function so when 'Add new event' is clicked something happens. It would look similiar to this:
<li onclick="myFunction()>Add new event</li>
Or maybe you want to take the user to a new page:
Add new event
When I load my page, (it's made with Bootstrap - - http://themejulies.tumblr.com) , it looks like this:
When I push the info button in the left corner (which opens a div), the little down arrow towards the bottom of the page moves up.
How do I make it so that I can click the info button to open the div, and the little down arrow does not move up?
And here's the code:
<div class="container-fluid" id="foo" style="z-index:5; display:none; height:auto;">
<center>
<div class="container-fluid" style="height:auto; margin-top:2%;">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-3" style=" margin-top:1%;"><img class="avatar-style-circle" src="{PortraitURL-128}" /><br/><h3>{AuthorName}</h3></div>
<div class="col-xs-12 col-md-6" style="background-color:blue; margin-top:2%;"><p style="text-align:justify;">{Description}<br/></p></div></div></div>
<div class="container-fluid" style="height:auto; margin-top:2%; margin-bottom:2%;">
<center>
<div class="container-fluid">
<div class="input-group">
</div>
<form action="/search" method="get">
<input type="text" name="q" value="{SearchQuery}" placeholder="{lang:Search}" class="form-control" placeholder="Search for...">
</form>
</div><!-- /input-group -->
<br/>
<div class="btn-group" role="group" aria-label="..."> Ask
Archive
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Pages
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" style="z-index:5; margin-left:13%;">
{block:HasPages}{block:Pages}<li>{Label}</li> {/block:Pages} {/block:HasPages}
</ul>
</div><!-- /.col-lg-6 --></center>
</div>
</div>
</div>
</div>
<div class="site-wrapper">
{block:ifShowInfoButton}
<i class="fa fa-info-circle fa-3x" style="position:absolute; margin-left:0.4%; margin-top:0.4%; color:{color:Info Button Color};"></i>
{/block:ifShowInfoButton}
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="inner cover">
<h1 class="pagetitle" style="position:relative; font-family:{text:Google Web Font name Title}; font-weight:700; color:{color:Title and Tagline Text};">{Title}</h1>
{block:ifShowTagLine} <p class="pagedesc" style="postition:relative; font-family: {text:Google Web Font name Tagline}, sans-serif; font-weight:500; color:{color:Title and Tagline Text};">{text:Tagline}</p>{/block:ifShowTagLine}
</div>
<div class="mastfoot">
<div class="inner">
<a name="bottom"> <i class="fa fa-angle-down fa-5x"></i></div></a>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid" id="bottom">Test</div>
Set the div that appears when you click the info button to
position:absolute;
background: #333;
this will pull it out of the document flow and will not affect the other divs
or if that is not the effect you were looking for set the div with the down arrow to position: absolute;
#media (min-width: 768px) {
.mastfoot {
position: absolute;
}
}
the problem is with position:absolute