Newbe Dev Stack

Answer : Updated 2018 The dropdown-submenu has been removed in Bootstrap 3 RC. In the words of Bootstrap author Mark Otto.. "Submenus just don't have much of a place on the web right now, especially the mobile web. They will be removed with 3.0" - https://github.com/twbs/bootstrap/pull/6342 But, with a little extra CSS you can get the same functionality. Bootstrap 4 (navbar submenu on hover) .navbar-nav li:hover > ul.dropdown-menu { display: block; } .dropdown-submenu { position:relative; } .dropdown-submenu>.dropdown-menu { top:0; left:100%; margin-top:-6px; } Navbar submenu dropdown hover Navbar submenu dropdown hover (right aligned) Navbar submenu dropdown click (right aligned) Navbar dropdown hover (no submenu) Bootstrap 3 Here is an example that uses 3.0 RC 1: http://bootply.com/71520 Here is an example that uses Bootstrap 3.0.0 (final): http://bootply.com/86684 CSS .dropdown-submenu { position:relativ...

Answer : You can use the flex-column flexbox utility class to stack the 2 navs vertically next to the icon. This sets flex-direction: column on the navbar-collapse div so that it's child elements stack vertically. <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse"> <div class="container"> <button class="navbar-toggler navbar-toggler-right align-self-center mt-3" type="button" data-toggle="collapse" data-target="#navbarCollapse"> <span class="navbar-toggler-icon"></span> </button> <h1 class="py-2 ml-lg-2 mx-3"><a href="#"><i class="fa fa-envelope-o fa-lg mt-2" aria-hidden="true"></i></a></h1> <div class="collapse navbar-collapse flex-column ml-lg-0 ml-3" id="navbarCollapse"> <ul class="...

Answer : aren't you dividing by zero here when host = 0 in the for loop? updateProgress(100/host); you can use a variable hosts to keep track of the number of hosts you have.Then the progress will be as below. var hosts = 23;// total number of hosts updateProgress((host/hosts)*100); The other thing is the ajax you're firing is asynchronous, so what's happening is it fires and doesn't wait for the results. You can either "scan" each host serially one at a time updating the progress bar or scan all of them simultaneously having the progress bar update as the asynch results come back. Can you specify which behavior you're trying to achieve? [UPDATE] toggle async flag in the ajax call below for what you want. function updateProgress(percentage){ if(percentage > 100) percentage = 100; $('#progressBar').css('width', percentage+'%'); $('#progressBar').html(percentage+'%'); } var hosts = 23; va...

Answer : Increase width with CSS You can use CSS to increase the width of your popover, like so: /* The max width is dependant on the container (more info below) */ .popover{ max-width: 100%; /* Max Width of the popover (depending on the container!) */ } If this doesn't work, you probably want the solution below and alter your container element. (View the JSFiddle) Twitter bootstrap Container If that doesn't work, you probably need to specify the container: // Contain the popover within the body NOT the element it was called in. $('[data-toggle="popover"]').popover({ container: 'body' }); More Info The popover is contained within the element that it is triggered in. In order to extend it "full width" - specify the container: // Contain the popover within the body NOT the element it was called in. $('[data-toggle="popover"]').popover({ container: 'body' }); JSFiddle View the JSFiddle to ...

Answer : Bootstrap 4 doesn't include icons (glyphicons are gone), and there are now just 2 validation states ( is-valid and is-invalid ) that control display of the valid-feedback and invalid-feedback text. With a little extra CSS, you can position an icon inside the input (to the right), and control its' display using is-valid or is-invalid on the form-control input. Use a font lib like fontawesome for the icons. I created a new feedback-icon class that you can add to the valid/invalid-feedback . .valid-feedback.feedback-icon, .invalid-feedback.feedback-icon { position: absolute; width: auto; bottom: 10px; right: 10px; margin-top: 0; } HTML <div class="form-group position-relative"> <label for="input2">Valid with icon</label> <input type="text" class="form-control is-valid" id="input2"> <div class="valid-feedback feedback-icon"> ...

Answer : I had the same problem. After a couple of hours of trouble shooting found that, I had <script type="text/javascript" src="Scripts/bootstrap.min.js"></script> <script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script> instead of, <script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="Scripts/bootstrap.min.js"></script> Hope this helps someone I had the same problem when I included the bootstrap.min.js twice. Removed one of them and it began working. FYI: If you have bootstrap.js, you should not add bootstrap-dropdown.js. I'm unsure of the result with bootstrap.min.js.

Answer : You have a typo. Instead of: $('#myselect').append('<option val="'+newitemnum+'">'+newitemdesc+'</option>'); You need: $('#myselect').append('<option value="'+newitemnum+'">'+newitemdesc+'</option>'); Here is a JSFiddle demo: http://jsfiddle.net/xbr5agqt/ The "Add and select 'Soy Sauce' option" button does the following: $("#myselect").append('<option value="'+newitemnum+'">'+newitemdesc+'</option>'); $("#myselect").val(4); $("#myselect").selectpicker("refresh"); One slightly faster approach (used by the "Add and select 'Relish' option" button) is to append the new <option> element with the selected attribute already applied: $("#myselect").append('<option value="'+newitemnum+'" selected=...

Answer : Use the Bootstrap 4 h-100 class for height:100%; <div class="container-fluid h-100"> <div class="row justify-content-center h-100"> <div class="col-4 hidden-md-down" id="yellow"> XXXX </div> <div class="col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8"> Form Goes Here </div> </div> </div> https://www.codeply.com/go/zxd6oN1yWp You'll also need ensure any parent(s) are also 100% height (or have a defined height)... html,body { height: 100%; } Note: 100% height is not the same as "remaining" height. Related: Bootstrap 4: How to make the row stretch remaining height? Use bootstrap class vh-100 for exp: <div class="vh-100"> I have tried over a half-dozen solutions suggested on Stack Overflow, and the only thing that worked for me was this: <div class="row" style="display: flex; flex-w...

Answer : This is because the LESS files are not available in the CDN. Maybe other browsers manage to hide this error ? Here is the result in chrome for instance : Be sure to only use the CSS and JS files from bootstrap or host the less versions yourself. :)

Answer : You will need to modify some CSS rules for Navbar component. So add a class center to nav.navbar and the following rules: .navbar.center .navbar-inner { text-align: center; } .navbar.center .navbar-inner .nav { display:inline-block; float: none; } Working demo (Bootstrap 3.3.7) To extend upon the selected answer, adding vertical align top will prevent the space from appearing under the nav items. .navbar.center .navbar-inner { text-align: center; } .navbar.center .navbar-inner .nav { display:inline-block; float: none; vertical-align: top; } Demo Use text-center or mx-auto or container-fluid or use flexbox technique, flex justify-center You could use this hack text-center (this does not only apply for text) Or use the exact boostrap class mx-auto example class="text-center" or class="mx-auto" in context <div class="btn-group text-center"> or <div class="btn-group mx-auto...

Answer : Update Bootstrap 4 Bootstrap 4 has utility classes that make it easier to create a full screen carousel. For example, use the min-vh-100 class on the carousel-item content... <div class="carousel slide" data-ride="carousel"> <div class="carousel-inner bg-info" role="listbox"> <div class="carousel-item active"> <div class="d-flex align-items-center justify-content-center min-vh-100"> <h1 class="display-1">ONE</h1> </div> </div> </div> </div> Full screen carousel demo This works to make the carousel items full screen , but carousel items that contain images or videos that have a specific size & aspect ratio require further consideration. Since the viewport h/w ratio is likely to be different than the image or video h/w ratio, usually background ...

Answer : There are just two minor things here. The first is in the following carousel indicator list items: <li data-target="carousel" data-slide-to="0"></li> You need to pass the data-target attribute a selector which means the ID must be prefixed with # . So change them to the following: <li data-target=" # carousel" data-slide-to="0"></li> Secondly, you need to give the carousel a starting point so both the carousel indicator items and the carousel inner items must have one active class. Like this: <ol class="carousel-indicators"> <li data-target="#carousel" data-slide-to="0" class="active" ></li> <!-- Other Items --> </ol> <div class="carousel-inner"> <div class="item active "> <img src="https://picsum.photos/1500/600?image=1" alt="Slide 1" /> </d...

Answer : Try: .sticky-top { top: 0.5em; }

Answer : You could put "element 2" in a smaller column (ie: col-2 ) and then use push on larger screens only: <div class="row"> <div class="col-lg-6 col-xs-6">elements 1</div> <div class="col-lg-6 col-xs-6"> <div class="row"> <div class="col-lg-2 col-lg-push-10 col-md-2 col-md-push-0 col-sm-2 col-sm-push-0 col-xs-2 col-xs-push-0"> <div class="pull-right">elements 2</div> </div> </div> </div> </div> Demo: http://bootply.com/88095 Another option is to override the float of .pull-right using a @media query.. @media (max-width: 1200px) { .row .col-lg-6 > .pull-right { float: none !important; } } Lastly, another option is to create your own .pull-right-lg CSS class.. @media (min-width: 1200px) { .pull-right-lg { float: right; } } UPDATE Bootstrap 4 ...

Answer : It could be done in Bootstrap 4 using the responsive grid columns. One column for the sidebar and one for the main content. Bootstrap 4 Sidebar switch to Top Navbar on mobile <div class="container-fluid h-100"> <div class="row h-100"> <aside class="col-12 col-md-2 p-0 bg-dark"> <nav class="navbar navbar-expand navbar-dark bg-dark flex-md-column flex-row align-items-start"> <div class="collapse navbar-collapse"> <ul class="flex-md-column flex-row navbar-nav w-100 justify-content-between"> <li class="nav-item"> <a class="nav-link pl-0" href="#">Link</a> </li> .. </ul> </div> </nav> </aside...

Answer : Your code works! but, It doesn't work properly without jquery. <!DOCTYPE html> <html lang="en"> <head> <title>Title</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <a href="#demo" data-toggle="collapse"><span class=”icon”>Collapsible</span></a> <div id="demo" class="collapse"> Sample Code </div> </div> </body...

Answer : Your JavaScript replaces the inner html of the #ChangeToggle element to show either the X or the hamburger icon. Precisely clicking on the X or the hamburger menu instead of the #ChangeToggle will remove the element being clicked on which I think prevents it from bubbling up. As Bootstrap's collapse plugin uses an event handler on the document to determine if an element has been clicked, the collapse plugin will never get notified. I've created a small example where a click handler on the pink .outer area replaces the green .inner area. Note that clicking on the pink area (your #ChangeToggle ) will lead to two events, where clicking on the green area (your X icon) will lead to a single event. $(function() { $('.outer') .click(function() { $('.outer').html('<div class="inner"></div>'); fired('.js-outer'); }); $(document).on('click', '.outer', function() { fire...

Answer : I just figured it out. For anyone who needs this in the future. I added a css override that was: .navbar.transparent.navbar-inverse .navbar-inner { background: rgba(0,0,0,0.4); } And my html syntax looks like: <div class="navbar transparent navbar-inverse navbar-fixed-top"> <nav class="navbar-inner"> ... </div> </div> You can even use like this .navbar-default { background: none; } or .navbar { background: none; } You'll get transparent background. For a transparent navbar, it's pretty easy. In the CSS document you can do one of three things. A. The easy way, but you don't learn too much with this method. You can literally type in the CSS document that the background of the navbar is transparent. Pretty simple: .navbar { background-color: transparent; } B. You can indirectly set the alpha channel for the RGBA background color to something in between 0 and 1. The R, G, and B...

Answer : I'm most case i will expect the print in the non horizontal version maybe? In your case you could try to apply the grid rules on the print media query. In the case you use the small grid (col-sm-*) default, b.e. <div class="container"> <div class="row"> <div class="col-sm-6">Left</div> <div class="col-sm-6">Right</div> </div> </div> <!-- /container --> In your grid.less replace @media (min-width: @screen-tablet) { with @media (min-width: @screen-tablet), print { (add print, see: CSS media queries: max-width OR max-height) Recompile bootstrap and your pdf will have left / right just like screen now. Without Less you could try to add specific css rules for your case like: @media print { body {width:1200px;} div[class|=col-]{float:left;} .col-sm-6{width:50%} } Note print.less contains specific rules for print media. This i...

Answer : The sticky-top is working, but it doesn't appear to be working for two reasons... There isn't enough content in the main content area to scroll It's positioned at top:0 so it hides behind the fixed navbar Add CSS to offset the top of the sidebar (the same as height of fixed navbar). .sticky-offset { top: 56px; } <ul class="list-group sticky-top sticky-offset">..(sidebar)..</div> And, then add enough content (or height) in the main area so that scrolling is necessary... Working Demo: https://www.codeply.com/go/7XYosZ7VH5 <nav class="navbar navbar-expand-md navbar-dark bg-primary fixed-top"> .. </nav> <div class="row"> <div id="sidebar-container" class="sidebar-expanded col-2 d-none d-md-block"> <ul class="list-group sticky-top sticky-offset"> <li>Menu item..</li> <li>Menu item..<...