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


Forums

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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 47 results

  1. I have programmed a dynamic web page using Flask. The result is practically pure HTML and in terms of use design and general layout I am very satisfied with the result. But it adapts very badly to different devices and in is really corny in terms of visual design, as you can see in the attached message. So what I wanted is to add some designer's touch and device adaptation, with as little code adaptation as possible. I might figure which CSS commands to use, but I have zero aesthetic sense. I have made extensive search in Internet and I figured out that maybe the solution would be to employ CSS framework. I have tested two currently (allegedly) most popular frameworks and here is what I concluded: Bootstrap. When I tried to implement it, the result was even worse than pure HTML. For example, lines around FIELDSETs are ugly, do not make full boxes etc. Bulma. This one does not even have FIELDSET and I just don't know which kind of DIVs to employ instead to get something nice and meaningful. I lost hours trying to get a good result, but this was all disappointing, probably worse than pure HTML. What am I doing wrong? Should I give up CSS frameworks and use something else? Or maybe I should chose some other CSS framework, possibly one very well integrated with pure HTML and lightweight? Please advise. By the way, here is the code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="/static/favicon.ico"> <title>Display Control</title> </head> <body> <h1>Control Panel</h1> <div><fieldset style="display:inline-block"> <legend>Power</legend> <form method="POST"> <button formaction="/pow/on">ON</button> <button disabled>AUTO</button> <button formaction="/pow/off">OFF</button> </form> </fieldset></div> <div><fieldset style="display:inline-block"> <legend>Display</legend> <textarea placeholder="" style="background-color:gray" cols="40" rows="4" readonly></textarea> </fieldset></div> <div><fieldset style="display:inline-block"> <legend>Messages</legend> <form method="POST"> <button disabled>Automatic</button> <button formaction="/mes/0">Quick</button> <button formaction="/mes/1">Lectures</button> <button formaction="/mes/2">Meeting</button> <button formaction="/mes/3">Exam</button> </form> </fieldset></div> <div><fieldset style="display:inline-block"> <legend>Quick message</legend> <form method="POST" action="/quick"> <table> <tr><td rowspan="4" style="border-right-style:solid;border-right-width: thin">Lines</td> <td><input type="text" size="40" maxlength="40" id="line0" name="line0" value=""></td></tr> <tr> <td><input type="text" size="40" maxlength="40" id="line1" name="line1" value="Nazaj v 5 minutah."></td></tr> <tr> <td><input type="text" size="40" maxlength="40" id="line2" name="line2" value="Back in 5 minutes."></td></tr> <tr> <td><input type="text" size="40" maxlength="40" id="line3" name="line3" value=""></td></tr> <tr><td colspan="2" style="text-align:center"><input type="submit" value="Update message"></td></tr> </table> </form> </fieldset></div> <div><fieldset style="display:inline-block"> <legend>Services</legend> <form> <button formaction="/reset" formmethod="POST">Reset</button> <button formaction="/setup" formmethod="GET">Setup</button> <button formaction="/logout" formmethod="POST">Logout</button> </form> </fieldset></div> <p>Time: 2019-11-15 22:48:49</p> </body> </html>
  2. Hi Everyone, I'm trying in a bootstrap view to replace two dropdown lists (yes/no) by two toggle checkboxes. Here is the part of code used on the Edit View : <div class="row"> <div class="col-md-3" style=""> <div class="col-sm-12"> <label for="d_c" class="col-sm-12 control-label">DC</label> </div> </div> <div class="col-md-3" style="" > <div class="col-sm-12"> <label for="i_m_c" class="col-sm-12 control-label">IMC</label> </div> </div> <div class="col-md-6" style="" > <div class="col-sm-12"> </div> </div> <div class="col-md-3" style=""> <div class="col-sm-12"> <input type="checkbox" name="test_1" id="test_1" data-toggle="toggle" data-on="Yes" data-off="No" data-onstyle="success" data-offstyle="danger"> </div> </div> <div class="col-md-3" style=""> <div class="col-sm-12"> <input type="checkbox" name="test_2" id="test_2" data-toggle="toggle" data-on="Yes" data-off="No" data-onstyle="success" data-offstyle="danger"> </div> </div> <div class="col-md-6" style="" > <div class="col-sm-12"> </div> </div> </div> When i check the test_1, 'on' is stored in my (sql) database, when i check test_2, 'on' is also stored. my problem is that i would like to be able to have test_2 toggle button visible only when test_1 toggle button is checked, and when test_1 is not checked to store 'NULL' as test_2 value. And when test_2 is checked to force test_1 value to be 'on', and force test_2 value to 'NULL' if test_1 is not checked. ALL that I tried in javascript ended in a failure, so if there is anybody who can tell me how to get out of it, any help will be really appreciated. (i have try following javascript (div names have been removed from code above as nothing worked as i want to)) <script type="text/javascript"> function Change() { if ((document.getElementById('test_1').checked)) { document.getElementById('madiv').style.display="block"; document.getElementById('madiv2').style.display="block"; } else { document.getElementById('madiv').style.display="none"; document.getElementById('madiv2').style.display="none"; } } </script> And if anybody can tell me how to get the checkbox value on another bootstrap form (Modify View)... i'tried with value="<?php echo...; ?>" but it doesn't worked.. a big big thanks in advance. (sorry for my poor english) Have a nice day. Jeff
  3. I am building my first web site using HTML, CSS, and Bootstrap. After extensive searching, I can’t get my HTML file to link with my CSS file. The HTML document and CSS document are in the same domain so there shouldn’t be any reason to mention a file in the code, but my CSS isn’t affecting the HTML when I load it in Chrome. Any help would be greatly appreciated. I have enjoyed learning how to make a website, but this is hampering my progress/enjoyment. Below is some of the code (most comes from the Bootstrap site with minor customization). <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--> <title>TruNord</title><link href=“GOOGLE FONT PAGE” rel=“stylesheet” /><link href=“css/bootstrap.min.css” rel=“stylesheet” /><link href=“main.css” type=“text/css” rel=“stylesheet” /></head>
  4. 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.
  5. Is It Safe To Use W3.CSS Together With Bootstrap Without Any Conflicts?
  6. Good afternoon. I have problem. I have 3 cards in a row. They work great. They have an image, a card title, and card text. The problem is when you display the page such that the text in the card title has to wrap. This pushes down the card text. So, when you look across the row, the card text is lower this one, higher that one, not aligned. I am not sure how to fix this. I tried setting a bigger margin bottom for the card title but that didn't work. Here is a picture of the problem. Ignore the dotted white lines. Was directly from Dreamweaver display. any ideas would be GREATLY appreciated. Thanks Card code in the page: <div class="col-lg-3 col-md-6 mb-4 column start"> <div class="card h-100"> <a href="http://help.cccis.com/static/ccc_one/training/Search%20Overview/Search%20Overview.htm" target="blank" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('searchov','','images/intro_3_demo.png',1)"><img class="card-img-top" src="images/intro_3_base.jpg" alt="Search Overview" id="searchov"></a> <div class="card-body"> <h4 class="card-title"> <a href="http://help.cccis.com/static/ccc_one/training/Search%20Overview/Search%20Overview.htm" target="_blank">Search Overview</a> </h4> <h5>ELearning</h5> <p class="card-text">This demonstration provides an overview of the search functionality.</p> </div> <div class="card-footer"> Duration: 10 mins </div> </div> </div> CSS bootstrap.css: .card { position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1px solid rgba(0, 0, 0, 0.125); border-radius: 0.25rem; } CSS bootstrap.min.css for the cards: (apologies for the wall o'text - its from a template) .card {position:relative;display:flex;flex-direction: column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0, 0, 0, 0.125);border-radius: 0.25rem}.card > * {flex: 0 0 auto}.card>hr{margin-right:0;margin-left:0}.card>.list-group:first-child .list-group-item:first-child{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.card>.list-group:last-child .list-group-item:last-child{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.card-body{width:100%;-ms-flex:auto;flex:auto;padding:1.25rem}.card-title{width:100%;margin-bottom:1.75rem}.card-subtitle{margin-top:-.375rem;margin-bottom:0}.card-text:last-child{width:100%;margin-bottom:0}.card.h-100 .card-body .card-text { }
  7. 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!
  8. 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
  9. 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
  10. 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!
  11. 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.
  12. 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>
  13. 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
  14. 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>
  15. 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>
  16. 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
  17. With respect to the Bootstrap Grid system, can the Grid cover the whole page or is it limited to the body area? Thanks,
  18. 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.
  19. 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%; } }
  20. 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
  21. 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>
  22. 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.
  23. 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.
  24. 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:
  25. 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.
×
×
  • Create New...