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.
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...
CSS Nav Menu Fade Out OFF Hover
Natalie is absolutely right, transitions are the way to do this. The only bits that need a change are your CSS for the /*Drop Down Container*/ and the /*Drop Down On Hover Action*/ Rather than hiding the divs with display: none; hide them with opacity: 0; then set an opacity...
Bootstrap navbar doesn't show properly
jquery,html,css,bootstrap,navbar
Include bootstrap file properly and check if it has been loaded and remove multiple reference to jquery.js and keep any one either from cdn - https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js or from your local - assets/js/jquery-2.1.4.min.js <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script...
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/...
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...
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...
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...
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....
Inline block challenges and suggestions for the layout
If you have followed the comments above, there are many question being asked. I'll try to summaries most of it. For display:inline-block, the vertical-algin property only affects the position of the element itself, and relative to the position of the siblings (the tallest sibling especially). Percentage height like height:100%, only...
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...
Bootstrap navbar spacing issue
html,css,twitter-bootstrap,navbar,text-editor
Your issue is that you are not closing your tag's in your list groups. Looking at your html you have the following: <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="/">Home</li> <li><a href="tech/">Tech</li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="gaming/">Gaming <i class="caret"></i></a> <ul class="dropdown-menu"> <li><a href="#">AGGINAYR</li> <li><a href="#">XB1</li>...
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;...
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'); ...
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....
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:...
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...
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...
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 () {...
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/...
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...
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...
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...
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 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....
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 center image
Basics ? <div class="text-center"> <img alt="footer" src="./img/demo.png"/> </div> ...
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...
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.
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...
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 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...
Angular : displaying elements in navbar after logged in
javascript,angularjs,binding,navbar,ng-show
1) Your isLoggedIn is a function, and a function evaluates to truthy, hence the li is showed. Use it like ng-show="isLoggedIn()" instead. This is also true for your controller function in the return authentication.isLoggedIn; part 2) Your getUserInfo also is a function, so use it like: $scope.userInfo = function() {...
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...
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; } ...
Nav bar not centered properly (HTML/CSS)
Your <ul> element most likely has some in-built padding from the browser's stylesheet. This will bump the content a bit to the right. Try adding: nav ul { padding: 0; /* Remove the default padding. */ list-style: none; /* I want everything inside the nav bar centered, thus: */ text-align:...
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...
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...
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...
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...
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...
Bootstrap 3 Navbar not working on mobile
html,css,twitter-bootstrap,navbar
The issue is that you are not including the Bootstrap Javascript(necessary for using the built-in dropdown menu) on your page. Once you have included that, it should work: <script tpye="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> ...
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>...
Collapsed navbar is covering content behind it in bootstrap 3.3.4
twitter-bootstrap,navbar,transparent,collapse
Once bootstrap reaches 768 pixels the navigation bar collapses and shows an icon to the right of the navigation bar which allows a dropdown menu to display vertically. Now, to change the dropdown menu not to be opaque and see the background 50% transparent the following code can be added...
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 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...
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...
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...