Jump to content

Search the Community

Showing results for tags 'bootstrap'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 44 results

  1. Hello. I am using a bootstrap responsive ecommerce template. The filter buttons work great! BUT, if you click on a "card" or even on the background, the outline around the button disappears. This is a problem that the original W3 example doesn't have. Any ideas would be greatly appreciated. Here is the original: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_portfolio_gallery_filter Here is mine: Here is the page: http://help.cccis.com/static/ccc_one/ELCTraining/EstWorkRO.html Here is the filter buttons: <div id="myBtnContainer"> <button class="btn active" onclick="filterSelection('all')">Show all</button> <button class="btn" onclick="filterSelection('estimates')">Estimates</button> <button class="btn" onclick="filterSelection('workfiles')">Workfiles</button> <button class="btn" onclick="filterSelection('ros')">ROs</button> <button class="btn" onclick="filterSelection('checklist')">Direct CheckList</button> <button class="btn" onclick="filterSelection('share')">Estimate Share</button> <button class="btn" onclick="filterSelection('touch')">Touch</button> </div> </div> Here is the javascript: <!-- Bootstrap core JavaScript --> <script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <script> filterSelection("all") // Execute the function and show all columns function filterSelection(c) { var x, i; x = document.getElementsByClassName("column"); if (c == "all") c = ""; // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected for (i = 0; i < x.length; i++) { w3RemoveClass(x, "show"); if (x.className.indexOf(c) > -1) w3AddClass(x, "show"); } } // Show filtered elements function w3AddClass(element, name) { var i, arr1, arr2; arr1 = element.className.split(" "); arr2 = name.split(" "); for (i = 0; i < arr2.length; i++) { if (arr1.indexOf(arr2) == -1) { element.className += " " + arr2; } } } // Hide elements that are not selected function w3RemoveClass(element, name) { var i, arr1, arr2; arr1 = element.className.split(" "); arr2 = name.split(" "); for (i = 0; i < arr2.length; i++) { while (arr1.indexOf(arr2) > -1) { arr1.splice(arr1.indexOf(arr2), 1); } } element.className = arr1.join(" "); } // Add active class to the current button (highlight it) var btnContainer = document.getElementById("myBtnContainer"); var btns = btnContainer.getElementsByClassName("btn"); for (var i = 0; i < btns.length; i++) { btns.addEventListener("click", function () { var current = document.getElementsByClassName("active"); current[0].className = current[0].className.replace(" active", ""); this.className += " active"; }); } </script> If you click on a filter button, it works. But if you click on the background, the button does not stay highlighted. HELP!
  2. Greetings to all the users and administrators of w3scools invisionzone forum. I would love to get some constructive criticism on this web development tutorial site namely webtrickshome. It's been around for slightly more than a year but I redesigned it recently. Any feedback regarding the design and contents would be highly appreciated. Thankyou
  3. sgt_spike

    Content not showing

    I have a table pulling data from a database. Everything works getting the data to show in the table, however the content under the table isn't showing up. I'm using bootstrap 4.0 for layout, so I have rows and cols with the table being the third row and two other rows, not showing, under the 3rd row. I've moved one row about the table row and it show up, but put it back under the table and it disappears. I've ensured I have the right amount of div tags for each of the rows and cols. I'm at a loss
  4. hey w3s... so i have this code: <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <h2 class="font-weight-bold text-center">WORK</h2> <div class="border"></div> <br /> </div> </div> </div> <div class="container main_wrapper"> <section> <div class="container"> <div class="row" id="work-grid"> <?php $query_1 = "SELECT * FROM admvideo ORDER BY video_id DESC"; $result_1 = mysqli_query($dblink, $query_1) or die(mysqli_error($dblink)); if( mysqli_num_rows($result_1) > 0 ) { while( $row_1 = mysqli_fetch_array($result_1) ) { $video_id = $row_1['video_id']; $video_title = $row_1['video_title']; $video_link = $row_1['video_link']; $video_director = $row_1['video_director']; $video_text = $row_1['video_text']; ?> <div class="col-sm-4 col-xs-12 work_panels"> <div class="panel panel-default Panel_ModalVideoID-<?php echo $video_id; ?>"> <div class="panel-thumbnail"> <a href="#" title="Video" class="thumb"> <img src="https://img.youtube.com/vi/<?php echo $video_link; ?>/0.jpg" class="img-responsive img-rounded" data-toggle="modal" data-target=".modalVideo"> </a> </div> <div class="panel-body"> <p class="work-name"><?php echo $video_director; ?></p> <p class="work-video-text"><?php echo $video_text; ?></p> </div> </div> </div> <?php } } else { // hvis der ikke er EN række i udtrækket, vises en fejlbesked echo 'Ingen videoer at vise i nu.'; } ?> </div> </div> </section> <div class="modal fade customModal_1 modalVideo" tabindex="-1" role="dialog" aria-labelledby="modalVideo_LabelledBy" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title customModal_2">Video Title 1</h3> <button class="close" type="button" data-dismiss="modal">×</button> </div> <div class="modal-body"></div> <div class="modal-footer"> <h4 class="customModal_3">Video Title 2</h4> <p class="customModal_4"> Video in here. </p> <!--<iframe width="100%" height="350" src="" frameborder="0" allowfullscreen></iframe>--> </div> </div> </div> </div><!-- //.modal-Youtube_1 --> </div> <script> $('[class^=Panel_ModalVideoID-]').click(function(event) { event.preventDefault(); // Step 1 - The Variables //----------------------------------------------- var e = $(this); // e = event of the function happening via class/id "class^=Panel_ModalVideoID-*" (working?) var modal = $('.customModal_1'); var modalTitle = $('.customModal_2'); var videoTitle = $('.customModal_3'); var videoEmbed = $('.customModal_4'); var modal_body = $('.modal-body'); var INSERTDATA_modalTitle; $('a.thumb').click(function() { INSERTDATA_modalTitle = $(this).Attr( 'title' ); }); //var INSERTDATA_modalTitle = e.$('a.thumb').Attr("title"); // working? // Step 2 - Clear different areas //----------------------------------------------- modal_body.empty(); // empty area // Step 3 - insert data into different areas //----------------------------------------------- $(modalTitle).html(INSERTDATA_modalTitle); // Step 4 - show the modal //----------------------------------------------- $(".customModal_1").modal({ show: true; }); }); </script> Currently i'm using bootstrap 4 and trying to make a modal appear. So far it is working BUT i am trying to edit the following inside of the modal: Modal title, and the 2 <p> items inside modal-footer for youtube embed and youtube title etc. All of the replacements at different areas should come from the "while loop" at the upper of the page coding with php. Can you help me somehow? Not sure what to do with js/jquery really, a little bit of a newbie... even after years, i still dont get much of it :/ Hoping you guys can help me out a bit. If more information is needed, please ask. Using jQuery 3.2.1, included ALL of the bootstrap 4 bundle etc, so i know that is not the problem here. Maybe it is the way i am using my JS/jQuery code. Thanks a lot. And ohh... the title should be from the "a.thumb -> title attribute", saying video... will edit it later with php so that it will be dynamic. Hope you can help. Thanks!
  5. I am new to web development, so be patient please I am working with a tab navigation system. It happens to be bootstrap, but this question is not specific to bootstrap. There are four tabs; for the sake of simplicity we will call them tabs "A", "B", "C", and "D." I have a single SQL table and one of the columns --we will call it "Letter"-- identifies each row with one of the four letters. When a user clicks on "A" tab, they should see all the rows where "Letter" = "A". The same for tabs "B", "C", and "D." Right now I am running four separate queries, one for each tab. This seems ridiculous. There must be a way to grab all the data from the table with one query, sort the rows based on their "Letter" into four separate multi dimensional arrays, and then loop through the appropriate array to display the data for a particular "Letter" when a user selects that tab. I cannot figure out how to do this. Any suggestions would be most helpful. Thanks.
  6. hello prodeveloper, I want to show some data in a html table with bootstraps basics. The first columns are really large, the last ones are really tiny. Can someone tell me where the mistake could be found? I have 3 headlines tags (<th>) and 7 tabledata tags (<td>). I have already tried "<th colspan="3"> to set columnheadlines to the right position, without success. in this table i want to show how many math tasks my childeren solved right, calucalted false and how many "stars" they reached in a day, a week, the week before, in a month and so one. Can someone help me to make the the table look good? that's the result: click here that's the code: <thead> <tr><th style="padding-left:20px"><strong>#</strong></th> <th style="padding-left:20px"><strong>Kilian</strong></th> <th style="padding-left:20px"><strong>Ilias</strong></th> </tr> </thead> <tbody> <tr> <td>heute</td> <td><i class="fa fa-check" aria-hidden="true"></i> <? echo " ".number_format($HeuteKilianRichtig,0,",",".")." "; ?></td> <td><i class="fa fa-close" aria-hidden="true"></i> <? echo " ".number_format($HeuteKilianFalsch,0,",",".")." "; ?></td> <td><i class="fa fa-star-o" aria-hidden="true"></i> <? echo " ".number_format($HeuteKilianSterne,0,",","."); ?></td> <td><i class="fa fa-check" aria-hidden="true"></i> <? echo " ".number_format($HeuteIliasRichtig,0,",",".")." "; ?></td> <td><i class="fa fa-close" aria-hidden="true"></i> <? echo " ".number_format($HeuteIliasFalsch,0,",",".")." "; ?></td> <td><i class="fa fa-star-o" aria-hidden="true"></i> <? echo " ".number_format($HeuteIliasSterne,0,",","."); ?></td> </tr> <tr> <td>aktuelle Woche</td> <td><i class="fa fa-check" aria-hidden="true"></i> <? echo " ".number_format($aktuelleWocheKilianRichtig,0,",",".")." "; ?></td> <td><i class="fa fa-close" aria-hidden="true"></i> <? echo " ".number_format($aktuelleWocheKilianFalsch,0,",",".")." "; ?></td> <td><i class="fa fa-star-o" aria-hidden="true"></i> <? echo " ".number_format($aktuelleWocheKilianSterne,0,",","."); ?></td> <td><i class="fa fa-check" aria-hidden="true"></i> <? echo " ".number_format($aktuelleWocheIliasRichtig,0,",",".")." "; ?></td> <td><i class="fa fa-close" aria-hidden="true"></i> <? echo " ".number_format($aktuelleWocheIliasFalsch,0,",",".")." "; ?></td> <td><i class="fa fa-star-o" aria-hidden="true"></i> <? echo " ".number_format($aktuelleWocheIliasSterne,0,",","."); ?></td> </tr> <tr> <td>Vorwoche</td> <td><i class="fa fa-check" aria-hidden="true"></i> <? echo " ".number_format($Woche_1KilianRichtig,0,",",".")." "; ?></td> <td><i class="fa fa-close" aria-hidden="true"></i> <? echo " ".number_format($Woche_1KilianFalsch,0,",",".")." "; ?></td> <td><i class="fa fa-star-o" aria-hidden="true"></i> <? echo " ".number_format($Woche_1KilianSterne,0,",","."); ?></td> <td><i class="fa fa-check" aria-hidden="true"></i> <? echo " ".number_format($Woche_1IliasRichtig,0,",",".")." "; ?></td> <td><i class="fa fa-close" aria-hidden="true"></i> <? echo " ".number_format($Woche_1IliasFalsch,0,",",".")." "; ?></td> <td><i class="fa fa-star-o" aria-hidden="true"></i> <? echo " ".number_format($Woche_1IliasSterne,0,",","."); ?></td> </td> </tr> <tr> <td>Vor 2 Wochen</td> <td><i class="fa fa-check" aria-hidden="true"></i> <? echo " ".number_format($Woche_2KilianRichtig,0,",",".")." "; ?> <i class="fa fa-close" aria-hidden="true"></i> <? echo " ".number_format($Woche_2KilianFalsch,0,",",".")." "; ?> <i class="fa fa-star-o" aria-hidden="true"></i> <? echo " ".number_format($Woche_2KilianSterne,0,",","."); ?> </td> <td><i class="fa fa-check" aria-hidden="true"></i> <? echo " ".number_format($Woche_2IliasRichtig,0,",",".")." "; ?> <i class="fa fa-close" aria-hidden="true"></i> <? echo " ".number_format($Woche_2IliasFalsch,0,",",".")." "; ?> <i class="fa fa-star-o" aria-hidden="true"></i> <? echo " ".number_format($Woche_2IliasSterne,0,",","."); ?> </td> </tr>
  7. Andrew Thomas Education

    Script definition in header

    I am a complete beginner and am trying to learn HTML at the same time as modifying an existing website to be mobile friendly @media only screen and (max-width: 500px) { body { background-color: lightblue; } } @media only screen and (min-width: 500px) { body { background-color: coral; } } </style> </head> <body> <div id="slSection"> <umbraco:Macro splashMedia="[#splashMedia]" Alias="SplashScreenSlideshow1" runat="server"></umbraco:Macro> </div> Above is a code fragmant I need help with, as a test I haveset the page to change background colour from lightblue to corel when viewed on a smaller screen and this works. Further down the code calls a script called SplashScreenSlideshow1 My problem is I would like call a different script based on the size of the viewing screen. How do I define a script name based on the screen size? Any help gratefully received Thanks Andrew
  8. phn221181

    noUiSlider is 'undefined'

    Hello, i tried to style up my script. i integrated a noUiSlider but it doesn't work. i looked for solving in the documentation, YouTube and google, without success. Can someone help me to make it work? The JavaScript Code can be found at the bottom of the script tag. Thanks! <!DOCTYPE html> <html lang="de-DE"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="font-awesome.min.css"> <title>Matheaufgaben</title> <!-- Bootstrap --> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" /> <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />--> <!-- CSS Files --> <!--<link href="../bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet" />--> <link href="assets/css/bootstrap.min.css" rel="stylesheet" /> <link href="assets/css/material-kit.css" rel="stylesheet"/> <style> #box { width:400px; } #configuration { height:200px; padding: 10px 0; text-align: center; // background-color: ; margin-top: 10px; } .h2 { font-size:30px; } body { background-color:#fff; } .fadeInAndOut { padding-left: 100px; -webkit-animation: fadeinout 4s linear forwards; animation: fadeinout 4s linear forwards; } @-webkit-keyframes fadeinout { 0%,100% { opacity: 0; } 50% { opacity: 1; } } @keyframes fadeinout { 0%,100% { opacity: 0; } 50% { opacity: 1; } } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script> var richtig = 0, falsch = 0, last_erg = ''; var plusaufgaben = 0; var minusaufgaben = 0; var multiaufgaben = 0; var diviaufgaben = 0; function showconfig() { var x = document.getElementById("configuration"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } var user = '' for (var i = 0; i < 2; i++) { if(document.userdata.user[i].checked) { user = (document.userdata.user[i].value); break; } } document.getElementById("showuser").innerHTML = user; } function hilfe() { /* show result in red */ document.getElementById("erg-output").style.color = "red"; /* Using Help Button is like a not solved task*/ falsch++; document.getElementById("falsch").innerHTML = falsch; /* Reset Inputfield */ document.ergebnis.ergebnis_eingabe.value =""; /* neue Aufgabe nach 1,5 Sekunden */ alert(erg); aufgabe_erstellen(); } function sleep(milliseconds) { var start = new Date().getTime(); for (var i = 0; i < 1e7; i++) { if ((new Date().getTime() - start) > milliseconds){ break; } } } function compare () { /* compare entered and calculated value */ var erg_eingabe = (document.ergebnis.ergebnis_eingabe.value); if (erg == erg_eingabe) { /* Reset input field */ document.ergebnis.ergebnis_eingabe.value =""; /* increment richtig++ */ richtig++; document.getElementById("visual").innerHTML = '<i class="fa fa-check fa-2x" aria-hidden="true"></i>'; /* show quantity correct tasks */ document.getElementById("richtig").innerHTML = richtig; /* check rating */ rating(richtig); /* nächste Aufgabe */ aufgabe_erstellen(); } else { falsch++; document.getElementById("visual").innerHTML = '<i class="fa fa-times fa-2x" aria-hidden="true"></i>'; document.ergebnis.ergebnis_eingabe.value =""; document.getElementById("falsch").innerHTML = falsch; last_aufgabe = aufgabe; } } function rating(richtig) { if (parseInt(richtig) >= 100) { document.getElementById("rating").innerHTML = '<i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i>'; } else if (parseInt(richtig) >= 80) { document.getElementById("rating").innerHTML = '<i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i>'; } else if (parseInt(richtig) >= 60) { document.getElementById("rating").innerHTML = '<i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i>'; } else if (parseInt(richtig) >= 40) { document.getElementById("rating").innerHTML = '<i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i>'; } else if (parseInt(richtig) >= 20) { document.getElementById("rating").innerHTML = '<i class="fa fa-star fa-2x" aria-hidden="true"></i>'; } } function define_min() { var zahlenraum1 = parseInt(document.zahlenraum.minimal.value); document.getElementById('min-output').innerHTML = zahlenraum1; aufgabe_erstellen(); } function define_max() { var zahlenraum2 = parseInt(document.zahlenraum.maximal.value); document.getElementById('max-output').innerHTML = zahlenraum2; aufgabe_erstellen(); } function number_random(min,max) { return Math.floor(Math.random() * (max - min +1)) + min; } function aufgabe_erstellen() { /* show result in white */ document.getElementById("erg-output").style.color = "white"; /* if input empty create new task */ if(document.ergebnis.ergebnis_eingabe.value == '') { var zahlenraum1 = parseInt(document.zahlenraum.minimal.value); var zahlenraum2 = parseInt(document.zahlenraum.maximal.value); zahl1 = number_random(1,zahlenraum1); zahl2 = number_random(1,zahlenraum2); console.log(zahl1 + ' ' + zahl2); // zahl1 = Math.floor(Math.random() * (max - min +1)) + min; // zahl2 = Math.floor(Math.random() * (max - min +1)) + min; /* check which operation is activeted */ var op =''; for (var i = 0; i < 4; i++) { if(document.operatoren.op[i].checked) { op = (document.operatoren.op[i].value); break; } } /* Create Task, especially if num2 > num1 change order for "minus" and create a String to show in div-element */ if (op=='-') { /* if zahl2 > zahl1 change Summanden */ if (zahl2 > zahl1) { var aufgabe = zahl2 + ' ' + op + ' ' + zahl1; } else { /* if not, Aufgabe as usual */ var aufgabe = zahl1 + ' ' + op + ' ' + zahl2; } } else { /* if not "-" */ var aufgabe = zahl1 + ' ' + op + ' ' + zahl2; }; eval(aufgabe); /* Calc results */ switch (op) { case '+': erg = zahl1 + zahl2; plusaufgaben++; document.getElementById("add").innerHTML = plusaufgaben; break; case '-': if (zahl2 > zahl1) { erg = zahl2 - zahl1;} else { erg = zahl1 - zahl2;}; minusaufgaben++; document.getElementById("sub").innerHTML = minusaufgaben; break; case '*': erg = zahl1 * zahl2; multiaufgaben++; document.getElementById("mul").innerHTML = multiaufgaben; break; case '/': erg = zahl1 / zahl2; diviaufgaben++; document.getElementById("divi").innerHTML = diviaufgaben; break; default: erg = ''; } /* Show task and result (in white) */ document.getElementById("aufgabe").innerHTML = aufgabe + " = "; document.getElementById("erg-output").innerHTML = erg; /* if inputfield not empty call function "compare" */ } else { compare(); } } var slider = document.getElementById('minimum'); noUiSlider.create(slider, { start: 30, range: {min: 10, max: 500} }) </script> </head> <body> <div id="box"> <div class="row"> <table><tr><td><button class="btn btn-success" onclick="showconfig()">Einstellungen</button><td style="color:green;padding-left:20px;" id="showuser"></td><td style="padding-left:10px;color:orange;" id="rating"></td></tr></table> </div> <div id="configuration"> <div class="row"> <form name="userdata"> <div class="checkbox col-xs-6"> <label><input type="checkbox" name="user" value="Ilias" />Ilias</label> </div> <div class="checkbox col-xs-6"> <label><input type="checkbox" name="user" value="Kilian" />Kilian</label> </div> </form> </div> <div class="row"> <form name="operatoren" onchange="aufgabe_erstellen()"> <div class="radio col-md-3"><label><input type="radio" name="op" value="-"><i class="fa fa-plus fa-2x" aria-hidden="true"></i></input></label></div> <div class="radio col-md-3"><label><input type="radio" name="op" value="+"><i class="fa fa-minus fa-2x" aria-hidden="true"></i></input></label></div> <div class="radio col-md-3"><label><input type="radio" name="op" value="*"><i class="fa fa-certificate fa-2x" aria-hidden="true"></i></input></label></div> <div class="radio col-md-3"><label><input type="radio" name="op" value="/"><i class="fa fa-arrows-v fa-2x" aria-hidden="true"></i></input></label></div> </form> </div> <div class="row" style="padding-left:10px"> <div class="col-xs-12 col-md-8"> <div id="slider-connect" class="slider slider-info"> </div> </div> <div class="col-xs-6 col-md-4"> <div id="min-output">Min-Wert</div> </div> </div> <!-- <form name="zahlenraum"> <table><tr><td> <input id="minimal" type="range" min="0" max="500" value="200" step="10" onchange="define_min()" ></input></td><td id="min-output"> </td></tr> <tr><td> <input id="maximal" type="range" min="0" max="1000" value="500" step="10" onchange="define_max()"></input></td><td id="max-output"> </td></tr> </table> </form> --> </div> <hr> <table> <tr><td id="aufgabe" class="h2"></td><td id="erg-output"></td></tr> </table> <div class=""><table><tr><td> <form name="ergebnis"> <input type="number" name="ergebnis_eingabe" style="height:40px;font-size:30px" size="10"> </form></td><td style="align:right" id="visual"></td></tr> </table> <button class="btn btn-default" style="" onclick="compare()">Check</button> </div> <hr> <div> <table> <tr><td>richtig: </td><td style="color: green" id="richtig"> 0 </td><td>falsch: </td><td style="color:red;" id="falsch">0</td></tr></table> <table> <tr><td>+ </td><td id="add"></td><td> | - </td><td id="sub"></td><td> | * </td><td id="mul"></td><td> | / </td><td id="divi"></td></tr> </table> </div> <button class="btn btn-sm btn-danger" onclick="hilfe()">Hilfe?</button> </div> <!-- Include all compiled plugins (below), or include individual files as needed --> <!-- <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script> --> </body> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Core JS Files --> <script src="assets/js/jquery.min.js" type="text/javascript"></script> <script src="assets/js/bootstrap.min.js" type="text/javascript"></script> <script src="assets/js/material.min.js" type="text/javascript"></script> <!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ --> <script src="assets/js/nouislider.min.js" type="text/javascript"></script> <!-- Plugin for the Datepicker, full documentation here: http://www.eyecon.ro/bootstrap-datepicker/ --> <script src="assets/js/bootstrap-datepicker.js" type="text/javascript"></script> <!-- Control Center for Material Kit: activating the ripples, parallax effects, scripts from the example pages etc --> <script src="assets/js/material-kit.js" type="text/javascript"></script> </html>
  9. HumbleApprentice

    Bootstrap Vertical alignment

    I am working on a landing page that has two horizontal columns in bootstrap. Everything works well except that I cannot vertically align the "COMING SOON" text in the top box without separating the 2 boxes and leaving a gutter between them. I would like to vertically center the text in the top column. Any help will be highly appreciated. Below is the code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <style> body{ background-color : #222 !important; /*background-color : #ECECEA; !important*/ } .container{ background-color: white; height:210px; } .row h1{ color: #FF530D; font-size: 3em; font:bold; } .container p{ color: black; font-size: 1.5em; } .jumbotron{ background-color : #222 !important ; } .jumbotron p { color: #A9A9A9; !important; } .jumbotron h1{ color: #FF530D !important ;<!--Thank you Jesus--> } } //vertical-align-self-center; </style> </head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="jumbotron text-center"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p> </div> <div class="container text-align center;"> <div class="row align-self-center"> <section="col-sm-12-col-sm-offset-0 "> <SPAN STYLE="color: #FF530D; font-size: 3em;"><center>Coming Soon!</center></SPAN><!--I am trying to vertically aligh coming soon--> </section> <div class="col-sm-12-col-sm-offset-0" style="background-color:#558c89;height:310px; margin-top: 130px; margin-bottom: 130px;"><!--to center a div in bootstrap use this formula 12-n/2 where n is the number in the column--> <!--next put another div inside a div to hold the form and its button--> <div class ="section-center2"> <h2 style="padding-top:65px; margin-bottom:20px;color: black;"><center>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo. <center/></h2> <h3 style="margin-top:65px;"><center><mark>Be the first to know when we launch! Sign up below:<mark/><center/></h3> </div> <center> <form class="form-inline"> `<div class="form-group"> ` <label for="email">Email address:</label> ` <input type="email" class="form-control" id="email"> <button type="submit" class="btn btn-default">Submit</button> ` </div> </center></form> </div> </div> </html>
  10. i created a website using w3schools bootstap. it was a while ago and i can't remember how to get to the editing page. could someone help me please. thanks, steve
  11. Engine44

    Bootstrap Grid Question

    With respect to the Bootstrap Grid system, can the Grid cover the whole page or is it limited to the body area? Thanks,
  12. armandesigner

    Changing the place of input and label

    The html code is this : <div class="form-group"> <label class="col-sm-4 control-label">Checkbox inputs</label> <div class="col-sm-8"> <div class="checkbox check-transparent"> <input type="checkbox" value="1" id="opt01" checked> <label for="opt01">Option 1</label> </div> <div class="checkbox check-transparent"> <input type="checkbox" value="1" id="opt02"> <label for="opt02">Option 2</label> </div> <div class="checkbox check-transparent"> <input type="checkbox" value="1" id="opt03"> <label for="opt03">Option 3</label> </div> </div> </div> I attached the results photo : I want to change the place of checkbox and label I mean I want first be label and then checkbox. It had bootstrap too I uploaded the bootstrap files too : https://www.dropbox.com/s/kc8ytkkd5dxcmc1/assets.zip?dl=0 Who can say that how can I change the place of checkbox and label I will be thank.
  13. I am creating a web page layout using bootstrap and the backend is PHP Laravel, the web page is partitioned into various divs which work fine on various screen devices but when I upload the project on a live server and view the page on mobile part of the service and contact section is hidden behind a white background, I find it hard to figure out to debug the CSS code to make the two sections visible in mobile,,,please assist? HTML <!DOCTYPE html> <html lang="en-us"> <head> <meta charset="utf-8"> <meta http-equiv=X-UA-Compatible content="IE=edge"> <meta name=viewport content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0"> <meta name="HandheldFriendly" content="true"> <link rel="icon" type="image/x-icon" href="img/favicon.ico"> > <link href="{{ asset('css/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css"><link href="{{ asset('css/bootstrap/css/font-awesome.min.css') }}" rel="stylesheet" type="text/css"> <!-- google font --> <link href='http://fonts.googleapis.com/css?family=Oswald:300,400' rel='stylesheet'> </head> <body> <!-- Service Section --> <div class="content-block" id="service"> <br><br> <header class="block-heading cleafix text-center"> <h1> Services</h1> <!-- <p>Lorem Ipsum Text</p> --> </header> <div class="container-fluid"> <div class="row"> <div class="col-lg-12 text-center"> <h3 class="section-subheading text-muted"> Welcome </h3> </div> </div> <div class="row text-center"> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x text-primary"></i> <i class="fa fa-laptop fa-stack-1x fa-inverse"></i> </span> <h4 class="service-heading"> School Of Arts</h4> <p>...............</p> </div> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x text-primary"></i> <i class="fa fa-shopping-cart fa-stack-1x fa-inverse"></i> </span> <h4 class="service-heading">School of Business </h4> <p> ........... </p> </div> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x text-primary"></i> <i class="fa fa-code fa-stack-1x fa-inverse"></i> </span> <h4 class="service-heading"> School of Engineering </h4> <p> ........ </p> </div> </div> <div class="row text-center"> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x text-primary"></i> <i class="fa fa-wordpress fa-stack-1x fa-inverse"></i> </span> <h4 class="service-heading"> School of Human Resource</h4> <p> ........ </p> </div> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x text-primary"></i> <i class="fa fa-pencil fa-stack-1x fa-inverse"></i> </span> <h4 class="service-heading"> School of Medicine </h4> <p> ........ .......</p> </div> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x text-primary"></i> <i class="fa fa-thumbs-up fa-stack-1x fa-inverse"></i> </span> <h4 class="service-heading"> School of Biological Sciences </h4> <p> .......... </p> </div> </div> </div> </div> <!-- END SERVICE SECTION--> <!-- Contact Form Section--> <div class="content-block" id="contact"> <div class="overlay-3"> <header class="block-heading cleafix text-center"> <h1>Contact</h1> <!-- <p>Feel Free to Contact</p> --> </header> <div class="block-content text-center"> <div class="container-fluid"> <div class="row"> <!-- Form Section --> <div class="col-sm-4 wow animated fadeInLeft"> {!! Form::open(array('route' => 'index.post', 'method' => 'POST','class' => 'contact-form')) !!} {{ Form::text('name', null, array( 'placeholder' => 'Name...', 'class' => 'input', 'required' => ''))}} {{ Form::email('email', null, array('placeholder' => 'Email Address...','class' => 'input', 'required' => ''))}} {{ Form::textarea('message', null, array('placeholder' => 'Message...', 'class' => '', 'required' => 'input')) }} {{ Form::submit('Submit') }} {!! Form::close() !!} </div> <!-- Adress --> <div class="col-sm-4 wow animated fadeInRight"> <div class="row"> <div class="col-sm-12"> <div class="contact-info"> <div class="clearfix"> <div class="rotated-icon"> <div class="sqaure-nebir"></div> <i class="fa fa-map-marker"></i> </div> <p><strong> 3069 Nkr</strong> </p> </div> <div class="tel clearfix"> <div class="rotated-icon"> <div class="sqaure-nebir"></div> <i class="fa fa-mobile"></i> </div> <p> <strong> <a class="tell" href="tel:+256123456" rel="nofollow"> +256 123456 </a> </strong> <br> <strong> <a class="tell" href="tel:+256547890" rel="nofollow"> +254 756789098</a> </strong> </p> </div> <div class="clearfix"> <div class="rotated-icon"> <div class="sqaure-nebir"></div> <i class="fa fa-envelope-o"></i> </div> <p> <strong> info@tcol.com </strong> </p> </div> </div> </div> </div> <div class="row"> <ul class="social-box"> <li><a class="facebook-icon" href="https://www.facebook.com/pwebkenya" target="_blank"> <i class="fa fa-facebook"></i></a></li> <li><a class="twitter-icon" href="https://twitter.com/pwebkenya" target="_blank"> <i class="fa fa-twitter"></i></a></li> <li><a class="g-plus-icon" href="https://github.com/patwan"><i class="fa fa-github"></i></a></li> <li> <a class="linkedin-icon" href="#"><i class="fa fa-linkedin"></i></a></li> </ul> </div> </div> <!-- photo --> <div class="col-sm-4"> <br> <br> <div class="team-member"> <img src="img/7.jpg" class="img-responsive img-circle" alt=""> <h4> Steve Johns</h4> <p class="text-muted"> Web Developer/Graphics Designer</p> </div> </div> <!-- END PHOTO--> </div> </div> </div> <!-- block-content --> </div> <!-- overlay-3 --> </div> <!-- content-block --> </body> </html> CSS code @font-face { font-family: 'Pacifico'; font-style: normal; font-weight: 400; src: local('Pacifico Regular'), local('Pacifico-Regular'), url("../fonts/pacifico.woff") format('woff'); } html, body { margin: 0; padding: 0; } img, object, embed, video{ max-width:100%; height:auto; } /*Service section*/ .service-heading{ font-size: 22px; } #service { background: url(../img/bg/number1.gif) repeat center center fixed; color: #ffffff; display: block; } #service h3, p{ color: #ffffff; } #service .block-heading h1 { color: #fff; font-family: 'Milonga', cursive; font-weight: 400; font-size: 55px; word-spacing: 5px; } /*Contact section*/ #contact { background: url(../img/bg/contact-bg.jpg) no-repeat center center fixed; background-size: cover; color: #fff; } #contact .block-heading h1 { color: #fff; font-family: 'Milonga', cursive; font-weight: 400; font-size: 55px; } .overlay-3 { padding: 60px 0; /* background-color: rgba(9, 20, 39, 0.83); */ /* background-color: rgba(24, 77, 77, 0.93); */ background-color: rgba(33, 103, 88, 0.9); } .contact-info { padding: 16px 62px; text-align: left; font-size: 18px; line-height: 36px; margin-top: 25px; } . .contact-info i { width: 40px; height: 40px; color: white; padding-top: 7px; font-size: 25px; border: 1px solid #fff; text-align: center; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); } .contact-info p { padding: 27px 10px; } .contact-info span { padding-left: 20px; } input[type="text"], input[type="email"], textarea { display: block; margin: 0 auto; width: 100%; background: transparent; border: 1px solid #fff; padding: 12px 15px; margin-bottom: 30px; } input[type="submit"] { background: transparent; border: 1px solid #fff; width: 100%; padding: 10px; transition: 0.5s background linear; font-weight: bold; } input[type="submit"]:hover { background: #fff; border-color: #fff; transition: 0.5s background linear; color: #333; } ::-webkit-input-placeholder { color: #fff; } ::-moz-placeholder { /* Firefox 19+ */ color: #fff; } :-ms-input-placeholder { color: #fff; } @media only screen and (min-width: 321px) and (max-width: 480px){ #service{ display: inline-block; height: 100%; width: 100%; padding-bottom: 20px; background: blue; } .overlay-3{ background:none; padding: 0; } #contact{ display: inline-block; height: 100%; width: 100%; } }
  14. Kevin Castro

    how to link another page using id

    Hello folks, i want to link the page from to another page ex: In my footer column, i've 5 types of products but when i click those products it links to product.html page.Actually In that product page there 5 no of products are listed. when i click the product from index page.I want exact header location for the product.. Thanks in advance
  15. Hi, I am going through bootstrap 4 alpha version. But when I tried to create a simple modal I found that it doesn't work in my browser. Can anyone find out what is wrong I am doing? The problem is fixed. It was causing problem because of incorrect data-target attribute. <!DOCTYPE html> <html lang= "en-US"> <head> <meta charset= "utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name= "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit= no"/> <title> . Bootstrap</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> </head> <body> <div class= "container"> <div class= "row"> <div class= "col-12"> <h1 class= "alert-info">Live Demo</h1> <div class= "w-100"></div> <button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= "#liveModal"> Go Live </button> <div class= "modal fade" tabindex="-1" id= "liveModal" role= "dialog" aria-labelledby= "liveModalLabel"> <div class= "modal-dialog" role="document"> <div class= "modal-content"> <div class= "modal-header"> <h5 class= "modal-title">Modal Title</h5> <button class= "close" type="button" data-dismiss= "modal" aria-label= "Close"> <span aria-hidden= "true">×</span> </button> </div> <div class= "modal-body"> <p> Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page. </p> </div> </div> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> </body> </html>
  16. j.silver

    Bootstrap vs Media Queries

    Dear all, Since bootstrap has container and container-fluid classes, does a heavy lifting, and is easy to use, I am inclined to think that css's media query has no advantage. I'd appreciate sharing any opposite opinion that sees usefulness/advantage in media queries.
  17. Is It Safe To Use W3.CSS Together With Bootstrap Without Any Conflicts?
  18. harry_ord

    Full width rows in Bootstrap

    Hello. This is my page: http://feriapixel.cl/anchour/ I'm using Bootstrap's grid system and whenever i use divs with the row class they get stuck in a container, and i want them to use be full width. This is one of my divs for example: <div class="content-seis" > <div class="row" > <div class="col-sm-6 showroom coffee-break" > <h2>Un coffee break con sabor y atención casera, para tu trabajo</h2> <p>Café americano, tapaditos, fruta, jugos, opciones vegetarianas y más. Tenemos promociones ya armadas, pero tomamos tu pedido con gusto.</p> <a href="#" class="btn btn-showroom" role="button">NECESITO COFFEE BREAK</a> </div> <div class="col-sm-6 showroom pasteleria-diseno"> <h2>Pastelería con diseño</h2> <p>Tortas con diseño, popcakes, cupcakes, alfajores y más. Te damos el diseño que necesites.</p> <a href="#" class="btn btn-showroom" role="button">QUIERO TORTAS CON DISEÑO Y MÁS</a> </div> </div> </div> I want that div to be full width. Sorry for the really basic question, but i can't manage to do it, i tried putting all inside a div withe the container-fluid class but it didn't work.
  19. harry_ord

    Bootstrap navbar always collapsed

    Reading the bootstrap tutorial on this site, we can have a collapsed navbar when we are watching the site on a small screen: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_collapse&stacked=h How can i have the same collapsed navbar all the time? i mean, i want the same collapsed navbar that appears on mobile to have it on the desktop's wide-screen too.
  20. harry_ord

    All divs/rows the same size in Bootstrap

    This is my page: http://codelcolab.feriapixel.cl/ When i shrink the browser window or watch it on a mobile device, the first divs (with class row) have least width than the ones that came after them, so i'm having a blank space to the right of the first divs because of the wider ones. How can i do to make all the divs the same width? Here is how it looks, notice the white space to the right of the orange boxes:
  21. Hello all, pretty new here (and to web design, in truth) I have been toying around with Dreamweaver the past 3 weeks or so trying to redesign my company's web page and one of the elements I was adding to the page is a carousel for showing off some things. I have the carousel working properly and things are great, but there are a few things I want to try and learn how to do in order to make the page look fresh and appealing. Here is an example of what my bootstrap resembles for this topic. Pay attention to only the carousel at the top. https://getbootstrap.com/examples/carousel/ So I am trying to find out a few different styling things with the carousel. First off, on the sides of where the image would be (centered) there are areas of dark gray with arrow glyph icons indicating the direction the user can make the carousel rotate. I found a way to remove the background coloring and make the carousel "white" however I would prefer to remove those areas altogether. I would also like to push the arrow keys into the actual carousel on top of the images (maybe in a corner out of the way) I want to change what the image indicators look like on the bottom of the carousel. Currently, as in the example, the indicators are small circles that change color when a particular image pane is active. Is there a way to design icons to replace those, perhaps a line that brightens when the selection is active? For example, in the 3 slide referenced above, instead of 3 circles, the indicators are dashes that, when a current active slide is up in the carousel, the dash indicator brightens or is highlighted. The last thing I want to do is make a translucent/transparent box covering half or third of the image in the center (on a side) with text. The issue I am having is trying to get the text in a transparent/translucent box preferably one that does not change when the carousel rotates.
  22. Hi i am new for the PHP, i had the experienced before to do a login system page but what i want it is HTML and PHP file to separate i dont want PHP with HTML together to 1 file , cause professional people will more likely to use 2 file rather than 1 file easy to maintain and edit how to use the external PHP file coding without re-design whole page cause normally what i tested before was link or turn to other new page and result will come out but the design was totally gone so have any ways and suggestion to do that ... in the end, im sorry i not well in english and my knowledge of PHP still quite new , thanks you so much
  23. HarrySeah

    .popover will suddenly delay

    HI there, first i apology my english not too well, hope you may understand what i mean ,Thanks Im try to using the Bootstrap one of the function is popover similar like tooltips, but i facing the problem For example : <div id="all"> <div id="a" class="circle_ball" data-user-id="2">●</div> <div id="b" class="circle_ball" data-user-id="1">●</div> </div> and my Jquery code is : $('#all').on('mouseenter','div',function(){ $(this).popover({ title: 'Jun Hoo', content: $(this).attr('data-user-id'), trigger:'hover', html:true }); }); but the result on the code will showing delay and at least need to hover the target more than 2 time ... any ways to figure out? thanks you so much i found ways to solve the delay speed, but will keep popover the content when mouse pointer hover the first popover body the ways is add one more code --- $('#all').popover({title: 'Loading', content: '...',selector: 'div',trigger:'hover',html:true}); Thanks for helping
  24. Hello I'm having a of a time getting my image element aligned in the top right corner of my web application and everything I try fails. at the top (head) of the page I'm using a navbar and below that I have an input group. I'm trying to float right an image (which is my school logo) but no matter what I do. I cant get it to sit nica and square where i want it. I provided a screen shoot of the problems I'm having and included is a code snippet. Can somebody please tell me WTH I'm doing wrong here? First part of code is NavBar and the second is input group. How would I set the logo by itself above the blue side panel where its supposed to be? <nav class="navbar navbar-progress"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Existential Graph Editor</a> </div> <ul class="nav navbar-nav"> <!--li class="active"><a href="#">Home</a></li--> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">File <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Page 1-1</a></li> <li><a href="#">Page 1-2</a></li> <li><a href="#">Page 1-3</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Edit <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Page 1-1</a></li> <li><a href="#">Page 1-2</a></li> <li><a href="#">Page 1-3</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Help <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Page 1-1</a></li> <li><a href="#">Page 1-2</a></li> <li><a href="#">Page 1-3</a></li> </ul> </li> <li><a href="#">About</a></li> </ul> <!--ul class="nav navbar-nav navbar-right"> <!--li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li--> <!--img src="../images/uahLogo.png" class="img-rounded" --> <!--/ul--> </div> </nav> <form> <!--label class="label label-primary" for="drawType">Enter Expression (e, c, p, q):</label--> <div class="input-group"> <input id="drawType" type="text" class="form-control" placeholder="Enter Expression" aria-describedby="basic-addon2"> <span class="input-group-addon" id="drawC" onclick="return OnClickDraw();">Submit</span> <span class="input-group-addon" id="clear" onclick="return clearArea();">Clear</span> <span class="input-group-addon" id="save">Save</span> <span class="uahImg"><img src="../images/uahLogo.png" height="100"> </span> </div> </form>
  25. Hi, i am in need of urgent help. I have created a web template using bootstrap. I have created a "collapseble" nav bar and used "parallax, jquery single page nav" to scroll on the same page smoothly.This worked fine. There is no problem in it. After that according to the requirement i have used "affix" to have a div on top of the menu bar. suddenly my nav bar when collapsed (i mean on mobile devices) not working properly. It is showing a strange behavior. When nav bar got collapsed for the first time when the page gets loaded if i click on the nav bar the menu bar is sliding down and when i click on the menu item of the menu where the page scrolls to that section, the slided down menu bar is automatically getting slided up without me pressing on the collapsed menu button. After the page slides to that particular section when i click on the collapsed menu it is not working at all. I am attaching my home page where the problem persists. Can somebody help me fix this issue. home.zip