How to Programming with Twitter-bootstrap-3

twitter-bootstrap-3,responsive-design,jquery-datatables

.inline{ display:inline-block!important; width:auto!important; } <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.4/custom/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <row> <form class="form-inline"> <div class="form-group"> <label>Start:<input...

How to make a jquery datatable use bootstrap table-responsive class?

Try adding <div class="table-responsive"></div> container after the table has been initialized, see the sample code below: $('#example').DataTable({ "initComplete": function(settings, json){ $('#example').wrap('<div class="table-responsive"></div>'); } }); The reason <div class="table-responsive"> didn't work because <table> has to be direct child of <div class="table-responsive">, but DataTables changes hierarchy and the styles no longer apply....

Making certain form fields inline with label

html5,css3,twitter-bootstrap-3

You can use the col-*-* class tags in order to set the amount of cols you want. For example you set the label for 2 columns using the class col-md-2. For input elements, the best practice will be using a parent div container. Then on this parent you set the...

Disable active link styling for Bootstrap 3 one-page site

Comparing your CSS with that in effect on Bootstrap's Navbar example, it seems that the problem is that your selectors for the :hover and :focus cases aren't specific enough, making your rules fail to override Bootstrap's default ones. If you add .navbar-custom to these two rules I think it should...

Block rearrangment at narrow screen size

twitter-bootstrap-3,movement,htmlelements

Starting with twitter bootstrap you make a structure like this (inline styles here are just to see) <div class="container"> <div class="row"> <div class="col-xs-12 col-md-4" > <div style="background:red;height:50px;"></div> </div> <div class="col-xs-12 col-md-8" > <div style="background:green;height:100px;"></div> </div> <div class="col-xs-12 col-md-4" > <div style="background:blue;height:50px;"></div> </div> </div> <div> We will end up having...

Bootstrap switch between class when in tablet or phone viewport

css,twitter-bootstrap,twitter-bootstrap-3

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...

Show navbar-nav horizontally in mobile screen

html,css,twitter-bootstrap,twitter-bootstrap-3,angular-ui-bootstrap

Add this CSS .navbar-collapse.collapse { display: block!important; } .navbar-nav>li, .navbar-nav { float: left !important; } .navbar-nav.navbar-right:last-child { margin-right: -15px !important; } .navbar-right { float: right!important; } Check This Demo...

How to prevent height change during animation using 100% width images in bootstrap carousel

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

Just add this CSS, .carousel-inner > .item{ width: 100%; } ...

Removing gap between navbar options

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

here is a solution for you,instead of this: #mainNav .dropdown{ display:inline; margin: 0; padding: 0; } change to this: #mainNav .dropdown{ float:left; /* new */ width:auto; /* new */ margin: 0; padding: 0; } Not quiet sure why you need the width:500px on your first li, so I removed otherwise...

Enabling code completion for bootstrap.js in PhpStorm

twitter-bootstrap,twitter-bootstrap-3,phpstorm

I just had no completion for 'typeahead'. Didn't bother to try other functions from bootstrap as I wasn't expecting to get completion for them ever. Found out they dropped exactly that in favor of twitter's typeahead.js. But thanks for the help @LazyOne....

How to achieve this desktop/mobile layout with Bootstrap 3?

css,twitter-bootstrap,twitter-bootstrap-3,responsive-design

This is very simple and you can do it using the grid system already within bootstrap. .blue { background: blue; } .green { background: green; } .red { background: red; } .row-500 { width: 500px; margin: 0 auto; } @media screen and (max-width: 500px) { .row-500 { width: 250px; }...

how to align column to the right?

angularjs,css3,twitter-bootstrap-3

You can add ' text-right to your <div class="col-md-6 form-group"> please see here http://plnkr.co/edit/rUAdxLJ6ExKZYFbkveuC?p=preview and if you want to have column for 50% of screen even on small devices change col-md-6 to col-xs-6 http://plnkr.co/edit/RxPx0zzT5YmodepQ3zIj?p=preview...

col-push and col-pull bootstrap - how does it work?

html,html5,twitter-bootstrap,twitter-bootstrap-3

The best way to develop with Bootstrap is to think "mobile first". So start with your mobile layout and add push/pull classes for other sizes. Note that I also added in col-xs-12 to your columns, it's technically not needed but it's nice to be explicit about these. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link...

My Bootstrap modal is not draggable?

html5,css3,twitter-bootstrap-3

The way you're calling it, draggable is a jQuery UI feature. So you need to include jQuery UI in your page: https://jqueryui.com/ There are also alternative bootstrap modal plugins that don't require jQuery UI, like https://nakupanda.github.io/bootstrap3-dialog/...

Prevent bootstrap 3 tab from stacking when window is resized (made smaller)

Your tabs breakdown after the width is within 767px, so you can use the below CSS hack. @media (max-width: 767px) { .nav-tabs.nav-justified > li { float: left; width: 50%; } } Bootply...

How to position bootstrap tooltip correctly next to a partially hidden image

css,twitter-bootstrap-3,overflow,twitter-bootstrap-tooltip

Thanks to @y34h for the idea, but I had to calculate the correct value of left property specifically by overriding the actual bootstrap js code. Here is the new Tooltip.getCalcultedOffset which is the function that calculates the absolute position of the tooltip: $.fn.tooltip.Constructor.prototype.getCalculatedOffset = function (placement, pos, actualWidth, actualHeight) {...

Vertical align text in bootstrap list-group

css,html5,twitter-bootstrap-3

I have modified your CSS code a bit CSS a.list-group-item { overflow: hidden; display: table; } a.list-group-item > div { display: table-cell; vertical-align: middle; float:none; } checkout above code. instead of a {} I have used a.list-group-item {} as default bootstrap .list-group-item {} class was overwriting display:table properties. ...

Bootstrap center image

Basics ? <div class="text-center"> <img alt="footer" src="./img/demo.png"/> </div> ...

background-image css does not show in img tag

twitter-bootstrap-3,modal-dialog

You need to set height to all of the parents, and you need background-size: cover (Demo) html, body { height: 100%; } .container { height: 100%; } .row, .col-sm-12 { height: 100%; } .myimg { background-image: url("//lorempixel.com/200/200"); background-size: cover; display: block; height:100%; width:100%; } .myimg2 { background-image: url("//lorempixel.com/200/200"); background-size: cover;...

Modal toggled in other modal - can't scroll modal

In this case, you shouldn't use data-toggle="modal" or data-dismiss="modal" (as there's no guarantee that the hiding and the showing will happen in the right order) and instead do the showing and hiding yourself. Example: <button type="button" id="modal-2-btn">open modal 2 »</button> $('#modal-2-btn').on('click', function () { $('#modal-trainertype').one('hidden.bs.modal', function () { $('#modal-food').modal('show'); }).modal('hide');...

Bootstrap collapse - opening multiple accordions at the same time

javascript,jquery,twitter-bootstrap,twitter-bootstrap-3

I've tidied up your code and changed to using the toggle method instead of having various flags. The problem is that you are sharing the active flag between them. Here is the improved code and Bootply: $(function () { $('.panel-title > a').click(function (e) { e.preventDefault(); }); $('.number1-collapse').on('click', function () {...

How to vertically align div inside Bootstrap 3 column

html,css,twitter-bootstrap,twitter-bootstrap-3,vertical-alignment

This is one way to do it, and is more crossbrowser supported than flexbox. http://jsfiddle.net/p9ou30g7/3/ .logoCont { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 50%; width: 50%; background: red; } There are other ways that you can check out here: https://css-tricks.com/centering-css-complete-guide/...

How can I add additional links to bootstrap when collapsed

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

You could duplicate the menu items into your navbar but make them hidden for bigger displays. If you add this to your navbar it will be hidden for the md and lg displays. <li class="hidden-md hidden-lg">About</li> If you want to hide your second menu container you created you could add...

Modal from inside Bootstrap Tabs using Knockout foreach

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...

Having Issue on Using Glyphicons Icons in Bootstrap 3 Navbar

jquery,twitter-bootstrap-3,asp.net-mvc-5

The icon is outside the anchor. You should simply include it inside and everything should be fine <li> <a href="#"> Link <span class="glyphicon glyphicon-log-in" id="logIcon"></span> </a> </li> ...

How to join two jquery methods into one statement?

You could do it like this: $("#modal").find("#modalBody").append("saved successfully").end().modal("show"); It's probably simple enough without combining them though....

Custom screen breakpoints boostrap 3

use the customize on bootstrap website to define your new breakpoints http://getbootstrap.com/customize/ or this: @media only screen and (max-width: 360px) { .xxs-hidden{ display: none;//this is your own customised hidden class maybe? } } If you want to create different pages and you don't want to use the media queries to...

Issue with text overflow for mobile and small screens

layout,twitter-bootstrap-3,navigation,asp.net-mvc-5.1

On every div you height and % (percentage). Take all those out and your site will be ok. I also noticed the carousel is very slow at loading the pictures. If you compress each to about 200k or less it will load faster and still keep the resolution ok. you...

MVC5/Bootstrap: adding to Nav doesn't push body content down

Apparently, bootstrap's "navbar-fixed-top" means it's CSS position:fixed keeps it at the top and above everything else. So, what is needed is padding-top in the body like this: @{ // Sub-Menu for About Sections if (HttpContext.Current.Request.RequestContext.RouteData.Values["controller"].ToString().Contains("About") || HttpContext.Current.Request.RequestContext.RouteData.Values["controller"].ToString().Contains("Executive") ||...

Display nested attributes together in view or index.html.erb

html,ruby-on-rails,ruby-on-rails-4,twitter-bootstrap-3,nested-attributes

You can try with includes if you have explicitly set has_many association in your Product model (assuming is is named product_images): app/controller/home_controller.rb: @products = Product.includes(:product_images) .where(product_images: { default_image: true ) .last(5) app/views/home/index.html.erb: <div class="col-md-3 col-sm-6 hero-feature"> <div class="thumbnail"> <% @products.each do |pd| %> <% pd.product_images.each do |i| %> <%= image_tag...

bootstrap input dropdown keyboard arrow

javascript,jquery,html,twitter-bootstrap,twitter-bootstrap-3

There is currently an ongoing debate about this, as logged in issue 15757. The adjustment was made in pull #15088 (Dropdown: Ignore keydown events coming from inputs and textareas). They don't state "why" it was necessary to go that route in the release, but after some digging I was able...

span is not inline with input using bootstrap 3

ruby-on-rails,ruby-on-rails-3,ruby-on-rails-4,twitter-bootstrap-3,rubygems

All what you need to do just change the span to label and have it above the div that holds inputs like so in the code below: <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> <form name="productForm" class="form-horizontal"> <div class="form-group"> <label for="number" class="col-sm-2 control-label">Number</label> <div class="col-sm-10"> <input...

Twitter Boostrap in Rails

I was able to work it out by moving my project into another directory, preferably into a different folder.

How to dynamically handle bootstrap rows in for loop? [duplicate]

for-loop,twitter-bootstrap-3,twig

How about something like this, simplifies it a bit at any rate: {% for task in taskList.taskList %} {% if loop.index % 4 == 0 %} <div class="row"> {% endif %} {% include 'dashboard/task.twig' %} // contains a div.md-3 {% if (loop.index % 4 == 0 or loop.last) %} </div>...

How to make Chart JS responsive?

twitter-bootstrap-3,responsive-design,chart.js

Chart.js has a property (responsive) that you can configure at the global or chart level via options that will make the chart responsive. See http://www.chartjs.org/docs/#getting-started-global-chart-configuration > responsive // Boolean - whether or not the chart should be responsive and resize when the browser does. responsive: true, true makes it responsive....

aligning component in a line

jquery,twitter-bootstrap,twitter-bootstrap-3

form-group and form-inline should do the trick here.: bootply <form class="form-inline"> <div class="form-group"> <div class="input-group"> <input type="text" class="form-control input-sm" placeholder="Search Ticket" /> <span class="input-group-btn"> <button class="btn btn-default btn-sm btn-default-gradient" type="button"> <i class="glyphicon glyphicon-search"></i> </button> </span> </div> </div> <button type="button" class="btn btn-default btn-sm...

How to get the clicked element in Bootstrap collapse event?

Since my case featured multiple anchors next to eachother (viz. disregarding regular Bootstrap structure), I ended up searching for the clicked anchor by using the collapsing div's ID: $('.collapse').on('show.bs.collapse', function (e) { // Get clicked element that initiated the collapse... clicked = $(document).find("[href='#" + $(e.target).attr('id') + "']") }); ...

Displaying text above Segmented buttons in bootstrap

jquery,twitter-bootstrap,twitter-bootstrap-3

You could add two <span> with the text inside, and make them to display above the radio buttons. http://jsfiddle.net/jL6x0apu/ .label-legacy, .label-actual { position: absolute; top: -25px; } Or to use pseudo content for the text. http://jsfiddle.net/tjrwf7zo/ .label-legacy:before, .label-actual:before { position: absolute; top: -25px; } .label-legacy:before { content: "Legacy"; } .label-actual:before...

How to bind event with all bootstrap accordian

ID of an element must be unique, the id selector will return only the first element with the given id so use class instead of id <div class="panel-group accordion"> then $('.accordion').on('show.bs.collapse', function(e){ var ulId = $(e.target).attr('id'); // some code like alert('hi'); }); ...

Image wont fit into div properly

javascript,html,css,image,twitter-bootstrap-3

Remove img-responsive, because it gives the style max-width: 100% to the element, meaning the image can never be wider than its parent. Add overflow: auto; to the container: .ibox-content { background-color: #ffffff; color: inherit; padding: 15px 20px 20px 20px; border-color: #e7eaec; border-image: none; border-style: solid solid none; border-width: 1px 0px;...

CSS ellipsis not working within Bootstrap 3 thumbnail header

html5,css3,twitter-bootstrap-3,ellipsis

You need to define the CSS directly on the elements themselve (in this case the <h3>). If you set this on the parent element, the overflow:hidden of the parent will not 'trigger' the ellipsis of the <h3> .thumbnailheader h3, .thumbnail p { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } here's...

Styling jQuery Validation with Select2 4.0 and Bootstrap 3+

jquery,css,twitter-bootstrap-3,jquery-validate,jquery-select2-4

I tried searching other SO's, but all of these use the 3.5.xx version of select2 There is no secret formula for various versions. Just brute force to figure it out for your situation. That means you need to inspect the rendered DOM so you know which elements to target...

how to make a loop and if statement that loops through a different groups of radio buttons (javascript)

html,loops,twitter-bootstrap-3,radio-button

Here, take a look at this demo boootply. Since you're using Bootstrap, jQuery should already be part of your page. Here's the relevent code: $(document).ready(function(){ $('#submitBtn').click(function(e){ e.preventDefault(); if($('li.option :radio:checked').length == $('li.option').length){ // enter code here to submit your form alert('submitted'); }else{ alert('Please answer all questions'); } }); }); And the...

Can we change width of container in css using Bootstrap3

twitter-bootstrap-3,width,containers

You surround your p tags in a <div class="container"> Then in your css file declare something like: .container { max-width: 70%; } I hope that this will help you :) But instead of 70% it is better to declare max-width precisely...like max-width: 1100px;...

Reordering with bootstrap 3

css,twitter-bootstrap,twitter-bootstrap-3

This is pretty straightforward, they key point is that we cannot reorder the columns in mobile mode. We should think of it as mobile first, then reorder the columns on larger screens using .col-*-push-#, .col-*-pull-# helper classes: .red { background: red; } .blue { background: blue; } .green { background:...

Open specific tab on another page with ASP.NET Webforms

asp.net,twitter-bootstrap,twitter-bootstrap-3,webforms

Here is the code used to get linking to tabs to work in asp.net webforms:  <script type="text/javascript"> $(function () { var loc = window.location.href; // returns the full URL if (/pipe/.test(loc)) { $('.pipe').addClass('active'); $('#pipe').addClass('active'); } else if (/manholes/.test(loc)) { $('.manholes').addClass('active'); $('#manholes').addClass('active'); }...

Input group addons altering the total width of an input group

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

The .input-group div should be part of its own element instead of lumped in with .col-xs-6. Remember, an .input-group div is taking the place of an input control. So use them interchangeably. Instead of this: <div class="col-sm-6 input-group"> <span class="input-group-addon">Every</span> <input type="number" class="form-control" /> </div> Do this: <div class="col-sm-6 ">...

How to make Bootstrap Carousel to start from the first slide on button click?

javascript,twitter-bootstrap,twitter-bootstrap-3,carousel

$('#yourButton').click(function() { $('.carousel').carousel(0); }); Bootstrap documentation : .carousel(number)...

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 can I make my icon stay in the center of my accordion header?

html5,twitter-bootstrap-3,semantic-markup

Add a negative top margin to your icon. .hide-details-sk-p .icon-sk-p-r { margin-top: -5px; } JSfiddle...

HTML5 Semantic Elements Nesting with Boostrap

The article element, just like any other HTML element, should only contain content that conforms to the element’s definition. Including navigation doesn’t seem to be appropriate, unless it’s the navigation for the article itself (like a table of contents or similar), in which case you should use the nav element....

Bootstrap modal-header Login change bottom line color