How to Programming with Twitter-bootstrap

jquery,html,css,twitter-bootstrap,laravel

Take a look at this demo bootply. For this HTML: <div class="col-md-3"> <ul class="list-group"> <li class="list-group-item">Item 1</li> <li class="list-group-item">Item 2</li> <li class="list-group-item">Item 3</li> </ul> </div> <div class="col-md-9"> <div id="item1" class="showhide hidden"> <p>Section#1</p> <img src="http://www.placehold.it/350x150" class="img-responsive"> </div> <div id="item2" class="showhide hidden">...

Bootstrap navbar toggle is not working with Laravel

What the problem is is that you are using the link tag where you actually should be using the script tag: <link rel="text/javascript" href="{{ URL::asset('assets/js/jquery.js') }}" /> <link rel="text/javascript" href="{{ URL::asset('assets/js/bootstrap.min.js') }}" /> Javascript should be in a script tag for it to load into your page: <script type="text/javascript" src="{{...

How to use a CSS for only one div and not the rest of the code?

css,twitter-bootstrap,media-queries

Just add following css to your own css file, and dont add bootstrap.css if you need one single class, it makes site lot heavy. (Extracted from bootstrap itself) .progress { height: 20px; margin-bottom: 20px; overflow: hidden; background-color: #f5f5f5; border-radius: 4px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); box-shadow:...

horizontally align image/content with media query

JSFiddle You're targeting the wrong elements. Your container doesn't need to be pushed to display: inline-block or floated. The elements within it do: @media (max-width: 991px), (max-height: 460px) { .col-md-2:hover{ background-color: transparent; } .col-md-2 img { float: left; } .col-md-2 { overflow: auto; } } ...

How to make background body overlay when use twitter-bootstrap popover?

Posting some more code would be nice. This should work. Use some jQuery or AngularJs or any other framework to make the .overlay initially hidden, then to make it visible when needed. If you need help, comment. If it helps, +1. EDIT $(function() { $('[data-toggle="popover"]').popover({ placement: 'bottom' }); $("#buttonright").click(function() {...

Bootstrap Navbar vertically align Brand with other links

twitter-bootstrap,backbone.js,marionette,composite-view

Set a negative margin-top value. In your case -1.1px seems perfect. .navbar-inverse .navbar-brand { margin-top: -1.1px; } Output: ...

Marionette CompositeView - change in template each nth items

You can exploit Collection/CompositeView's childViewOptions which accepts a function. From the CompositeView you can pass the template you need. So for example: childViewOptions: function () { var template = defaultTemplate; if (++this.childCount % 4 == 0) // 3 children have been rendered, this one is the 4th template = fourthTemplate;...

Twitter-Bootstrap drop down log in closes when text areas are clicked

javascript,jquery,html,twitter-bootstrap

You don't need any jquery to do this. include bootstrap.js and bootstrap.css then Try this code. Ex:- JS FIDDLE <div id="top-bar"> <div class="container"> <div class="row"> <div class="col-sm-12"> <ul id="top-info"> <li>Phone: 703-518-4325</li> <li>Email: <a href="mailto:[email protected]">[email protected]</a></li> </ul> <ul class="nav pull-right" id="top-buttons"> <li class="dropdown"> <a href="#" class="dropdown-toggle"...

Text going out of the container div

css,twitter-bootstrap,twitter-bootstrap-3,bootstrap

Just add top:0; and left:0; positioning to the CSS: #overlay { background: rgba(0,0,0,0.8); position: absolute; z-index:100; width: 100%; color:#fff; height: 100%; top:0; left:0; } Updated Bootply Update based on your comment: One way to add the padding to the overlay would be to use calc to make the overlay 30px...

how to make horizontal list of boostrap 3 panels responsive

css,twitter-bootstrap,bootstrap

To make it mobile friendly you should have different column sizes at lower resolution. The words are too long to fit within a col-xs-2. You could keep the 4 columns layout by giving it two classes of col-xs-6 and col-sm-3. Once it gets to the smaller resolution the columns will...

Calling AngularJS function from a remote page loaded by Bootstrap modal

javascript,angularjs,twitter-bootstrap

You don't need to create two 'ng-app'. With only two controllers but with the same ng-app, you can do the job. Can you try something like this : (EDIT: the code bellow doesn't works) <div ng-controller="saveFormController"> <div class="modal-header"> <button class="close" data-dismiss="modal" type="button"> <span aria-hidden="true">×</span> <span class="sr-only">Close</span> </button> </div> <div class="modal-body">...

Krajee Bootstrap File Input unresponsive

javascript,php,jquery,twitter-bootstrap

The reason for not submitting came from your "uploadURL" which is spelt wrongly according to the documentation. Change this uploadURL: "upload.php", to uploadUrl: "upload.php", that solves your problem. http://plugins.krajee.com/file-input#option-uploadurl...

How to fit the title to the entire page

You just need to remove margin-left: -29px; from #titlebig. For example: body { background-color: black; margin: 0px; padding: 0px; } div { margin: 0px; padding: 0px; } .header { color: white; font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial"; } .box { background-color: aqua;...

how can I add a caption on hover with a img-circle image in bootstrap

Well I think I figured it out. But I'd love to hear if there is a nicer way to do this. HTML: <section id="design"> <div class="row"> <div class="col-sm-3 col-sm-offset-1"> <div class="circular pic img-circle" id='hatchBkgd'> <h3>Hatch</h3> <p>Typography, Print Design</p> <a href="hatch.html"><img src="http://i.imgur.com/IlW9pin.png" class="img-responsive img-circle fig"> </a> </div> </div> <div class="col-sm-3"> <div...

list checkboxes displayed horizontal

html,css,html5,twitter-bootstrap,css3

First thing is your mark-up is totally wrong! You cannot have <ul> inside <span>. You can have only <li> inside <ul>. To answer your query, it is just a simple CSS fix: .new-select { display: inline-block; } ...

Customize Bootstrap on a Yeoman project

twitter-bootstrap,yeoman

It is very simple. I put the CSS files instead of mines in my Yeoman project at bower_components/bootstrap/dist/css (4 files) and the JS files in bower_components/bootstrap/dist/js (2 files). Thanks @yuyokk for your comment on the config.js file, which is only useful for further customization....

Bootstrap modal background changes its transparency

jquery,twitter-bootstrap,bootstrap

Move the modal to a different position in the DOM, and make sure you HTML validates for the entire page.

Bootstrap daterangepicker add option manually using jquery

You need to call the setOptions method like $('#reservationtime').data('daterangepicker').setOptions({ minDate: new Date() }) ...

Popup is not getting shown - bootstrap

c#,css,asp.net,twitter-bootstrap

Store the target in a variable and use it in the load function, and also note that an extra semicolon removed from load('register.html')';' from your original code $(function () { $('#signup').on('click', function () { var target = $(this).attr('data-target') ; $("#myModal").load(target, function() { $("#myModal").modal("show"); }); }); }); ...

RequiredFieldValidator not working in my ASp site

You just miss a little thing i.e. to assign a Validation Group to your buttons and your RequiredFieldValidators. Your code should be: <div class="container"> <h2>Registration</h2> <p>Please fill out the forms to complete your registration.</p> <form role="form"> <div class="form-group"> <label for="username">Name:</label> <asp:TextBox runat="server" ID="UserName" CssClass="form-control" /> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"...

Bootstrap Grid on the screen

As you have not provided code it will be hard to understand the problem in code. But what usually the problem comes is with using container class. So instead of using container class use jumbtron class or container-fluid class as they takes full width of the web page. For more...

How to hide bootsrap grid systems' column

try this.. <div class="col-xs-4 hidden-xs" style="background-color:lavender;">.col-sm-4</div> and the below class names defined according to the width of device.. Extra small devices Phones (<768px) (Class names : .visible-xs-block, hidden-xs) Small devices Tablets (≥768px) (Class names : .visible-sm-block, hidden-sm) Medium devices Desktops (≥992px) (Class names : .visible-md-block, hidden-md) Large devices Desktops (≥1200px)...

col-md-4 and col-md-8 won't float after adding a form?

php,html,twitter-bootstrap

You need to close the div to col-md-4 properly, right now col-md-8 is inside col-md-4 hence why it will not float beside it What you have: <div class="col-md-4"> <form /> <div class="col-md-8"></div> </div> What you change it to <div class="col-md-4"> <form /> </div> <div class="col-md-8"></div> ...

Bootstrap 'form-group has-error' not working with php codes [closed]

Note: If a user submits the form with empty fields except for gender, it will return true and will go to your insert statement. It will overwrite the value of your $valid variable in every if() statement. You can try this instead for assigning value on your $valid variable: if(empty($fname)...

How we can create dynamic layout of columns with the help of bootstrap?

php,jquery,html,css,twitter-bootstrap

You are missing the row elements: <div class="container"> <div class="row"> <div class="col-sm-3"> Sidebar </div> <div class="col-sm-9"> <div class="row"> <div class="col-sm-4">1</div> <div class="col-sm-4">2</div> <div class="col-sm-4">3</div> </div> <div class="row"> <div class="col-sm-4">4</div> <div class="col-sm-4">5</div> <div class="col-sm-4">6</div> </div> </div> </div> <div...

Div bigger then Content after centering

html,css,twitter-bootstrap,bootstrap

use vertical-align: top; in .nav hope this will solve your issue updated working code...

Bootstrap dropdown on hover not working, what am I doing wrong?

css,twitter-bootstrap,twitter-bootstrap-3

jQuery(this).find('.dropdown-menu') won't work here as .dropdown-menu is not a child of <a>-#dropdown-filter. .find() searches for children. Use jQuery(this).next('.dropdown-menu')......

Bootstrap switch between class when in tablet or phone viewport

Yes, you will want to use media queries in your css to set the rules differently. If you want the same effect for col-lg-6 you only need to define it in the media query for col-md-6 Keep in mind you only need to define col-sm-6 in your HTML, because it...

Handle a file attachment rails form

ruby-on-rails,twitter-bootstrap

The attached file should be in params[:migrations][:csv]. See the guides notes on the file_field helper.

Centering navbar pills vertically within the navbar using flexbox

html,css,twitter-bootstrap,flexbox

Set display: flex for the <ul class="nav">, not for items. Also use align-items: center for vertical aligment: .nav { height: 70px; display: flex; justify-content: center; align-items: center; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <nav class="navbar navbar-default navbar-fixed-top"> <ul id="nav_pills" class="nav nav-pills" role="tablist"> <li role="presentation"> <a href="/">About</a> </li> <li...

maxlength not working in html form input field with bootstrap

html5,forms,twitter-bootstrap,bootstrap,html-form

It is not bootstrap that are causing this. maxlength does only apply to <input>'s of type text, email, search, password, tel or url. See MDN. Thats why maxlength not works with your <input type="number" maxlength="2"> Proof of concept : text : <input type="text" maxlength="2"> number : <input type="number" maxlength="2"> here...

after puttin php syntax, my website get stuck at preloader

php,twitter-bootstrap,session

Remove the ; after$session->user_name;

How to put three or more images at navbar-right (Bootstrap)

javascript,jquery,twitter-bootstrap,button,drop-down-menu

Try like this: Demo <div class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header pull-left"> <a class="navbar-brand" href="index.php">xxx</a> </div> <ul class="nav navbar-nav navbar-right"> <li><a href="http://www.youtube.es/"><img src="IMAGENES/youtube.png"/></a> </li> <li><a href="http://www.twitter.es/"><img src="IMAGENES/twitter.png"/></a> </li> <li><a...

Dynamically change a button-drop list in javascript?

Here's one approach - have all your menu items in the HTML, and then use CSS to hide/show the appropriate ones <div class="btn-group"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Menu <span class="caret"></span> </a> <ul id='my-dropdown' class="dropdown-menu" data-menu-id='default'> <li class='default'><a href="#">Choice1</a></li> <li class='default'><a href="#">Choice2</a></li> <li class='default'><a...

Sticky navbar creating a right margin on scrolling down

Using the code inspector I found that #nav-wrapper .row#nav-row has a negative margin set. The rule of specificity and margin: 0 fixes the issue #nav-wrapper .row#nav-row { margin: 0; } $(function () { $('#nav-wrapper').height($("#nav").height()); $('#nav').affix({ offset: { top: $('#nav').offset().top } }); }); #nav-wrapper .row#nav-row { margin: 0; } .navbar .navbar-nav...

'hidden.bs.modal' lazy triggering?

You need to use a different event, hide.bs.modal. This will fire immediately after the call to hide: $('#productDetailsModal').on('hide.bs.modal', function (){ $('#carousel-example-generic').carousel('cycle'); }); From the Bootstrap docs: hide.bs.modal - This event is fired immediately when the hide instance method has been called. hidden.bs.modal - This event is fired when the modal...

How to prevent bootstrap from making font bold?

html,css,twitter-bootstrap,css3,twitter-bootstrap-3

The original black color which bootstrap was using was #333. You change it to #000 which makes it appear bolder. Try this $(document).ready (function () { $('.ztag') .hover ( function () { $(this).css({color: '#ff0000'}) }, function () { $(this).css({color: '#333333'}) } ) }) ...

Content section overlap footer

remove - position: absolute for footer create wrapper for page content to push down footer html, body { height: 100%; } body { margin: 0; padding: 0; } .wrapper { min-height: 100%; height: auto; /* Negative indent footer by its height */ margin: 0 auto -60px; /* Pad bottom...

Modal from inside Bootstrap Tabs using Knockout foreach

jquery,twitter-bootstrap,knockout.js,twitter-bootstrap-3

I suggest using a totally different pattern for this. Use one Bootstrap modal at the level of your $root view model. This modal shows data for a root view model observable currentModalItem and is hidden when that observable is null. The modal is activated by setting that observable from inside...

Best Solution for Bootstrap Carousel Image Size Changes Causing Elements on Page to Move

html,css,image,twitter-bootstrap,carousel

Todd, Hi there. Have a look at this post here to do with Bootstrap carousel. There is a Fiddle with full code for you to use. I have 4 very different sized images in a responsive carousel. The carousel does not change size when each image slides in. You could...

MvcSiteMapProvider - Enhanced bootstrap dropdown menu

c#,twitter-bootstrap,asp.net-mvc-5,mvcsitemapprovider,mvcsitemap

node.Descendants should be node.Children Learn the difference on Descendants and Children here, CSS Child vs Descendant selectors (Never mind the post beeing about CSS, this is a generic pattern)...

Setting up the page grid using push and pull

html,twitter-bootstrap,css3,twitter-bootstrap-3

Make sure you don't add a period (.) inside of the class attribute. When using push/pull, you need to offset the columns from where they would normally go. Moving them left or right won't change their underlying order in the document flow. So you can do it like this:...

.NET MVC: Finding default Bootsrap JavaScripts

javascript,asp.net-mvc,twitter-bootstrap

You can reference the open li using css class selector '.': $(".dropdown.open") this will give you the currently open dropdown. Explanation: 'CSS selectors' allow you to select elements using CSS syntax. For example: '#id' where the '#' indicates the following text is the id of the element. '.class' allows you...

Border spacing between the columns

You can use paddings and a child div .col-xs-4 { padding: 16px; } .col-xs-4 > div { border: 1px solid black; padding: 16px; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> <row> <div class="col-xs-4"> <div> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste necessitatibus, sapiente vitae ullam exercitationem debitis quos quod, consequatur...

Move icon up and inline with my main heading

javascript,jquery,html,twitter-bootstrap,datepicker

You are accessing the class with wrong selector syntax. Add a dot to the selector. .IconFront { position:absolute; } .img1 { position:relative; top:10px; left:0px; } ...

Datepicker not showing days - Bootstrap

DEMO Ok. The problem was with your below line: ("tr:not(:has(>th))").show().filter inside FilterLoggingTable() function. What this does is hides or shows all the trs in the page when criteria is matched!Now why this effects your calendar is because the bootstrap creates table for your calendar when you initialize the datepicker and...

Bootstrap navbar toggle button not collapsing

html,css,twitter-bootstrap,twitter-bootstrap-3,bootstrap

You should be using the <script> tag to reference JS files <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"> Not <link>. These are for stylesheets. <link rel="stylesheet" href="bower_components/bootstrap/dist/js/bootstrap.min.js">...

Align column vertically with bootstrap

Add a margin to your third column because you have a fixed height. This solution will work. .vertical-align { margin-top: 1.5em; } ...

Bootstrap datepicker expands up but not down

html,css,twitter-bootstrap,css3

Have you tried to change the orientation property? $('#datetimepicker6').datepicker({ orientation: 'bottom' }) https://bootstrap-datepicker.readthedocs.org/en/latest/options.html#orientation On the API they bind the datepicker in a input tag instead of a div. Have you tried that?...

Navbar CSS not properly displaying hover functions and menu items

If you want to find something like Twitter's navbar, then the best way is to see how they do? I did this for you :) In the Twitter's navbar, the transition is made on the height and not on the border. Evidently animate the borders and paddings at same time...

place button next to input [closed]

ruby-on-rails,twitter-bootstrap,ruby-on-rails-4,asset-pipeline

You can use input-group for this: <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Abschicken</button> </span> </div> Du kannst input-group dafür nutzen: <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Abschicken</button> </span>...

adding background image in style rails 4

You should change "background-image:"url(image-url('lines3.png')"; into "background-image:"image-url(image-url('lines3.png')"; http://guides.rubyonrails.org/asset_pipeline.html#css-and-sass Or you can try with: background-image: url(<%= asset_path 'lines3.png' %>)...

Any conflicts between UI-Bootstrap and Twitter Bootstrap?

angularjs,twitter-bootstrap,angular-ui-bootstrap

No, there are no conflicts. Especially since ui-bootstrap is dependent on Twitter Bootstrap. From the linked docs: This repository contains a set of native AngularJS directives based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required. The only required dependencies are: AngularJS...

Left and Right Carousel Controls not Working when Smooth Scroll for Anchor Tags Used

javascript,jquery,twitter-bootstrap,carousel

Then you just have to edit you code for the smooth scroll like this, depending if you have the ID header-menu or class header-menu Change $('a[href*=#]:not([href=#])').click(function() { to (if you use the ID header-menu) $('#header-menu a[href*=#]:not([href=#])').click(function() { or (if you use the class header-menu): $('.header-menu a[href*=#]:not([href=#])').click(function() { This way you...

Unwanted line break between elements

css,twitter-bootstrap,bootstrap

Use for both: display: inline-block; for the button use float: right; for the text input use float: left;

bootstrap mulitple nav tabs for tab content

When you click on a tab, record the href value. Then select all nav tabs with the matching href and set them to active. This will keep the top and bottom navs in sync with each other no matter which one you click. Finally set the matching tab to active....

How to update the value of data attribute using jquery

twitter-bootstrap,responsive-design,html-table

You should update the attribute value, rather than updating data property: $('#collapseDiv').on('shown.bs.collapse', function () { $('.icon-before').attr('data-icon', '&#xf147').text('Show Less'); }); $('#collapseDiv').on('hidden.bs.collapse', function () { $('.icon-before').attr('data-icon', '&#xf196').text('Show More'); }); ...

Bootstrap table with a sidebar

It looks like you've got some of the column classes on the wrong elements as @TomCat pointed out - maybe this will help: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Scrolling URL Hash</title> <meta name="description" content="Webpage for xxxx"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <style> </style>...

Linking to a DIV inside a Bootstrap 3 accordion from another page

javascript,html,twitter-bootstrap,accordion,collapse

Actually you have that which is working correctly : $(document).ready(function () { location.hash && $(location.hash + '.collapse').collapse('show'); }); Show collapse of required information is not your problem right now. Just you need to capture when your URL hash is from a diferent tab and show it if hidden. You can...

CSS - Bootstrap centering col-md-3 with weird results

javascript,angularjs,node.js,twitter-bootstrap

You have to separate the col- divs into rows in order for them to work properly: (also remember to close your divs) <div class="wrapper"> <div class="row"> <div class="col-md-3"></div> <div class="col-md-3"></div> <div class="col-md-3"></div> </div> <div class="row"> <div class="col-md-3"></div> <div class="col-md-3"></div> <div class="col-md-3"></div> </div> <div class="row"> <div class="col-md-3"></div> <div...

Change active state of item list on clicking previous and next buttons using angularjs

You need to change index of the $scope.selectActive in your functions previousItem and nextItem not to set them new object of last index something like this $scope.previousItem=function() { var total=$scope.items.length if ($scope.selectActive >0) { $scope.selectActive--; } } $scope.nextItem=function() { var total = $scope.items.length - 1; if ($scope.selectActive < total) {...

Bootstrap dropdown selection makes screen jump

javascript,html,css,twitter-bootstrap,drop-down-menu

When you use an anchor tag, <a>, it is going to automatically go to the location that the href tag is pointing to. If your link is pointing to an id on the page, the link is going to scroll the screen to the element the link is pointing to....

Bootstrap Progress Bar Not Showing Colors [closed]

jquery,twitter-bootstrap,knockout.js

You need to import the Bootstrap CSS to use it:  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> ...

Horizontal image list modules to be used wit KO.js and Bootstrap

I don't know of a plug-in to do this, but it's not too complicated to roll your own layout. This is mostly about CSS. With this HTML: <div class="scrolling-container"> <div class="image-list" data-bind="foreach:images"> <div class="image-cell"> <div class="image-frame"> <img data-bind="attr:{src:url}" /> <div class="image-info" data-bind="text:info"> </div> </div> </div> </div> </div> Apply this CSS:...

AngularJS & Bootstrap Modal - loading template outside controller

angularjs,twitter-bootstrap,angular-bootstrap

A good way to reuse your template is to put it in a separate html file and put its url in templateUrl. So $modal can get it from server every time needed.

React js css transitions on class removal

twitter-bootstrap,reactjs,css-transitions

You just need a width transition, since the width CSS property is defined on both the col-xs-2 and col-xs-12 classes. http://jsfiddle.net/5pvkjwth/2/...

Owl Carousel implementation

jquery,twitter-bootstrap,carousel,owl

You forgot to load jQuery! Try: <footer> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="js/plugin/owl.carousel.min.js"></script> <script src="js/custom.js"></script> </footer> ...

bootstrap center 3 col-md-3 divs

Update: This is good solution for normal layout, not for Twitter Bootstrap as it disrupts the Bootstrap behaviour. Check Jeben's answer for a better layout. A modern browsers solution and apt for your problem. Flexbox technique with justified content. @media (min-width:992px) { .community-images { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox;...

Set date in bootstrap datetimepicker input

javascript,node.js,twitter-bootstrap,jade

Did you want to write : $('#datetimepicker2').datetimepicker({ date: new Date(1434544882775) }); ...

Including Javascript for button click in Jade

your code is working fine, make sure you're clicking on the right element (checkbox). have a look at this example: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="jumbotron"> <div class="container"> <h1></h1> <p>Enter the url of the file to be sent</p> <form id="formInputURL" name="chooser" method="post" action="/chooser"> <input id="inputURL" type="text" placeholder="insert url" name="chooseurl" /> <button id="btnSubmit"...

Django: form validation errors are not being displayed when form is in a modal

django,twitter-bootstrap,bootstrap-modal

You need to write some javascript to sense whether the form has been submitted and found invalid, and if so display the modal. You can set a javascript global variable in your template based on the error state: <script> document.formHasErrors = {% if form.errors %}true{% else %}false{% endif %}; </script>...

Dropdown menu not working (tab focus)

html,css,html5,twitter-bootstrap,bootstrap

I'm not 100% sure I understand your question but, if you want the dropdown to toggle when you tab onto it, you can do the following using javascript, $('.dropdown-toggle').keyup(function(e) { if (e.keyCode == 9) { $(this).dropdown('toggle'); } }); Here's an example, http://jsfiddle.net/p73vc8Lv/3/...

Spinning icon, next to edit box

javascript,jquery,html,twitter-bootstrap,bootstrap-modal

<div class="well well-sm shadow"> <div class="row"> <div class="col-xs-12"> <input type="search" onkeyup="doSearch(this.value)" class="form-control" /><img src="http://www.andrewdavidson.com/articles/spinning-wait-icons/wait24.gif" style="left:10px; position:absolute; z-index:1000;" /> </div> <div class="col-md-12 col-xs-12 col-sm-4 SearchResultsBox text-right"> <button class="btn btn-sm btn-info" onclick="ViewSearchResult()">View</button> </div> </div>...

Centering image in the middle of page with Jade and Bootstrap

twitter-bootstrap,jade

You can use a custom class, like this: .center { display: inline-block; vertical-align: middle; float: none; } And: <div class="row"> <div class="col-xs-12 center"> <div>Center</div> </div> </div> ...

Include HTML code in BootStrap Modal Dialog

You could save the markup in a template file and BootstrapDialog.show({ message: $('<div></div>').load('template.html') }); or reuse some already existing HTML BootstrapDialog.show({ message: $('#element').html() }); ...

Bootstrap Tabs First Tab dynamically loading without having to click on it

javascript,jquery,ajax,twitter-bootstrap,tabs

Here is the solution. Hope it helps! (: JS: $('.active[data-toggle="tabajax"]').each(function(e) { var $this = $(this), loadurl = $this.attr('href'), targ = $this.attr('data-target'); $.get(loadurl, function(data) { $(targ).html(data); }); $this.tab('show'); return false; }); ...

Why does my hover button dropdown not stay open when I mouse-over?

javascript,jquery,twitter-bootstrap,bootstrap-modal

It's because your hover handler is on the button element and as soon as you mouseover the menu element the "mouseout" handler triggers because you left the button. Instead your handler should be on the surrounding .dropdown element. $('.dropdown').hover(function () { $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(); }, function () { $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(); });...

How to reload page after bootstrap modal closed

You could just fire the location.reload() when you hide your modal: $("#customerAdded") .modal("show") .on("shown.bs.modal", function () { window.setTimeout(function () { $("#customerAdded").modal("hide"); location.reload(); }, 5000); }); ...

Bootstrap 3 Navbar not working on mobile

html,css,twitter-bootstrap,navbar

The issue is that you are not including the Bootstrap Javascript(necessary for using the built-in dropdown menu) on your page. Once you have included that, it should work: <script tpye="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> ...

Responsive background with its height based on the adjacent column using bootstrap

here's a bootstrap example of a column that has background-size:cover http://jsfiddle.net/maio/7rbjj2fn/3/ .bgimage{ background-image: url(http://oi58.tinypic.com/2u9mo0g.jpg); background-size: cover; height:200px } .right{ background:yellow; height:100%; } .row{ background:tomato } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class='row'> <div class=" col-sm-5 col-md-5 col-lg-4 bgimage"> </div> <div class="right col-sm-7 col-md-7 col-lg-8">...

Bootstrap Modal popup not scrolling with keyboard

Keystrokes are only detected by the element that currently has the focus, so your keydown event won't trap anything if the focus is on an element in the background. I suggest doing the following: Making your modal focusable by giving it the tabIndex=-1 attribute Setting it to have the focus...

Bootstrap toggle doesn't display well when added dynamically

You need to call the bootstrapSwitch() again after adding and with a new ID, class or else it will alter the states of existing toggle as well. $('.btn').on('click', function () { $('p').after( '<input id="newCheckBox" type="checkbox" data-off-text="Male" data-on-text="Female" checked="false" class="newBSswitch">' ); $('.newBSswitch').bootstrapSwitch('state', true); // Add }); JSfiddle...

Padding in text field. Twitter bootstrap

ruby-on-rails,twitter-bootstrap,ruby-on-rails-3.2

use just like input[type="text"] { padding: 5px; } ...

Add Badges with Item Count to my Navbar using Rails 3.2

Added: To get the total number of records for a model you simply call .count on the model class. irb(main):004:0> User.count (0.8ms) SELECT COUNT(*) FROM "users" => 1 However this cannot be used on an association since the associated objects belong to an instance - not to the class. So...

Rails 4 - Bootstrap and CSS not showing on production server

ruby-on-rails,twitter-bootstrap,asset-pipeline

# Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added) # config.assets.precompile += %w( search.js ) You might have to uncomment the above lines and add the js and css files you are compiling. Above line should be present in /config/environments/production.rb...

End to end alignment of 3 Columns using Bootstrap

You can use the text-align property for alignment. No need to have col-md-11 wrapped inside it. .col-md-4:last-child { text-align: right; } .col-md-4:nth-child(2) { text-align: center; } <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <div class="col-xs-4 col-md-4"> <div class="col-md-11">  <h1>Head 1</h1> </div> </div> <div class="col-xs-4 col-md-4">...

Fit inline elements in a row with Bootstrap

javascript,jquery,twitter-bootstrap,modal-dialog

Try this DEMO <div class="form-inline"> <div class="form-group"> <input class="form-control" type="text"> </div> <a class="btn btn-default" href="#">Button 1</a> <a class="btn btn-default" href="#">Button 2</a> <a class="btn btn-default" href="#">Button 3</a> </div> ...

Bootstrap modal - screen goes black

I created some modals at bootply and adapted your code, check out if this is of any help. bootply example...

Bootstrap 3 col-sm-4 creates two columns instead of 3

javascript,angularjs,twitter-bootstrap

Your problem lies in the styling being applied to the figure tag element by the normalize.css (some additional margins in the variety of 1em for margin-top and 40px for margin-right, causing your content to be wider than Bootstrap's 33.3% width for the col-sm-4 divs). Either switch your figure elements to...

How to set CSS class in AngularJS directive and default if none set?

Something like this could work: <div class="{{ btnClass || 'btn btn-primary btn-upload'}}" ng-click="openModal()"> <i class="fa fa-upload"></i> Upload </div> And then the directive: angular.module('documents').directive('documentUpload', ['$timeout', '$translate', '$q', '$docs', function ($timeout, $translate, $q, $docs) { return { restrict: 'E', scope: { text: '@', refId: '@', refType: '@', documents: '=', btnClass: '=' //**...

Active Bootstrap Buttons

jquery,twitter-bootstrap,button

you can create a class that activates the button on click: for example clicked maybe? Untested but it should work fine The ToggleClass method: This method checks each element for the specified class names. The class names are added if missing, and removed if already set - This creates a...

Bootstrap 3 collapsed menu not working on mobile screens

jquery,css,twitter-bootstrap,twitter-bootstrap-3

1mjp Hi there, have a look at the Fiddle here. Or the snippet below. It only has standard Bootstrap css/js. And your menu, which works fine, no problem like in your website. Have a look to see if you have some js closing the link when clicked. I think you...

How to make navbar items a fixed width in Bootstrap 3

You have to add css width property to all elements in the navbar. Assuming your navbar is something like this: <div id="myCustomNavbar"> <ul> <li class="active">Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div> You should add some style with CSS: #myCustomNavbar > ul > li { width: 100px !important; } Remember...

Remove weird space bootstrap

jquery,twitter-bootstrap,datepicker

It's actual whitespace usually caused by the spaces in your HTML reflected for inline elements such as images.. You can remove it by making the image display:block img { border: 1px solid red; height: 100%; width: 100%; display: block; } JSfiddle Demo...

Bootstrap 3 DatePicker - How to reset selected date without resetting the picker configuration?

You need to get the current datePicker instance and call setDate(null) on it. you can do it like this: $("#clear").click(function(){ $('#myDatepicker').data('datepicker').setDate(null); }); updated fiddle: http://jsfiddle.net/4L6fhjLf/2/...

Disabling right-click for not yet loaded content