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.
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.
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;}
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...
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>...
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...
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...
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...
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/...
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...
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....
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...
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>...
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...
Hi you can do something like this to prevent wrapping .nav > li > a { white-space: nowrap; } This will prevent to break words...
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....
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>...
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...
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....
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...
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; } ...
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...
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...
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....
Add a negative top margin to your icon. .hide-details-sk-p .icon-sk-p-r { margin-top: -5px; } JSfiddle...
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 () {...
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');...
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...
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...
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...
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....
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/...
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.
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;...
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...
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...
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'); ...
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...
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...
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:...
Basics ? <div class="text-center"> <img alt="footer" src="./img/demo.png"/> </div> ...
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> ...
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...
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...
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() {...
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...
javascript,twitter-bootstrap,twitter-bootstrap-3,carousel
$('#yourButton').click(function() { $('.carousel').carousel(0); }); Bootstrap documentation : .carousel(number)...
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...
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...
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...
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:...
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...