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 : 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 : I found a workaround for this issue. Once the modal has been hidden bootstrap data still remains on it. To prevent that I had the following: $('#myModal').modal('show'); //display something //... // if you don't want to lose the reference to previous backdrop $('#myModal').modal('hide'); $('#myModal').data('bs.modal',null); // this clears the BS modal data //... // now works as you would expect $('#myModal').modal({backdrop:'static', keyboard:false}); I had the same problem with Bootstrap 4.1.1 and it only worked when I added the data attributes to the html <div class="modal fade show" id="myModal" tabindex="-1" role="dialog" style="display: block;" data-keyboard="false" data-backdrop="static"> ... Similar to Daniele Piccioni but a bit more concise: $('#myModal').modal({backdrop: true, keyboard: false, show: t...

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 : 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 : For those who are using bootstrap4: classes for responsive floats and removed .pull-left and .pull-right since they’re redundant to .float-left and .float-right. More information from Bootstrap4 migration notes: Here Your form-group is aligned as far to the right as possible – but the content within it is not. You have only 4+4+2 wide columns in there, so you are “two columns short”, in the 12-column grid used by bootstrap. You might want to simply offset the first one of those by 2, by adding col-xs-offset-2 class – then the alignment should be closer to what you want to achieve. Bootstrap column layout will basically split the row into 12 columns. Here you are only defining 10 out of the twelve columns, which is why you have space left on the right. Try <div class="form-group pull-right"> <div class="col-xs-4 col-xs-offset-2"> <input type="text" class="form-contro...

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 : I know this is old, But I found something, which is a css style, simple easy and fast https://sufiawan.wordpress.com/2014/09/26/asp-net-use-bootstrap-pagination-on-gridview/ I hope it will save someone sometime. update: *In case the link is down: You add the CSS .pagination-ys { /*display: inline-block;*/ padding-left: 0; margin: 20px 0; border-radius: 4px; } .pagination-ys table > tbody > tr > td { display: inline; } .pagination-ys table > tbody > tr > td > a, .pagination-ys table > tbody > tr > td > span { position: relative; float: left; padding: 8px 12px; line-height: 1.42857143; text-decoration: none; color: #dd4814; background-color: #ffffff; border: 1px solid #dddddd; margin-left: -1px; } .pagination-ys table > tbody > tr > td > span { position: relative; float: left; padding: 8px 12px; line-height: 1.42857143; text-decoration: non...

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 : You can customize the placement of the popover or it's arrow my manipulating the .popover CSS once the popover is shown. For example, this pushes the top of the popover down 22 pixels.. $('[data-toggle=popover]').on('shown.bs.popover', function () { $('.popover').css('top',parseInt($('.popover').css('top')) + 22 + 'px') }) Working demo : http://bootply.com/88325 I recommend using the placement method rather than the shown.bs.popover event. This will not trigger a popover jump when the element is shown. This is how it works: $('[data-toggle=popover]').popover({ placement: function(context, source) { var self = this; setTimeout(function() { self.$arrow.css('top', 55); self.$tip.css('top', -45); }, 0); return 'right'; }, }); My use case is that the popover placement is top and I have to remove the arrow. I followed the solution provide...

Answer : This should be exactly what you are looking for. Here is a jsFiddle Demo If you want this as a fixed-footer, just add navbar-fixed-bottom class to the <nav class="navbar navbar-default" role="navigation"> element. HTML <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav"> <li cla...

Answer : I think problem is in placement rather then overlay, div.desc is absolute and image is its sibling. So overlay will not follow image it will follow only anchor tag or your div.wrapper . From what I can see is that there is a margin on image or padding in anchor or wrapper. The best solution is to put desc and image in another div with 100% width with 0 padding. <div class="col-sm-4 wrapper"> <a href="#"> <div class="fix"> <img src="images/upload/projects/21/wolf.jpg" class="img-responsive" alt="" /> <div class="desc"> <p class="desc_content">The pack, the basic unit of wolf social life.</p> </div></div> </a> </div> CSS: .fix{width:100%; padding:0px;} For others trying to overlay a caption on an image in Bootstrap, consider using carousel captions. See here: http://www.w3s...

Answer : With the recent release of bootstrap 3, and the glyphicons being merged back to the main Bootstrap repo, Bootstrap CDN is now serving the complete Bootstrap 3.0 css including Glyphicons . The Bootstrap css reference is all you need to include: Glyphicons and its dependencies are on relative paths on the CDN site and are referenced in bootstrap.min.css . In html: <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"> In css: @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"); Here is a working demo . Note that you have to use .glyphicon classes instead of .icon : Example: <span class="glyphicon glyphicon-heart"></span> Also note that you would still need to include bootstrap.min.js for usage of Bootstrap JavaScript components, see Bootstrap CDN for url. If you want to use the Glyphicons separately , you can do that by direct...

Answer : for total compatibility with twitter bootstrap 3, I need to override some plugins methods: // override jquery validate plugin defaults $.validator.setDefaults({ highlight: function(element) { $(element).closest('.form-group').addClass('has-error'); }, unhighlight: function(element) { $(element).closest('.form-group').removeClass('has-error'); }, errorElement: 'span', errorClass: 'help-block', errorPlacement: function(error, element) { if(element.parent('.input-group').length) { error.insertAfter(element.parent()); } else { error.insertAfter(element); } } }); See Example: http://jsfiddle.net/mapb_1990/hTPY7/7/ For full compatibility with Bootstrap 3 I added support for input-group , radio and checkbox , that was missing in the other solutions. Update 10/20/2017 : Inspected suggestions of the other answers and added ad...

Answer : Bootstrap 4 Use the data-parent="" attribute on the collapse element (instead of the trigger element) <div id="accordion"> <div class="card"> <div class="card-header"> <h5> <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne"> Collapsible #1 trigger </button> </h5> </div> <div id="collapseOne" class="collapse show" data-parent="#accordion"> <div class="card-body"> Collapsible #1 element </div> </div> </div> ... (more cards/collapsibles inside #accordion parent) </div> Bootstrap 3 See this issue on GitHub: https://github.com/twbs/bootstrap/issues/10966 There is a "bug" that makes the accordion dependent on the .panel class when using the data-parent attrib...

Answer : Bootstrap 3 Yes, it's possible. This "off-canvas" example should help to get you started. https://codeply.com/p/esYgHWB2zJ Basically you need to wrap the layout in an outer div, and use media queries to toggle the layout on smaller screens. /* collapsed sidebar styles */ @media screen and (max-width: 767px) { .row-offcanvas { position: relative; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .row-offcanvas-right .sidebar-offcanvas { right: -41.6%; } .row-offcanvas-left .sidebar-offcanvas { left: -41.6%; } .row-offcanvas-right.active { right: 41.6%; } .row-offcanvas-left.active { left: 41.6%; } .sidebar-offcanvas { position: absolute; top: 0; width: 41.6%; } #sidebar { padding-top:0; } } Also, there are several more Bootstrap sidebar examples here Bootstrap 4 Create a responsive navbar sidebar "dra...

Answer : just simply use as below and it will word wrap any long text within a table . No need to anything else <td style="word-wrap: break-word;min-width: 160px;max-width: 160px;">long long comments</td> So you can use the following : td { white-space: normal !important; // To consider whitespace. } If this doesn't work: td { white-space: normal !important; word-wrap: break-word; } table { table-layout: fixed; } I ran across the same issue you did but the above answers did not solve my issue. The only way I was able to resolve it - was to make a class and use specific widths to trigger the wrapping for my specific use case. As an example, I provided a snippet below - but I found you will need to adjust it for the table in question - since I typically use multiple colspans depending on the layout. The reasoning I believe Bootstrap is failing - is because it removes the wrapping constraints to get a full table for the scrollbars. THe...

Answer : With Bootstrap 4 .hidden-* classes were completely removed (yes, they were replaced by hidden-*-* but those classes are also gone from v4 alphas). Starting with v4-beta, you can combine .d-*-none and .d-*-block classes to achieve the same result. visible-* was removed as well; instead of using explicit .visible-* classes, make the element visible by not hiding it (again, use combinations of .d-none .d-md-block). Here is the working example: <div class="col d-none d-sm-block"> <span class="vcard"> … </span> </div> <div class="col d-none d-xl-block"> <div class="d-none d-md-block"> … </div> <div class="d-none d-sm-block"> … </div> </div> class="hidden-xs" becomes class="d-none d-sm-block" (or d-none d-sm-inline-block ) ... <span class="d-none d-sm-inline...

Answer : Updated 2019... Bootstrap 4 The carousel has changed in 4.x, and the multi-slide animation transitions can be overridden like this... .carousel-inner .carousel-item-right.active, .carousel-inner .carousel-item-next { transform: translateX(33.33%); } .carousel-inner .carousel-item-left.active, .carousel-inner .carousel-item-prev { transform: translateX(-33.33%) } .carousel-inner .carousel-item-right, .carousel-inner .carousel-item-left{ transform: translateX(0); } Bootstrap 4 Alpha.6 Demo Bootstrap 4.0.0 (show 4, advance 1 at a time) Bootstrap 4.1.0 (show 3, advance 1 at a time) Bootstrap 4.1.0 (advance all 4 at once) Bootstrap 4.3.1 responsive (show multiple, advance 1) new Bootstrap 4.3.1 carousel with cards new Another option is a responsive carousel that only shows and advances 1 slide on smaller screens , but shows multiple slides are larger screens . Instead of cloning the slides like the previous example, this one adjusts the CSS and use jQ...