FAQ Database Discussion Community


Displaying text above Segmented buttons in bootstrap

html,css,twitter-bootstrap,twitter-bootstrap-3
I am trying to display text on top of Segmented buttons in bootstrap but, it is not working. The segmented buttons and the linked text box are wrapped using a form-group. Fiddler: https://jsfiddle.net/99x50s2s/55/ <div class="col-md-3"> <div class="form-group"> <label class="control-label normal-text">Code<i class='asterisk'>*</i></label> <label class="control-label normal-text">Legacy</label> <label class="control-label normal-text">Actual</label> <div class="input-group">...

Facebook Like Box (Page plugin) not working

html,facebook,plugins,twitter-bootstrap-3,facebook-javascript-sdk
I've tried adding a facebook plugin to my page but it doesn't appear correctly. What i've done so far was going to the Facebook Developpers for the new Page Plugin, included correctly (i hope) the SDK, included the script and pasted the html code the generator gave me. But my...

Block rearrangment at narrow screen size

twitter-bootstrap-3,movement,htmlelements
friends How make it possible (may be with the Bootstrap 3) to make html elements to move at narrow screen like it shown at the linked image? ...

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
I've a social website like 'Facebook' which is developed entirely in PHPFox version 3.0.7(a social networking platform created in php). The website looks similar to 'Facebook' and most of it's functionalities resembles the functionalities of 'Facebook'. Now to make the site looking better I want to integrate new HTML template...

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

layout,twitter-bootstrap-3,navigation,asp.net-mvc-5.1
I am working in VS2013 U4 with an MVC/bootstrap website and when I add to the nav/menu, it's not pushing everything down, the top of the body is getting cut off. I have two sub-menus that show depending on what controller(s) the user's hitting. When they show up, it cuts...

Open specific tab on another page with ASP.NET Webforms

asp.net,twitter-bootstrap,twitter-bootstrap-3,webforms
I have a webforms website and I am using Bootstrap. I have a few links in my footer that will link to various tabs on different pages. My problem is that no matter what tab I specify the link to open, they only load the page with the default tab....

Rails 4 retrieve nested attributes for display in an index.html.erb

image,ruby-on-rails-4,twitter-bootstrap-3,nested-attributes,home
Just looking to find out how to retirve nested images for display on my front page. I have no problems with a standard model but have been unable to find how to bring has_many nested attribute through. All my nested Forms work fine just have neglected the front end. eg....

Each form control display on its own line and strech the entire screen

html,html5,forms,twitter-bootstrap,twitter-bootstrap-3
My form looks great with Twitter Bootstrap 3 but I don't want it to look like this: And more like this: I was able to make my button group on another page do this with btn-group-vertical btn-group-lg btn-block class. But I didn't yet find anything that does the same with...

How to escape html inside a html tooltip [duplicate]

javascript,html,twitter-bootstrap-3
This question already has an answer here: Can I use complex HTML with Twitter Bootstrap's Tooltip? 4 answers I'm trying to print a tooltip with HTML, but I need to espace some of these html. I tried something but without success. Here is my example: http://jsfiddle.net/wrsantos/q3o1e4ut/1/ In this example...

Ordering content with in columns in Bootstrap Grid

css,twitter-bootstrap-3,order
I have a simple bootstrap grid set for two columns ( content left and right ) that break down everything to one column in mobile and tablet. <div class="row"> <div class="col-md-6">Left Column</div> <div class="col-md-6">Right Column</div> </div> The problem is I'm trying to order stuff INSIDE each column after both columns...

padding between col-md2 elements

html,twitter-bootstrap,twitter-bootstrap-3
My goal is to show 6 columns in one row. Here's part of how I get them done (shown only first 3). I have this code: <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 name" type="text"> </div>...

How to vertically align div inside Bootstrap 3 column

html,css,twitter-bootstrap,twitter-bootstrap-3,vertical-alignment
I have a page with Twitter Bootstrap container-fluid class div, one row and one col-md-6 inside that row. Row is set to 50% height of the container, and a column has 100% height of the row. I have a div inside that column, that I want to be in the...

Input group addons altering the total width of an input group

html,css,twitter-bootstrap,twitter-bootstrap-3,control
I've noticed that when using control group addons with Bootstrap that the total width of the control group is larger than those controls that do not have addons. This width change does not seem to be affected by the number of addons used. <link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" /> <div class="container-fluid"> <form...

how to change div class with angular checkbox

html,css,angularjs,twitter-bootstrap-3
I cant seem to figure out how to change the class with a checkbox value. I can show/hide a class but I need a col-md-6 to change to a col-md-12. I have a map and a chart on the same row. I would like to be able to hide the...

Modal from inside Bootstrap Tabs using Knockout foreach

jquery,twitter-bootstrap,knockout.js,twitter-bootstrap-3
I have Bootstrap tabs bound to a KnockoutJS observable array using a foreach binding, which is working fine. I now want to launch a Bootstrap modal from inside the active tab. <div class="tab-content"> <!-- ko foreach: trueData --> <div class="tab-pane fade in" data-bind="css:{active: $index() == 0}, attr :{'id': 'tab' +...

Making certain form fields inline with label

html,css,twitter-bootstrap,twitter-bootstrap-3
By default all of my input fields are 100% in width. For one of my form fields I need the label to be inline with the input field. The rest of them can all be stacked. I tried the following but it is still pushing the input field down below...

HTML5 Semantic Elements Nesting with Boostrap

html5,twitter-bootstrap-3,semantic-markup
I have an article template in which I want the title to run the full width of the page (12 cols), and then the text itself to fall in below with an adjacent sidebar (8 and 4 cols respectively). The problem is that I can't get the sidebar to nest...

Positioning elements Bootstrap 3

javascript,jquery,html,twitter-bootstrap,twitter-bootstrap-3
In the codepen below, I'm trying to make it look like the attached image at all sizes. Two things are not working correctly - in the first line with numbers, the green numbers are the day's price change and change percent (the only green text on the page). At the...

How to join two jquery methods into one statement?

jquery,twitter-bootstrap-3,asp.net-mvc-5
I am using jquery to display bootstrap modal and want to add custom message at runtime. Here is what I am doing? but wondering if there is a way to merge two lines into one:- $("#modalBody").append("saved successfully"); $("#modal").modal("show"); Bootstrap Modal:- <div id="modal" class="modal fade" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div...

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

css,twitter-bootstrap-3,overflow,twitter-bootstrap-tooltip
I have the folowing page using bootstrap tooltip that I can't position correctly The page has the following characteristics: #outer-container is my page. It has fixed width. There are many .inner-container. They have fixed width and overflow-x: auto. .inner-containers are dynamically generated. (Not sure if it's relevant, so the following...

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

twitter-bootstrap-3,responsive-design,jquery-datatables
I have jquery datatable, and I know there is a "responsive" plugin to it, but I dont like the behavior as much as the bootstrap table-responsive class. I should be able to just wrap my jquery datatable in a div with this class, but that doesn't seem to work for...

Modal toggled in other modal - can't scroll modal

twitter-bootstrap-3,modal-dialog
I created a modal and inside the modal I created a button to open the second modal and close the first but the problem is that the scrollbar doesn't work for the second modal but works for page. How could I fix this? code in fiddle: link to fiddle...

How to bind event with all bootstrap accordian

jquery,twitter-bootstrap,twitter-bootstrap-3
I have multiple accordian in my page. Now I want to bind some event on expand of each accordian. But the event is getting binded with the first accordian only. HTML is: The following accordian is generated multiple times by a loop. <div id="accordion" class="panel-group"> <div class="panel panel-default"> <div class="panel-heading">...

How to change the caret icon in selectize.js?

css,twitter-bootstrap,css3,twitter-bootstrap-3,selectize.js
I want to change the caret icon in selectize.js to be like bootstrap's (glyphicon-menu) as shown in the image below: I am using (selectize.bootstrap3.css) and tried to play with this css file but no luck....

Content section overlap footer

html,css,twitter-bootstrap,css3,twitter-bootstrap-3
I have a a page as following that works fine in big screens but in small screens the mainsection overlap the footer. How can I have the footer always at the bottom of the page. Also in small screens the location of the footer should be based on content of...

bootstrap ScrollSpy not jump to div when click on dropdown menu item

javascript,jquery,twitter-bootstrap,twitter-bootstrap-3,scrollspy
Dropdown menu click ScrollSpy doesn't working Demo: http://codepen.io/anon/pen/vOyZGq $(document).ready(function(){ $('#details-dropdown li a').click(function(e){ console.log(e); $("#details-menu li").removeClass("active"); $('#details - menu li a[href="' + $(this).attr('href') + '"]').parent().addClass('active'); }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>...

How to get rid of col-md-* padding when nested in another row, without affecting the entire grid?

html,css,twitter-bootstrap-3,haml
I got to modify a page written using HAML+SASS+BOOTSTRAP. The HAML file looks like this: .row .col-md-6 .panel.panel-default.panel-dashboard .row .col-md-6 .panel-heading Title 1 .panel-body Content 1 .panel-bottom Link 1 .col-md-6 .panel-heading Title 2 .panel-body Content 2 .panel-bottom Link 2 .col-md-6 .panel.panel-default.panel-dashboard .row .col-md-6 .panel-heading Title 3 .panel-body Content 3 .panel_bottom...

how fix this collapsable bootstrap sidebar menu?

css,twitter-bootstrap-3
this code below works fine if I have 1 collapsable sidemenu item, but when I add another the upper item doesn't work right. It's all badly highlighted. The bottom one works still fine. What's wrong here thanks. Here is bootply: http://www.bootply.com/IABXgPMp5S <div class="container body-content"> <div class="row row-offcanvas row-offcanvas-left"> <!-- sidebar...

CSS ellipsis not working within Bootstrap 3 thumbnail header

html5,css3,twitter-bootstrap-3,ellipsis
I can't figure out how to make css:ellipsis work inside Bootstrap 3 thumbnail headers. It's working flawlessly within the body text, but no luck so far with the header. I'm using last version of Chrome. jsfiddle link html <div class="col-sm-4 col-md-3 col-lg-2 thumbnailcontainer"> <div class="thumbnail"> <img src="http://animalia-life.com/data_images/bird/bird1.jpg" alt="image"> <div class="caption">...

Bootstrap Justified Nav Bar not collaspsing correctly

css,twitter-bootstrap-3
Building a site using bootstrap. The main navigation bar is set as justified (nav-justified) - When it gets to medium, some of the text on the menu is wrapped below and not sure to why this is happening. Any ideas? Thanks!...

How to make Chart JS responsive?

twitter-bootstrap-3,responsive-design,chart.js
I am using Chart.js with Twitter Bootstrap template. The Charts are not sized correctly if I don't mention a height and width for Canvas. But if I specify width and height then the charts are not responsive. How can I solve this issue?

Click executes the function only once

php,jquery,html,twitter-bootstrap-3
I have a form with a button whose id is calbtn. The form has two input fields whose ids are input1 and input2. I want to check if the inputs are empty after I click callbtn. If the inputs are empty, then display the alert box (whose id is failurebox)...

My Bootstrap modal is not draggable?

twitter-bootstrap,twitter-bootstrap-3
Can you help me why my modal window is not draggable. I'm using Bootstrap 3.0.3. Error I'm getting is: draggable is not a function Modal is called with next link: <a href="#" class="btn btn-info btn-xs" role="button" data-toggle="modal" data-target="#modalContract" id="showModalContract"><span class="glyphicon glyphicon-search"></span>Search</a> Modal window is created with next code: <div class="modal...

Removing gap between navbar options

css,html5,twitter-bootstrap,twitter-bootstrap-3,bootstrap
I have a navbar menu for my website and I am trying to figure out how to remove the gap between each of the navbar links. As far as I can tell the li attributes with the class dropdown are a few pixels wider then the rest of the link....

background-image css does not show in img tag

html,css,twitter-bootstrap,twitter-bootstrap-3
The responsive image in my bootstrap html does not show: <div class="container-fluid"> <div class="row"> <div class="col-sm-12"> <img class="myimg img-responsive"/> </div> </div> </div> css .myimg { background-image: url("http://images.wikia.com/worldlanguages/images/6/63/Wikipedia-logo.png"); display:block; height:100%; width:100%; } jsfiddle demo <img src="..."> will work, but I need to define the image in css. This similar thread suggests...

Change border color navbar bootstrap 3

twitter-bootstrap-3,navbar
I want to remove this line see below image. I think it's border color but i did try to change color of border but still issue exist. See this Link for customization of bootstrap navbar...

Put form fields two per line in bootstrap form

html,forms,twitter-bootstrap-3
I am using Twitter Bootstrap (version 3) and in the form, I am trying to put these fields two per line, but i cant figure it out how to do it.. Here you can see it in bootply what i have done.. <div class="col-md-10"> <div class="form-group"> <legend>1st sth</legend> <div class="col-md-2">...

Bootstrap clear preceding columns when moving to the next line

css,twitter-bootstrap,twitter-bootstrap-3
I'm using Bootstrap to organize items in rows of three. When the columns are not the same height however, items that move to the next line end up below previous item, instead of on the left. <div class="row"> <div class="col-md-4"> </div> <div class="col-md-4"> // lot of content </div> <div class="col-md-4">...

Styling jQuery Validation with Select2 4.0 and Bootstrap 3+

jquery,css,twitter-bootstrap-3,jquery-validate,jquery-select2-4
I have a project that uses Bootstrap 3.3.4, Select2 4.0, and Jquery Validation 1.13.1 I have set the jquery validator defaults to style bootstrap 3 classes like so $.validator.setDefaults({ errorElement: "span", errorClass: "help-block", highlight: function (element, errorClass, validClass) { $(element).addClass(errorClass); $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); }, unhighlight: function (element, errorClass, validClass) { $(element).removeClass(errorClass);...

Show navbar-nav horizontally in mobile screen

html,css,twitter-bootstrap,twitter-bootstrap-3,angular-ui-bootstrap
The code below shows horizontally in normal desktop view. However, on mobile screen, it shows vertically. <ul class="nav navbar-nav"> <li>Link 1</li> <li>Link 2</li> </ul> Web View: Link 1 Link 2 Mobile View: Link 1 Link 2 I want to show the Mobile view horizontally. Trying to find the right css...

Bootstrap Form inline only works full screen not scaled

html,css,twitter-bootstrap,twitter-bootstrap-3
Not sure why this is happening but when I have the page in full screen the form-inline works great. But as soon as I start scaling it down the label goes on top of the form. Using bootstrap 3 <row> <form class="form-inline"> <div class="col-xs-4 col-sm-3 col-lg-3 form-group"> <label>Start:<input type="text" class="form-control"...

React Js conditionally applying class attributes

css,twitter-bootstrap-3,reactjs,class-attributes
I want to conditionally show and hide this button group depending on what is passed in from the parent component which looks like this: <TopicNav showBulkActions={this.__hasMultipleSelected} /> .... __hasMultipleSelected: function() { return false; //return true or false depending on data } .... var TopicNav = React.createClass({ render: function() { return...

Disable active link styling for Bootstrap 3 one-page site

html5,css3,twitter-bootstrap-3
I'm developing a new HTML5/CSS3/Bootstrap3 one-page theme, the problem is that I couldn't remove the active link styling (gray background) that Bootstrap adds when I click a link. It's handy for normal multi-page sites but here the page won't change. So the gray bg will remain until I click anywhere...

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

html,css,twitter-bootstrap,twitter-bootstrap-3,carousel
Bootstrap 3 carousel should use fixed-height images during animation. Carousel is created using code from bootstrap tutorial <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <div class="carousel-inner" role="listbox"> <div class="item active"> <a href="124"> <img class="carousel-img" src="124" /> </a> </div> <div class="item "> <a href="123"> <img class="carousel-img" src="123" /> </a> </div> </div> </div> Image...

how to align column to the right?

angularjs,css3,twitter-bootstrap-3
I am getting my head around twitter bootstrap 3 and specifically the column setup. I got a 2 columns on the same line: <!--datetime row--> <div> <div class="col-md-6 form-group"> <label for="">Title:</label> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li...

Create two HTML Forms next to each other

html5,forms,twitter-bootstrap-3
I am new to HTML. I am wondering if you could have two forms setting next to each other in parallel in HTML. I have generated this sample GUI with Tkinter and I want to generate a HTML file for the GUi with Bootstrap style. ...

Image wont fit into div properly

javascript,html,css,image,twitter-bootstrap-3
so what I'm trying to accomplish is to have a large image, in this case a map, inside a smaller div with scroll bars that let you look at the rest of the map. I'm using class="img-responsive" at the moment but it makes the image the same size as the...

Issue with text overflow for mobile and small screens

html,css,twitter-bootstrap-3
I'm trying to optimise my website for mobiles and small screens. The website looks perfect on anything 1920x1080 and above, but on a mobile, things get really crazy. I'm using bootstrap and I can't figure out what's wrong with my code that is preventing the mobile scaling from working. The...

bootstrap input dropdown keyboard arrow

javascript,jquery,html,twitter-bootstrap,twitter-bootstrap-3
I was working with combobox ( input + dropdown ) built around Bootstrap on an accessibility project. I ran into a change that was made to the dropdown.js part of bootstrap between v3.3.0 and v3.3.1 which breaks my code. When focus is the input, the up or down keyboard arrow...

Bootstrap 3 collapsed menu not working on mobile screens

jquery,css,twitter-bootstrap,twitter-bootstrap-3
It seems a lot of people are having this trouble (https://github.com/twbs/bootstrap/issues/7968), but the solution that worked for some is not working for me. If you try to open my website at http://axxon.co and resize the window until the burger menu appears, you'll notice that nothing happens if you click on...

PHP form refreshing [duplicate]

php,mysql,html5,twitter-bootstrap-3
This question already has an answer here: How to fix “Headers already sent” error in PHP 12 answers Ok this is the code! I'm developing on phpstorm the problem is that everytime I hit submit the page refreshes but doesnt redirect or execute the echo with the variables! Can...

How to get the clicked element in Bootstrap collapse event?

jquery,twitter-bootstrap,twitter-bootstrap-3
I am having trouble to find the clicked anchor element in the collapse event using Bootstrap 3.3.4.: $('.collapse').on('show.bs.collapse', function (e) { // Get clicked element that initiated the collapse... }); I need this because I'd like to prevent collapsing if the clicked element has a certain data attribute. Another option...

Using Hotkeys to navigate tabs

jquery,twitter-bootstrap-3,hotkeys,jquery-hotkeys
How can I navigate between different tabs using shortcut keys implemented using hotkey from the following : https://github.com/jeresig/jquery.hotkeys . <div class="box-content"> <ul class="nav nav-tabs" id="myTab"> <li class="active"><a href="#info">Info</a></li> <li><a href="#custom">Custom</a></li> <li><a href="#messages">Messages</a></li> </ul> <div id="myTabContent" class="tab-content"> <div class="tab-pane active" id="info">...

Text going out of the container div

css,twitter-bootstrap,twitter-bootstrap-3,bootstrap
the css code: #overlay { background: rgba(0,0,0,0.8); position: absolute; z-index:100; width: 100%; color:#fff; height: 100%; } the html code: <div class="container" style="border:1px solid #000;"> <div class="row"> <div class="col-md-12"> <div id="overlay">Overlay</div> Here goes the brief introduction of the company which has branded it's logo religious in almost its entire brand and...

Bootstrap switch between class when in tablet or phone viewport

css,twitter-bootstrap,twitter-bootstrap-3
I have this div: <div class="col-lg-6 col-md-6 col-sm-6"> <p class="btn-toolbar pull-right">Some Content</p> </div> I want to know if its possible when the page is in tablet mode (e.g. col-md-6) I want to change the paragraph class instead of pull-right I want to set to pull-left. Is it possible? Thanks, Laziale...

Reordering with bootstrap 3

css,twitter-bootstrap,twitter-bootstrap-3
Can someone help me with the html to reorder columns below using bootstrap 3: ----- ----- ----- | 1 | 2 | 3 | ----- ----- ----- To this: ----- | 2 | ----- | 1 | ----- | 3 | ----- I know this has something to do with...

Random opening tabs/pills - bootstrap 3

javascript,css,wordpress,twitter-bootstrap-3
i want to open on every new site load another random tab with content. i think i have to do it with some java script but it don´t work. You can look at the page here: LINK Thanks for helping....

How can I make my icon stay in the center of my accordion header?

html,css,twitter-bootstrap-3
I have an accordion. At the right of my accordion, I have an icon, and I want to set that icon to stay in the center of my panel-header. As you can see right now, it's kind of too close to the bottom. I've tried using padding, and margin,...

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

javascript,twitter-bootstrap,twitter-bootstrap-3,carousel
I am using a Bootstrap Carousel in my website and want to achieve this: The carousel should reset and start from the first slide on button click. Is it possible?

Bootstrap navbar vertical not horizontal

php,html,twitter-bootstrap-3,ssi
I am making a mobile responsive site with Bootstrap 3.3.4. I will be making it with server side includes when I can get the web.config file written up since I am using an IIS server. This is what the nav bar looks like with just the bar. This is what...

Custom screen breakpoints boostrap 3

twitter-bootstrap,twitter-bootstrap-3
I recently noticed that a website I am designing starts to look incredibly bad when you get below 360px. I was able to make css changes to the site when it gets below 360px using a media query. However, I was wondering if there was a way to make custom...

Can't seem to get ng-model to work in this instance

javascript,angularjs,twitter-bootstrap,twitter-bootstrap-3
<div class="col-lg-3"> <input type="text" id="hourHours" ng-model="hourHours" class="form-control" style="width: 60px" placeholder="hh" /> </div> <button type="button" class="btn" ng-click="addSubscriptionModel()">submit</button> Here's my simple html code with my ng-model. If I type in 5 into the input, the angular code should console.log out 5 but it's still undefined... var SomeController = function ($scope, $modalInstance) {...

Material Design: Bootstrap 3 Responsive Navbar

css,twitter-bootstrap,user-interface,twitter-bootstrap-3,material-design
Current code: http://www.bootply.com/NuuxNSnmrf I have a few issues I am struggling with in this revision: hamburger icon is not on the left side upon collapse vertical gap between left and right side text brand is not centered My goal: Suggestions appreciated!...

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

for-loop,twitter-bootstrap-3,twig
This question already has an answer here: How to handle twig view and bootstrap 3 rows/columns? 1 answer I loop through an array of tasks I want to show. Each element has bootstrap class col-md-3. The current behavior is to dump all them on one row. <div class="row"> {%...

Bootstrap collapse - opening multiple accordions at the same time

javascript,jquery,twitter-bootstrap,twitter-bootstrap-3
I've got to a point where my accordions open up at the same time - see http://www.bootply.com/Go4t29rYyF When you click on "tab1" all the "tab1s" open, when you click on "tab2" all the "tab2s" open - great! But I cant open "tab1s & tab2s" at the same time, it only...

Can we change width of container in css using Bootstrap3

twitter-bootstrap-3,width,containers
how can i change width of container in bootstrap3. I want content in center of browser (70% of browser's width). <p> Use Bootply to design, prototype, or test the Bootstrap framework. Find examples, share code and rapidly build interfaces for Bootstrap. Use Bootply to design, prototype, or test the Bootstrap...

How can I add additional links to bootstrap when collapsed

twitter-bootstrap,twitter-bootstrap-3
For the website I am working on I have two sets of links. The first is in a navbar at the top of the screen and consists of my account and login. Then I have a second nav a little ways down on the page and I was wondering if...

Enabling code completion for bootstrap.js in PhpStorm

twitter-bootstrap,twitter-bootstrap-3,phpstorm
For some reason I get no code completion for the bootstrap.js. I added the non minified version from https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.js as well as adding the library manually in the javascript library settings. Same thing happened for me with knockout until I found out I have to use the knockout-debug version since...

Having Issue on Using Glyphicons Icons in Bootstrap 3 Navbar

twitter-bootstrap,twitter-bootstrap-3
Can you please take a look at this demo and let me know why the Glyphicons icons not centering (vertically) in the navbar? <nav class="navbar navbar-default" role="navigation"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-slide-dropdown"> <span class="sr-only">Toggle...

Bootstrap text input height

html5,css3,twitter-bootstrap-3
I am trying to increase the text input height inside a form on a site I am programming. I try to override the default bootstrap css of 20px height but nothing seems to be changing. Here is my code .inputfield { position:relative; top:30px; font-size: 60px!important; font-family:'Lato', sans-serif !important; font-weight: 400;...

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

css,twitter-bootstrap,twitter-bootstrap-3,responsive-design
I have a design I'm trying to implement, and I'm stuck on how to do it properly with Bootstrap 3. I'm not very experienced with Bootstrap and I'm sure I'm missing something which will make the concepts fall into place. Three DIVs with background images to be seen on desktop...

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

html,html5,twitter-bootstrap,twitter-bootstrap-3
I've been trying to wrap my head around how these work but so far I'm having no luck. On the website I have, the browser version looks like this: <div class="col-sm-4"> <div class="aside"> <div class="promo"> <p>left content</p> </div> </div> </div> <div class="col-sm-8"> <div class="content"> <p>right content</p> </div> </div> For the...

Vertical align text in bootstrap list-group

html,css,twitter-bootstrap-3
I am trying to vertical-align the text and button in a list-group-item with bootstrap 3. I've tried to make the parent a to have display: table; and the inner divs a display: table-cell; so that I can use vertical-align: middle. But the above won't fix it, here's a codepen I've...

Bootstrap collapse navbar on overflow

html,css,twitter-bootstrap-3
I am currently using Bootstrap 3.3.4. The content in my desktop navbar is too long at a certain point and so it overflows onto the next line. Below is an image outlining what I mean. You can see the logo pushes the links onto a new line when the browser...

Jquery-ui Autocomplete and Bootstrap 3 fixed navbar

twitter-bootstrap,jquery-ui,twitter-bootstrap-3,jquery-ui-autocomplete
I am trying to make a autocomplete search using jquery ui and twitter bootstarp. I have added a facny search box to the nav bar and everything seems to be working fine. Please take a look on code snippet below or you can also see the same code here on...

Loading bootstrap3 menu items from json response

jquery,twitter-bootstrap-3
I am trying to show items send from server as bootstreap munu items. For that I an trying following code HTML <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <span id="info-count"></span> <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="get-info-list"> <i class="fa fa-list-alt"></i> </a> <ul class="dropdown-menu" id="infolist" role="menu"> <!--Items should be loaded here--> </ul> </li> </ul>...

Align column vertically with bootstrap

html,css,twitter-bootstrap,twitter-bootstrap-3,bootstrap
I have 3 columns in a row. The first and second are wider, and the third is narrower and needs to include only a buy button and the price. This is how it looks at this point: I need to align the right most column to the middle of the...

Inconsistent display on IE & Firefox

html,css,internet-explorer,firefox,twitter-bootstrap-3
I'm using Bootstrap on my website project. I'm through with the design but the items are displayed out of place on IE & Firefox. The same page renders great on Chrome. I used developer tools on the three browsers to make sure there was no difference in the CSS properties....

Setting up the page grid using push and pull

html,twitter-bootstrap,css3,twitter-bootstrap-3
I'm using Bootstrap and I'm having issues setting up my grid. How do I use bootstrap's push/pull to setup my columns as below? This is what I've got so far, <div class="row"> <div class="col-xs-5 col-sm-3 col-md-3">A</div> <div class="col-xs-7 col-sm-9 col-md-2 .col-md-push-7">B</div> <div class="col-xs-12 col-sm-12 col-md-7 .col-md-pull-9">C</div> </div> ...

How can i have multiple Navbars in a page

twitter-bootstrap-3,bootstrap,navbar
I am building a CMS editor and one of the things that can be customized is the text appearing in the Navbar. I am having a problem with showing two Navbars. Most examples i have seen are multiple Navbars one below the other and is not what i need. I...

How to center image in carousel

jquery,css,twitter-bootstrap,twitter-bootstrap-3,carousel
How to center image in carousel ? I tried bootstrap 3 carousel using code from bootstrap tutorial: <a href="/Webconte/Details/124"> <img src="/Webconte/Image/124" /> </a> </div> <div class="item "> <a href="/Webconte/Details/123"> <img src="/Webconte/Image/123" /> </a> </div> <div class="item "> <a href="/Webconte/Details/105"> <img src="/Webconte/Image/105" /> </a> </div> <div class="item "> <a href="/Webconte/Details/95"> <img...

Bootstrap text-danger with form-inline not aligned

css,twitter-bootstrap-3,jqbootstrapvalidation
I have a simple form with error handling through jqBootstrapValidation. I set it up so that it is horizontal when the browser is wide enough. Here is how it looks: http://i.imgur.com/K0JKzb8.png However, when I enter a bad email, the form is not aligned anymore. http://i.imgur.com/4Fr2UTq.png Here is the code I...

How to make responsive column height with border using twitter bootstrap?

html,css3,twitter-bootstrap-3
HTML <div class="col-sm-12 wrapper-servicelisting"> <!--<div class="row">--> <div class="col-sm-3 br"> <div class="sub-total-amt"> <h5>Sub Total Amount</h5> <div class="subtotalamt">$9.96</div> </div> </div> <div class="col-sm-3 br"> <div class="sub-total-amt"> <h5>Sales Tax (10%)</h5> <div class="salestax">$0.996</div> </div> </div> <div class="col-sm-3 br"> <div class="sub-total-amt"> <h5>Total...

Change Font Awesome Icon on Click, but return to original icon when next item is clicked

jquery,twitter-bootstrap-3,onclick,font-awesome,toggleclass
I'm using Bootstrap 3 Panel's and have appended the Font Awesome Plus and Minus icons to the panel items. I'm looking for a way using Jquery to change the plus to a minus "onClick", then when another panel item is clicked I want that minus icon to change back to...

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
**HTML** <li class="option"> <input type="radio" name="Answer1" value="A">A</input><br> <input type="radio" name="Answer1" value="B">B</input><br> <input type="radio" name="Answer1" value="C">C</input><br> <input type="radio" name="Answer1" value="D">D</input><br> </li> <li class="option"> <input type="radio" name="Answer2" value="A">A</input><br> <input type="radio" name="Answer2"...

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

html5,css3,twitter-bootstrap-3
I have two tabs and I do not want them to stack when the window is resized. How do I do so? As shown below this is the code I've used to create my tabs. I don't understand why they would stack up when my window is resized. HTML Tab...

Check if Bootstrap Modal currently Show

javascript,jquery,twitter-bootstrap,twitter-bootstrap-3,bootstrap-modal
I'm trying to combine the Keypress plugin with Modal dialogs in Bootstrap. Based on this question, I can check if modal is open or closed using jquery. However, I need to execute Keypress only if modal is closed. If it's open, I don't want to listen for keypresses. Here's my...

Redraw/Repaint Issue with show/hide in Chrome

jquery,css,google-chrome,twitter-bootstrap-3
Having a weird issue in Chrome with the navbar-brand element of my sites bootstrap navigation menu. We have a larger site logo displayed in the header section, and a smaller logo within the navbar-brand element of the navbar with display none by default. When scrolling down the page we then...

Bootstrap center image

css,html5,twitter-bootstrap-3
I am trying to center an image on my webpage. I want it to appear just above my footer. No matter what I have tried so far nothing works here is my html <div class="center-block"> <img alt="footer" title="footer" class="image-footer" src="./img/demo.png"/> </div> <div class="navbar-fixed-bottom footer"> <ul class="foot-left"> <li><a href="#" class="menu_buttons" >Home</a></li>...

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

html,ruby-on-rails,ruby-on-rails-4,twitter-bootstrap-3,nested-attributes
I have a Product model with most of the attributes and a has_many relationship through to my Product_Images model. All of the updates, edits etc work like a charm but I'm having difficulty bringing data through to a front end bootstrap theme. What I'm trying to do is have the...

Bootstrap Hovering

javascript,twitter-bootstrap-3
Is it possible to do simply on bootstrap framework the following thing? Example having a few buttons and when one is hovered the others change to light grey or something. Sorry but I can't find it on w3 schools or in the web. Should javascript be used? Thanks!...

How to make a 100% height container in Bootstrap 3

css,twitter-bootstrap-3
Here's what I am trying to achieve. My HTML currently looks like: <body> <header> ... // BS sticky navbar - always visible no matter what </header> <main> <div class="container"> <div class="row"> </div> </div> </main> <footer> .. // Footer at bottom but content can push it down </footer> Either .container or...

Twitter Boostrap in Rails

ruby-on-rails,ruby-on-rails-3,ruby-on-rails-4,twitter-bootstrap-3,rubygems
I generated views using this command rails g bootstrap:themed Todo it generated several views for my model. I am using git and reverted the project to its former branch without the boostrap. Now, I am trying to regenerate the views but it always returns this identical app/views/manifests/index.html.erb How do I...

span is not inline with input using bootstrap 3

html,css,twitter-bootstrap-3
I am using Bootstrap 3 with form-horizontal in form tag. I am making use of form-group as shown in below sample HTML. span is not inline with input control as it is expected by using form-horizontal. <form name="productForm" class="form-horizontal"> <div class="col-lg-6"> <div class="form-group"> <span class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="text-align:right;">Number</span> <div...

Using AngularJS to display form validation errors

javascript,angularjs,twitter-bootstrap,twitter-bootstrap-3
Here's my current html code: <div class="form-group" ng-class="{ 'has-error' : form.inputName.$invalid && !form.inputName.$pristine }"> <label for="inputName" class="col-sm-4 control-label"><font color='RED'>* </font>Name</label> <div class="col-sm-8"> <input type="text" class="form-control" ng-model="name" name="inputName" id="inputName" placeholder="Enter in a name." required /> <p ng-show="form.form.$invalid && !form.form.$pristine" class="help-block">Name is...

List of conflicts between bootstrap and jquery-ui?

jquery-ui,twitter-bootstrap-3
I can't find such list (bootstrap and jquery-ui conflicts) in the internet. If you have used both together in one project may be you could aware me what kind of conflicts bother you? What I have met: tooltip function h? styles ...

Bootstrap modal-header Login change bottom line color

twitter-bootstrap,twitter-bootstrap-3
I am using Bootstrap login template and I want to change the bottom line color of model-header and align this line on left and right border. <div id="login-ar" class="container" aria-hidden="true"> <div class="modal-header"> <h1 class="text-center" id="login-tit">Login</h1> </div> <div class="modal-body"> <form role="form"> <div class="form-group"> <input type="email" class="form-control" id="email" placeholder="Enter email"> </div> <div...

How to use Twitter Boootstrap's form validation tooltip messages?

javascript,css,html5,twitter-bootstrap,twitter-bootstrap-3
First of all, I am not asking about using Bootstrap's javascript guide to write tooltips from scratch which is in the docs. I recently used type="email", along with v3.3.1. It automatically validated and showed awesome tooltips for wrong email. I am looking to extend this to custom fields (type="text" and...

aligning controls vertically in bootstrap

css3,twitter-bootstrap-3
I'm new to bootstrap and css3. I want to align my controls vertically in middle but some how not able to find elegant solution to it using bootstrap classes. Pls check sample code snippet below : <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="row"> <div class="col-md-12"> <div class="form-group col-md-5"> <span class="fieldtext">Field 1</span>...

aligning component in a line

twitter-bootstrap,twitter-bootstrap-3
I have the following code: <div class="container"> <div class="row"> <div class="col-md-3"> <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> <button type="button" class="btn btn-default btn-sm btn-default-gradient"> <span...