Bootstrap navbar vertical not horizontal
php,html,twitter-bootstrap-3,ssi
Remove this from index.css .navbar{ background-color:#039; width:120px; position:fixed; left: 0px; top: 0px; float:left; } that is what is messing it up!...
Bootstrap clear preceding columns when moving to the next line
css,twitter-bootstrap,twitter-bootstrap-3
Add a clearfix like this: <div class="row"> <div class="col-md-4"> </div> <div class="col-md-4"> // lot of content </div> <div class="col-md-4"> // little content </div> <div class="clearfix"></div> <div class="col-md-4"> // now goes to new line </div> </div> ...
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:...
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...
Content section overlap footer
html,css,twitter-bootstrap,css3,twitter-bootstrap-3
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...
Change border color navbar bootstrap 3
Yeah, you really should include some code. A typical bootstrap navbar gets the border from .navbar-default So try the css below: .navbar-default { border-color: transparent;} ...
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...
Each form control display on its own line and strech the entire screen
html,html5,forms,twitter-bootstrap,twitter-bootstrap-3
BaddieProgrammer, I have set up a Fiddle here to view two options and how they will look. Both do what you are wanting here to stretch the form across the screen. The green container has full width all bar the lg size. The blue container uses Bootstrap classes to give...
Prevent bootstrap 3 tab from stacking when window is resized (made smaller)
html5,css3,twitter-bootstrap-3
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...
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...
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...
Can't seem to get ng-model to work in this instance
javascript,angularjs,twitter-bootstrap,twitter-bootstrap-3
Not quite seeing enough detail here, but when your page loads and populates from a data source you typically need to set the properties on the model [scope] to initialize your page. In short what your are doing is a two way binding. So if you expect your page to...
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;...
Change Font Awesome Icon on Click, but return to original icon when next item is clicked
jquery,twitter-bootstrap-3,onclick,font-awesome,toggleclass
this is happening because of blur event. If you click outside of any accordion still blur event is called and changed the icons of relevant accordion. I have updated jsfiddle. So please check it:http://jsfiddle.net/t7jtnupu/2/...
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...
Having Issue on Using Glyphicons Icons in Bootstrap 3 Navbar
twitter-bootstrap,twitter-bootstrap-3
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> ...
Displaying text above Segmented buttons in bootstrap
html,css,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...
aligning component in a line
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...
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...
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....
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 () {...
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;...
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...
HTML5 Semantic Elements Nesting with Boostrap
html5,twitter-bootstrap-3,semantic-markup
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....
How to get the clicked element in Bootstrap collapse event?
jquery,twitter-bootstrap,twitter-bootstrap-3
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') + "']") }); ...
How can I add additional links to bootstrap when collapsed
twitter-bootstrap,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...
Redraw/Repaint Issue with show/hide in Chrome
jquery,css,google-chrome,twitter-bootstrap-3
Ok, your issue is primarily a css issue. You're using a jquery function which gives and inline css attribute to a selected element. Indeed, display:none which is assigned to an element via the .hide method will remove the height and width of an item. However, you're hiding a child element,...
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...
background-image css does not show in img tag
html,css,twitter-bootstrap,twitter-bootstrap-3
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;...
MVC5/Bootstrap: adding to Nav doesn't push body content down
layout,twitter-bootstrap-3,navigation,asp.net-mvc-5.1
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") ||...
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....
span is not inline with input using bootstrap 3
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...
How to change the caret icon in selectize.js?
css,twitter-bootstrap,css3,twitter-bootstrap-3,selectize.js
I have figured it out. I changed the following css classes inside (selectize.bootstrap3.css) file that render the icon: .selectize-control.single .selectize-input:after { content: '\e259'; /*This will draw the icon*/ font-family: "Glyphicons Halflings"; line-height: 2; display: block; position: absolute; top: -5px; right: 0; background-color: white; padding-right: 2px; } .selectize-control.single .selectize-input.dropdown-active:after { content:...
Making certain form fields inline with label
html,css,twitter-bootstrap,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...
Custom screen breakpoints boostrap 3
twitter-bootstrap,twitter-bootstrap-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...
How can I make my icon stay in the center of my accordion header?
Add a negative top margin to your icon. .hide-details-sk-p .icon-sk-p-r { margin-top: -5px; } JSfiddle...
Bootstrap text-danger with form-inline not aligned
css,twitter-bootstrap-3,jqbootstrapvalidation
With the various answers I got. I managed to get it working. Here is the final code. <form> <div class="row"> <div class="col-sm-6 text-center"> <div class="form-group form-group-lg"> <label class="sr-only" for="name">Full Name</label> <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Full name" name="name" required data-validation-required-message="Please enter your full name."> <div class="help-block text-danger"></div> </div> </div> <div...
Using Hotkeys to navigate tabs
jquery,twitter-bootstrap-3,hotkeys,jquery-hotkeys
function activaTab(tab){ $('.nav-tabs a[href="#' + tab + '"]').tab('show'); }; y(document).ready(function () { y(document).bind('keydown', 'shift+w', function () { activaTab('messages'); }) }); Could you please try this, I haven't tried yet, but code looks well!...
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%; } ...
bootstrap ScrollSpy not jump to div when click on dropdown menu item
javascript,jquery,twitter-bootstrap,twitter-bootstrap-3,scrollspy
The jump down the page is by virtue of the hash location on the page being updated. So normally what happens (as with Home and Details) is: You click a link The browser takes you wherever that link is. If it's the same page, it doesn't have to make another...
Facebook Like Box (Page plugin) not working
html,facebook,plugins,twitter-bootstrap-3,facebook-javascript-sdk
HI JACRAC I FOUND THE SOLUTION IT TAKE ME SOMETIMES TO TEST IT AND IT WORKS THIS IS THE CODE YOU MUST ADD IN YOUR BLOG : <div id="fbpage"> <div id="u_0_18"><div fb-iframe-plugin-query="app_id=114545895322903&container_width=588&height=350&hide_cover=false&href=https%3A%2F%2Fwww.facebook.com%2Fisccef&locale=fr_FR&sdk=joey&show_facepile=true&show_posts=false&width=280" fb-xfbml-state="rendered" class="fb-page fb_iframe_widget"...
Positioning elements Bootstrap 3
javascript,jquery,html,twitter-bootstrap,twitter-bootstrap-3
try removing the class col-md-2 from changePercent and change div's. here's the jsfiddle for this jsfiddle.net/8uwbwapp/1
How to make a jquery datatable use bootstrap table-responsive class?
twitter-bootstrap-3,responsive-design,jquery-datatables
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....
aligning controls vertically in bootstrap
Since I understand that you want to create a form with the label next to the field instead of on top of it (as is the default form behaviour of Bootstrap) you should be using the form-inline and form-group classes. This way Bootstrap will align the fields with the labels...
React Js conditionally applying class attributes
css,twitter-bootstrap-3,reactjs,class-attributes
The curly braces are inside the string, so it is being evaluated as string. They need to be outside, so this should work: <div className={"btn-group pull-right " + this.props.showBulkActions ? 'show' : 'hidden'}> Note the space after "pull-right". You don't want to accidentally provide the class "pull-rightshow" instead of "pull-right...
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...
Vertical align text in bootstrap list-group
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. ...
How can i have multiple Navbars in a page
twitter-bootstrap-3,bootstrap,navbar
You have to remove navbar-fixed-top from the second nav html would be like this <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="#">Project name</a> <div class="nav-collapse collapse"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul>...
PHP form refreshing [duplicate]
php,mysql,html5,twitter-bootstrap-3
You are checking to see if a POST variable by the name of submit is set, but you aren't setting it. There is nothing named submit in your form, only an unnamed submit button. You need to add name="submit" to your submit button. Change this: <button type="submit" class="btn btn-primary">Submit</button> With...
Modal toggled in other modal - can't scroll modal
twitter-bootstrap-3,modal-dialog
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');...
How to make a 100% height container in Bootstrap 3
Browser support: IE9+/modern browsers. JSFiddle - http://jsfiddle.net/z1ts4rro/ html { position: relative; min-height: 100%; } body { background: lightgoldenrodyellow; margin: 50px 0; } header, footer { background: lightseagreen; width: 100%; height: 50px; } header { position: fixed; left: 0; top: 0; } footer { position: absolute; left: 0; bottom: 0; }...
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...
Inconsistent display on IE & Firefox
html,css,internet-explorer,firefox,twitter-bootstrap-3
Adding clearfix divs as explained here helped to resolve the display issues. Fix applicable in my scenario was adding <div class="clearfix"></div> after the four items of the first row...
Loading bootstrap3 menu items from json response
You need to write you js code in ready event like this $(document).ready( function(){ $('#get-info-list').on('click', function(event) { event.preventDefault(); alert('hiiiiiii'); $.getJSON('getNotification', function(data) { console.log(data); $("#infolist").append(data); }); }); }); Reference http://jsfiddle.net/b0ws91e2/4/ Explanation: The reason is that your code is being executed when javascript files and code is being loaded but you web...
Check if Bootstrap Modal currently Show
javascript,jquery,twitter-bootstrap,twitter-bootstrap-3,bootstrap-modal
It's probably easier to leave the listeners attached and then conditionally exit them if the modal is open. You could setup something like this: var modalIsOpen = false $('#myModal').on('shown.bs.modal', function(e) { modalIsOpen = true;}) $('#myModal').on('hidden.bs.modal', function(e) { modalIsOpen = false;}) Then just copy and paste the following line into all...
Ordering content with in columns in Bootstrap Grid
The thing is that .col-md-x set x columns for devices >= 940px, when the width is below that, the grill will show vertically, so the second col-md-6 (part-two) goes underneath of the first one(part-one) whit all its content, then having said that. You can use: <div class="row"> <div class="col-md-6"> <p>PARAGRAPH...
How to bind event with all bootstrap accordian
jquery,twitter-bootstrap,twitter-bootstrap-3
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'); }); ...
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/...
Is it possible & feasible to integrate new UI HTML design templates created using Bootstrap into a website developed in PHPFox? If yes how? If no why?
php,twitter-bootstrap,templates,twitter-bootstrap-3,phpfox
You can customize PHPFox theme as list here in their documentation. I don't think that I have to repeat all these information here. Starting from editing HTML, CSS, JS are mentioned in the documentation link I have provided. Also don't forget to refer following links. Link1, Installing/Upgrading a Theme, Create...
how to change div class with angular checkbox
html,css,angularjs,twitter-bootstrap-3
Use ng-class and ng-hide. Ng-hide will hide an element based on the value of check in your model. Ng-class will conditionally set a class based on a the value of check in your model. For example: <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app> <div > <input type="checkbox" ng-true-value="A" ng-false-value="B" ng-model="check"/> </div> <div class="col-md-6"...
padding between col-md2 elements
html,twitter-bootstrap,twitter-bootstrap-3
You need to change the .col-md-2 padding values. In the following HTML I added the .little-padding class to use and make the different padding. <div class="container"> <div class="row little-padding"> <div class="col-md-2"> <input mytr="first_name" mytrid="" name="first_name[]" id="first_name" class="form-control" placeholder="First name" type="text"> </div> <div class="col-md-2"> <input mytr="middle_name" mytrid="" name="middle_name[]" id="middle_name" class="form-control" placeholder="Middle...
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: <!--Update this to reflect tabs on this page--> <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'); }...
How to get rid of col-md-* padding when nested in another row, without affecting the entire grid?
html,css,twitter-bootstrap-3,haml
Give something like this: .col-md-6 .panel.panel-default.panel-dashboard .row.no-margin-cols .col-md-6 .panel-heading Title 3 .panel-body Content 3 .panel_bottom Link 3 .col-md-6 .panel-heading Title 4 .panel-body Content 4 .panel-bottom Link 4 And SCSS as: .no-margin-cols { *[class*="col-md-"] { margin: 0; padding: 0; } } Does this work for you? Pen: http://codepen.io/anon/pen/WvpQeN...
Using AngularJS to display form validation errors
javascript,angularjs,twitter-bootstrap,twitter-bootstrap-3
You should refer https://scotch.io/tutorials/angularjs-form-validation which has detailed explanation and an example. Also this doc is must a read!! If you want to make border color for a compulsory field then refer this. You could use ng-invalid class for ng-required fields...
Put form fields two per line in bootstrap form
html,forms,twitter-bootstrap-3
You have to include the rows in a div. <div class="rows">. <div class="col-md-10"> <div class="form-group"> <legend>1st sth</legend> <div class="row"> <div class="col-md-2"> <select class="form-control" id="select"> <option value="1">1</option> <option value="1">1</option> <option value="1">1</option> </select> </div> <div class="col-md-3"> <input type="text" class="form-control" id="inputName" placeholder="name"> </div>...
Bootstrap Hovering
javascript,twitter-bootstrap-3
Possible without javascript: http://jsfiddle.net/ap8vT/284/ .wrapper:hover .default { opacity: .5; } .wrapper .default:hover { opacity: 1; } You can define those styles whatever you want....
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 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; }...
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:...
Create two HTML Forms next to each other
html5,forms,twitter-bootstrap-3
Something like this would do it: (The borders are just so you can see the effect.) div { border: 1px solid red; } #left { float: left; width: 64%; } #right { float: right; width: 35%; } <div id="left">Left Stuff</div> <div id="right">Right Stuff</div> ...
Bootstrap center image
Basics ? <div class="text-center"> <img alt="footer" src="./img/demo.png"/> </div> ...
Rails 4 retrieve nested attributes for display in an index.html.erb
image,ruby-on-rails-4,twitter-bootstrap-3,nested-attributes,home
You can try this: app/controller/home_controller.rb class HomeController < ApplicationController def index @products = Product.last(5) @product_ids = @products.collect(:id) @product_images = ProductImage.where(:id => @product_ids).last(5) end end app/views/home/index.html.erb <% @products.each do |pd| %> <div><%= pd.product_name %> <% end %> <% @product_images.each do |pd| %> <%= image_tag (pd.product_image(:medium)) %> <% end %> ...
Random opening tabs/pills - bootstrap 3
javascript,css,wordpress,twitter-bootstrap-3
use this code : var items = $('[data-toggle=pill]'); var i = parseInt(Math.floor(Math.random()*items.length)); $('#tabs a:eq(' + i + ') ').tab('show'); ...
Jquery-ui Autocomplete and Bootstrap 3 fixed navbar
twitter-bootstrap,jquery-ui,twitter-bootstrap-3,jquery-ui-autocomplete
Set the z-index of .ui-autocomplete to 2000 JSFiddle...
How to center image in carousel
jquery,css,twitter-bootstrap,twitter-bootstrap-3,carousel
You've got two options If you want the image to take up entire carousel then img { width: 100%; height: auto; } If you dont want the image to stretch 100 %, then set your desired width(or dont, just specify margin) and margin auto: img { width: 50%; margin: auto;...
Bootstrap modal-header Login change bottom line color
twitter-bootstrap,twitter-bootstrap-3
ninjaxelite, both classes modal-footer and modal-header use border-top: 1px solid #e5e5e5; for the footer and border-bottom: 1px solid #e5e5e5; for the header. You could override these by adding the two classes below the Bootstrap css. Both the header and footer are full width. and therefore wider than your inner content....
how fix this collapsable bootstrap sidebar menu?
You are not closing the first "ul" before starting the second one, so bootstrap thinks you have one big unordered list. here is a link to the fix and here: <div class="container body-content"> <div class="row row-offcanvas row-offcanvas-left"> <!-- sidebar --> <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation"> <ul class="nav"> <li> <a...
Issue with text overflow for mobile and small screens
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...
Twitter Boostrap in Rails
ruby-on-rails,ruby-on-rails-3,ruby-on-rails-4,twitter-bootstrap-3,rubygems
I was able to work it out by moving my project into another directory, preferably into a different folder.
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...
How to escape html inside a html tooltip [duplicate]
javascript,html,twitter-bootstrap-3
This should do it. var el = $('[rel="tooltip"]'); var escaped = $('<div/>').text(el.attr('data-title')).html(); el.attr('data-title', escaped); el.tooltip(); EDIT: I misunderstood what you were trying to do. To escape just what's inside the <code> tag, do this: var el = $('[rel="tooltip"]'); var title = el.attr('data-title'); var code = /<code>(.*?)<\/code>/.exec(title)[1]; var escaped = $('<div/>').text(code).html();...
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 ">...
List of conflicts between bootstrap and jquery-ui?
Mostly between ui.button and ui.tooltip plugins. This is easily remedied though with scripts included like so: <script src="js/jquery-1.11.1.js"></script> <script src="js/jquery-ui.js"></script> <script> // handle jQuery plugin naming conflict between jQuery UI and Bootstrap $.widget.bridge('uibutton', $.ui.button); $.widget.bridge('uitooltip', $.ui.tooltip); </script> <script src="js/bootstrap.js"></script> But I don't include any of the jQuery UI CSS, so...
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...
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>...
Bootstrap text input height
html5,css3,twitter-bootstrap-3
You can use css height attribute both as inline css : <input style="height:50px"/> or class <input class="inputfield"/> and .inputfield{ height:50px }...
Bootstrap Justified Nav Bar not collaspsing correctly
Hi you can do something like this to prevent wrapping .nav > li > a { white-space: nowrap; } This will prevent to break words...
My Bootstrap modal is not draggable?
twitter-bootstrap,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/...
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...
How to join two jquery methods into one statement?
jquery,twitter-bootstrap-3,asp.net-mvc-5
You could do it like this: $("#modal").find("#modalBody").append("saved successfully").end().modal("show"); It's probably simple enough without combining them though....
Click executes the function only once
php,jquery,html,twitter-bootstrap-3
I have got the problem solved. The problem was in my alert box. I have used dismissible alert box with a close button. When I get the error for first time I was just closing my alert box which is preventing from getting the alert again when I do it...
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)...
Align column vertically with bootstrap
html,css,twitter-bootstrap,twitter-bootstrap-3,bootstrap
Add a margin to your third column because you have a fixed height. This solution will work. .vertical-align { margin-top: 1.5em; } ...