Newbe Dev Stack

Answer : Use .form-group.required without the space. .form-group.required .control-label:after { content:"*"; color:red; } Edit: For the checkbox you can use the pseudo class :not(). You add the required * after each label unless it is a checkbox .form-group.required:not(.checkbox) .control-label:after, .form-group.required .text:after { /* change .text in whatever class of the text after the checkbox has */ content:"*"; color:red; } Note: not tested You should use the .text class or target it otherwise probably, try this html: <div class="form-group required"> <label class="col-md-2 control-label">&#160;</label> <div class="col-md-4"> <div class="checkbox"> <label class='text'> <!-- use this class --> <input class="" id="id_tos" name="tos" required="required" type=...

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 : The CSS specification requires that position:fixed be anchored to the viewport, not the containing positioned element. If you must specify your coordinates relative to a parent, you will have to use JavaScript to find the parent's position relative to the viewport first, then set the child (fixed) element's position accordingly. ALTERNATIVE : Some browsers have sticky CSS support which limits an element to be positioned within both its container and the viewport. Per the commit message: sticky ... constrains an element to be positioned inside the intersection of its container box, and the viewport. A stickily positioned element behaves like position:relative (space is reserved for it in-flow), but with an offset that is determined by the sticky position. Changed isInFlowPositioned() to cover relative and sticky. Depending on your design goals, this behavior may be helpful in some cases. It is currently a working draft, and has decent suppo...

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 : 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 : Old question, but I came across the same issue and was able to come up with a fairly neat solution, inspired by this. HTML: <figure> <img src="http://www.placehold.it/300x150" alt="" /> <figcaption>Make me as long as you like</figcaption> </figure>​ CSS: figure { background-color: #fff; padding: 5px; font-size: .875em; display: table; } figure img { display: block; width: 100%; } figcaption { display: table-caption; caption-side: bottom; background: #fff; padding: 0 5px 5px; }​ This ensures the figcaption does not exceed the width of the figure , whilst allowing you to keep max-width on the image. Works in all good browsers and IE8+. There's a Firefox bug that prevents max-width working within elements that are set to display: table . So, instead of using max-width on the image, setting its width to 100% means this works cross-browser. The figure's width will...

Answer : Fix delay solution: Put cubic-bezier(0, 1, 0, 1) transition function for element. scss .text { overflow: hidden; max-height: 0; transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); &.full { max-height: 1000px; transition: max-height 1s ease-in-out; } } css .text { overflow: hidden; max-height: 0; transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); } .text.full { max-height: 1000px; transition: max-height 1s ease-in-out; } This is an old question but I just worked out a way to do it and wanted to stick it somewhere so I know where to find it should I need it again :o) So I needed an accordion with clickable "sectionHeading" divs that reveal/hide corresponding "sectionContent" divs. The section content divs have variable heights, which creates a problem as you can't animate height to 100%. I've seen other answers suggesting animating max-height instead but this means sometimes you get delays when th...

Answer : Right now attr() is not supported by default in any major browser for any attributes other then "content". Read more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/attr There appears to be a way around it using var s .content{ --x: 1; width: calc(100px * var(--x)); background: #f00; } [data-x="1"] { --x: 1; } [data-x="2"] { --x: 2; } [data-x="3"] { --x: 3; } /*doesn't look like this works unfortunately [data-x] { --x: attr(data-x); } seems to set all the widths to some really large number*/ The commented out section would have been perfect, and this may be the very same reason your idea didn't work, but it seems css doesn't perform the nice automatic casting that you might be used to in javascript ( '2' * 3 //=6 ). attr() returns a string, not a number, and this can be seen by adding .content:after { content:var(--x) } ; nothing gets printed, --x is a number, content accepts s...

Answer : Okay, after reading the MDN reference, I found the answer! The key to dynamic rows (or columns) is the repeat property. const COLORS = [ '#FE9', '#9AF', '#F9A', "#AFA", "#FA7" ]; function addItem(container, template) { let color = COLORS[_.random(COLORS.length - 1)]; let num = _.random(10000); container.append(Mustache.render(template, { color, num })); } $(() => { const tmpl = $('#item_template').html() const container = $('#app'); for(let i=0; i<5; i++) { addItem(container, tmpl); } $('#add_el').click(() => { addItem(container, tmpl); }) container.on('click', '.del_el', (e) => { $(e.target).closest('.item').remove(); }); }); .container { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(auto-fill, 120px); grid-row-gap: .5em; grid-column-gap: 1em; } .contain...

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 : CSS selectors are generally case-insensitive; this includes class and ID selectors. But HTML class names are case-sensitive (see the attribute definition), and that's causing a mismatch in your second example. This has not changed in HTML5. 1 This is because the case-sensitivity of selectors is dependent on what the document language says: All Selectors syntax is case-insensitive within the ASCII range (i.e. [a-z] and [A-Z] are equivalent), except for parts that are not under the control of Selectors. The case sensitivity of document language element names, attribute names, and attribute values in selectors depends on the document language. So, given an HTML element with a Selfcatering class but without a SelfCatering class, the selectors .Selfcatering and [class~="Selfcatering"] will match it, while the selectors .SelfCatering and [class~="SelfCatering"] would not. 2 If the document type defined class names as case-insensitive,...

Answer : UPDATE 2020 With the new (yet in Editor's draft) CSS 4 properties you can achieve this by using min() and max() (also you can use clamp() as a - kind of - shorthand for both min() and max() clamp(MIN, VAL, MAX) is resolved as max(MIN, min(VAL, MAX)) min() syntax: min( <calc-sum># ) where <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]* where <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]* where <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> ) max() syntax: max( <calc-sum># ) where <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]* where <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]* where <calc-value> = <number> | <dimension> | <percentage>...

Answer : Tim S. was much closer to a "correct" answer then the currently accepted one. If you want to have a 100% width, variable height background image done with CSS, instead of using cover (which will allow the image to extend out from the sides) or contain (which does not allow the image to extend out at all), just set the CSS like so: body { background-image: url(img.jpg); background-position: center top; background-size: 100% auto; } This will set your background image to 100% width and allow the height to overflow. Now you can use media queries to swap out that image instead of relying on JavaScript. EDIT: I just realized (3 months later) that you probably don't want the image to overflow; you seem to want the container element to resize based on it's background-image (to preserve it's aspect ratio), which is not possible with CSS as far as I know. Hopefully soon you'll be able to use the new srcset attribute on the img element...

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 : You need to put the valid option. i:e show, hide or a callback function . See - https://getbootstrap.com/docs/4.2/components/toasts/. $('.toast').toast('show'); <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <img height="200px" width="200px" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" class="rounded mr-2" alt="..."> <strong class="mr-auto">Boots...

Answer : Since you are not worried about IE, why not just use css transitions to provide the animation and jQuery to change the classes. Live example: http://jsfiddle.net/tw16/JfK6N/ #someDiv{ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } Another solution (but it requires jQueryUI as pointed out by Richard Neil Ilagan in comments) :- addClass, removeClass and toggleClass also accepts a second argument; the time duration to go from one state to the other. $(this).addClass('abc',1000); See jsfiddle:- http://jsfiddle.net/6hvZT/1/ You could use jquery ui's switchClass , Heres an example: $( "selector" ).switchClass( "oldClass", "newClass", 1000, "easeInOutQuad" ); Or see this jsfiddle.

Answer : It is possible , but not ideal. Your best bet is to crack open your terminal and run sass-convert --from css --to scss in the directory where your styles are located and then refactor from there . It's a pain, and not a true "conversion". It tries to nest properly, and usually gets it right, but if you're not refactoring the code and using things like mix-ins, extends, and variables, it kind of defeats the purpose of using SASS to begin with. To automate this, you may want to use something like Guard to watch the css files for changes. You'll want to make sure you're not also watching your main style (the one that sass is compiling to), as this will put you in a never-ending loop of conversion! Use a command for installing compass gem install compass Run this command. This will scan defined directory for css files and convert them to scss files. sass-convert -R my_css_dir --from css --to scss Then execute this command compass watch...

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 : 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; }