FAQ Database Discussion Community


Trying to add a button beside google map search: difficulty align using css and bootstrap

css,google-maps,bootstrap
Nothing seems to work!!! This is one of the attempts: I want a search button beside the search bar, in google map. the lay out and the code is pretty much line for line from this: google maps search example <div class="row"> <input id="pac-input" class="controls" type="text" placeholder="Search Box"> <button id...

set height of div(s) at fullscreen with a scrollbar in the div and a header

css,bootstrap
I am trying to put together a quick viewer for data. I need 3 cells... a header, and two columns (I'm using Bootstrap). I'd like the two columns to scroll independently of each other. I'll be populating the left column with vertical data and when an item is selected, I'll...

Ref required to do bootstrap example on JSFiddle

jquery,bootstrap
Ref [jsfiddle.net/le_beluet/1oc2wvrj/12/][1] On this example the drop menu is not working. I suspect the reference because it does work fine when I'm on local with donwloaded reference....

JQuery on click event on Href [duplicate]

javascript,jquery,bootstrap,bootstrap-modal
This question already has an answer here: Event binding on dynamically created elements? 8 answers I am appending data dynamically to my table as: function myFunctionEdit() { var table = document.getElementById("nomiTable"); var len = table.rows.length; var row = table.insertRow(len); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3...

evenly distribute a search form on navbar

html,css,bootstrap
I need to organize a search form horizontally so I tried to put them into a nav bar but code below is not working. I tried to use tables, col-sm-3, , but none of them is working. I would like 4 columns in a row. Can you please help? <div...

how do you access 'this' control's clientID or just do Bootstrap's .popover() in jscript

javascript,jquery,asp.net,bootstrap
The 'this' I'm talking about is the first argument of createDiv function call below. So it's basically the LinkButton that is clicked. <asp:LinkButton ID="btn_ReportReply1" runat="server" class="btn btn-danger btn-xs" Text="ReportReply" OnClientClick='<%# String.Format("createDiv(this," + Eval("UniqueNo") +","+ Eval("CommentSeqNo") + "," + Eval("UserNo") + ", \"{0}\");", Eval("LoginID")) %>' ></asp:LinkButton> Now what I want to...

Retrieve Input Data from Datepicker

javascript,jquery,html,asp.net-mvc,bootstrap
http://www.eyecon.ro/bootstrap-datepicker/ I found a interrested functionality that you can change the start and end date. There are some qustions that I'm wondering. How should I retrieve the value from the start date and end date into asp.net mvc's backend as a parameter? The calender starts with sunday. I would like...

HTML5 'required' not working with submit button

html,html5,forms,bootstrap
The form wont submit when required is added to the tags, but when removed, it will work. Why is this happening and is there a fix? Thanks. <form class="form-horizontal" role="form" action="insert.php" method="post" autocomplete="on" style=""> <div class="form-group"> <label class="control-label col-sm-2" for="fname">Firstname*:</label> <div class="col-sm-4"> <input type="text" name="fname" class="form-control" required> </div> <label class="control-label...

row count is not working properly when i delet the row in add row javascript

javascript,jquery,html,css,bootstrap
I am using javascript for add rows everything working fine, but when i delete the middle row, row count is not getting update. Rows counts like that: 1,2,3,4,5 if i delete 3rd row its coming like: 1,2,4,5 Please help me to fix the issue HTML <table class="table table-hover" id="add-row"> <thead>...

Bootstrap navigation toggle for mobile

javascript,php,jquery,website,bootstrap
I used a Bootstrap template to start of my website. I added a navlogic and did some adjustment on the logo in an own CSS. Now, when i try my website on mobile , it resizes but when I click on the button nothing happens. I serached for some answers...

How to autoscroll on scroll event using JQuery and Bootstrap?

javascript,jquery,bootstrap,autoscroll
I'm trying to accomplish an effect like in http://alfabank.ru When the user scrolls, the website will dynamically autoscroll to an anchor. Is there any way to do this using JQuery and Bootstrap? I found an event that may help me creating this effect http://www.w3schools.com/jsref/event_onscroll.asp . Anyway, I don't know how...

Overlapping Design with Bootstrap 3

twitter-bootstrap,bootstrap
Hey I am doing my first steps with the Bootstrap Grid system. I am wondering how to create the following design with the grid system for large displays: I am confused how to create the overlapping parts using the correct syntax and the right use of the grid system. Do...

Regarding Uncaught Error: Syntax error, unrecognized expression

angularjs,node.js,express,bootstrap
i am implementing a angular+node js app.I am new to this. I have define a href as <li><a data-toggle="modal" data-target="#myModal" href="/#/login">Login</a></li> in the html page and have defined the route as .when("/login", { templateUrl: '/app/ng/modules/home/partials/login-partials-view.html', controller: 'LoginController' }) I am getting issue as Uncaught Error: Syntax error, unrecognized expression: /#/login...

Dropdown menu not working (tab focus)

html,css,html5,twitter-bootstrap,bootstrap
Im using a bootstrap example with a dropdown menu Here the live example: http://jsfiddle.net/p73vc8Lv/ what im trying to do is to display the dropdown menu when the user tab on the link, Im tried with css and javascript CSS: .dropdown-toggle a:focus > .dropdown-menu { display:block } is there a way...

Multiple column within row in bootstrap is not working in IE 11

html,css,bootstrap
Here is my bootstrap HTML code snippet. It is working fine in all browsers except in IE-11 . I am getting a horizontal scrollbar also the last 2 div col-xs-6 inside a row are coming in 2 different rows not in a single row. <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap...

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

Responsive sized swfobject?

flash,responsive-design,bootstrap,swfobject
I have embedded this interactive poster ( http://www.mikesmithdesign.co.uk/images/posterforscreen.swf ) into an html page but am having trouble setting the size of it. I am working with bootstrap and want the content to be responsive but at the moment it comes up really small sits in the middle of the column...

Bootstrap table's styles messed up when used with Ember.js

html,css,table,ember.js,bootstrap
I work with bootstrap. When I create a table in plain HTML, bootstrap's table styles are applied as expected. But, when I insert the same HTML into an Ember.js template, the bootstrap's table styles don't seem to apply (e.g. table borders, paddings and stripes are not present). Fiddle: http://jsfiddle.net/5evymbou/ Plain...

Float masonary elements to the right instead of stacking

jquery,css,bootstrap
I have been working off of this snippit to create a masonary style homepage. However I don't want to stack the div elements, rather gradually float them to the right and tile downward. I've seen this solution, but it's in regards to list elements, I can't seem to get it...

Background Color with Bootstrap

html,css,twitter-bootstrap,bootstrap
I seem to be having problems lining the background color of a row in Bootstrap. I would like the background to the right of the second placeholder box to be a solid color, but right now it's taking into account the additional padding, and it's not aligning properly. Currently the...

daterangepicker show year and months only

javascript,jquery,bootstrap,daterangepicker
I'm using daterangepicker bootstrap 3. $('#pa_date*').daterangepicker({ singleDatePicker: true, showDropdowns: true, minDate: min, maxDate: max, format: 'DD/MM/YYYY' }).on('apply.daterangepicker', function (ev, picker) { alert(picker.startDate.format('MM/YYYY')); }); It shows me the full daterangepicker: I want to hide the calendar and show only years and months drop-down, like this: ...

bootstrap responsive navigation. Toggle button position

mobile,responsive-design,navigation,bootstrap
I'm working on a responsive template and I can not sort this out!!! So.... My header and navigation HAS TO LOOk like this in mobile screen: But I'm struggling because the natural behave of the navigation, as you see in desktop size: The navigation is the grey bar, so when...

How to ignore css property by override (bootstrap 3)?

css,bootstrap
In bootstrap css there is the following: .navbar-brand { float: left; height: 50px; padding: 15px 15px; font-size: 18px; line-height: 20px; } I want to ignore the height:50px so that it becomes: .navbar-brand { float: left; padding: 15px 15px; font-size: 18px; line-height: 20px; } But I don't want to modify the...

How to create bootstrap html structure in php loop?

php,html,loops,bootstrap
I'm using bootstrap and need to create structure like this <div class="row"> <div class="col-sm-3"> <!--content loop 1--> </div> <div class="col-sm-3"> <!--content loop 1--> </div> <div class="col-sm-3"> <!--content loop 2--> </div> <div class="col-sm-3"> <!--content loop 2--> </div> </div> <div class="row"> <div class="col-sm-3"> <!--content loop 3--> </div> <div class="col-sm-3"> <!--content loop 3-->...

Div bigger then Content after centering

html,css,twitter-bootstrap,bootstrap
After 1 hour of try and error and searching for problems like this, i try to get an answer here. I want to include a bootstrap Nav-Bar into a Div. I centered the Nav-Bar, but now my Div is higher then the content. This problem is only available when the...

Creating nav bar with dropdowns using bootstrap and jQuery

jquery,css,drop-down-menu,bootstrap
Sorry if this question has been asked before but I couldn't find a straight answer. I'm new to css and jQuery and I'm trying to create a nav bar that has menus and sub menus, and using dropdown to open each individual menu. This might be a parent/child isuue but...

i have used image as navbar brand in my header but the image comes out of the header how can i solve this in bootstrap?

bootstrap
here my code <nav class="navbar navbar-inverse navbar-fixed-top bgc" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"> <img src="img/log1.jpg"...

Remove Container Sides

html,css,twitter-bootstrap,bootstrap
I'm having problems styling my page and I'm not sure what to do. The issue I'm running into is that the container class in Bootstrap has a sizable amount of padding on each side, but I can't seem to reliably remove it. I want the red background to be flush...

change color of A tag of bootsrap not working

html,css,bootstrap
<head> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> **<style> .navbar-brand{ color:red; }** </style> </head> <body> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> **<a class="navbar-brand" href="index.html">Test</a>** </div> </nav> </div> </body> I want to change the color of the Text to Red, but It's not working. It will work if I put "Test"...

Bootstrap flip card with css3 transform

css3,bootstrap,css-transforms,flipview
I want to create a bootstrap flip card by using CSS3 transform. I did started from this working and basic example However I wanted to modify it to have a fixed height card and some minor enhancement. In particular I needed to have the card flip when the user click...

How to make video with full height

jquery,html,html5,css3,bootstrap
I need your help to make this video with full height. Although, the div size is around 50% and when i make my video fixed position, it works like full background video but i want to make it fit into my div with full height. Have look what i want...

Ajax overlay div extends beyond parent

html,css,bootstrap
The site I'm working on contains multiple panels on a page and within the body of each panel, the data is sorted by clicking on the column header. Each panel has its own div overlay that displays while the ajax request is sent. An example of a rendered page can...

Large bootsrap dialog from extlib focus on the bottom

modal-dialog,xpages,bootstrap,xpages-extlib
I have a dialog from the ExtLib and I use the boostrap konfiguration. When the dialog open the focus is on the bottom of the dialog. If the dialog bigger then the screen I don't see the top of the dialog and I must scroll. This is not what I...

Bootstrap drop down does not work

javascript,bootstrap
I'm trying to accomplish a simple drop down using the bootstrap example, but it does not respond to anything when I click it. I have searched on this problem and none of the solutions helped me (i.e. putting the links to the resources in head, or at different order). Don't...

Trying to align upload button with a Textarea in HTML and CSS

html,css,bootstrap
I'm making a webpage for one of my projects and I'm trying to align the Upload buttons beside a text field. Maybe better explained as a picture. You can see that the two buttons are aligned on the bottom left of the submit button. I want it to be aligned...

Show/hide div on dropdown change problems

javascript,bootstrap,onchange
Sorry total js newbie here I got this JS code from another stackoverflow question $(document).ready(function(){ $('#cart').on('change', function() { if ( this.value == '1') { $(".tea").show(); } else { $(".coffee").hide(); } }); }); It worked for the other guy, but not for me, what am I possibly doing wrong? http://codepen.io/anon/pen/waexVV It...

Implementing POP UP in Angular+Node

angularjs,node.js,express,bootstrap
Can anyone please suggest me How to implement a POP UP function in Angular + Node js? I want to implement a login which should pop up when the user clicks login button. Thanks...

make an image sit at the bottom of a section scroll site

html,css,twitter-bootstrap,bootstrap
I have a one page scrolling site using bootstrap. In the header section there is a logo image that is supposed to stay centered at the bottom of the section. However the image consistently stays at the top HTML: <header> <a class="page-scroll" href="#about"> <div class="logo container"> <img src="img/logo_black.png" alt="logo"></div> </a>...

Bootstrap Navbar Logo pixelated on phone

jquery,html,css3,bootstrap
I was wondering if anyone know how to solve this problem: I am creating a website with bootstrap, I've been trying to do the navbar and everything works perfectly except on my mobile phone because the logo gets blurry or pixelated, I am not sure if its getting resized automatically...

show table row to modal bootstrap

jquery,bootstrap
I am confused with how to show my table row to bootstrap modal, can anyone help me? here is my modal: <div id="edit_category_modal" class="modal fade" tabindex="-1" data-backdrop="static" data-keyboard="false"> <form id="form_edit_category"> <input type="hidden" name="_token" value="{{csrf_token()}}"/> <div class="modal-header"> <h4 class="modal-title">Edit job category</h4> </div> <div class="modal-body"> <input id="name" type="text" class="form-control" name="name" placeholder="Category...

Not able to display content in mobile view

html,css3,responsive-design,bootstrap
I have added a lightbox to a webpage, but the content does't show up in mobile view. I am a developer and new to designing, so please help me solve the issue http://www.kahui.org/user/boardmember Will be very thankful for any helpful suggestion...

how to set bootstrap button to active on click using javascript

javascript,bootstrap
<div class="row"> <div class="col-md-8"> <h3 > <button type=submit class="btn btn-primary btn-lg btn-block" .button><a href = "mrequest.php">make a request</button> </h3> </div> </div> <div class="row"> <div class="col-md-8"> <h3> <button type=submit class="btn btn-primary btn-lg btn-block" .button><a href = "mviewreq.php">view requests</button> </h3> </div> </div> <div class="row"> <div class="col-md-8"> <h3>...

Bootstrap responsive not working after including Viewport meta

javascript,jquery,html,css,bootstrap
As the title says the responsive feature of Bootstrap 3.0 is not working on any mobile device (Android, iPad) in my website. It works perfectly in chrome and firefox by making the window smaller. I know a common problem is forgetting to include the <meta name="viewport" content="width=device-width, initial-scale=1"> but I...

Bootstrap 3.3.4 row not stretching 100% of page

html,css,bootstrap
I have just started using bootstrap and have 2 rows set up as such: <div id="wrapper" class="container-fluid"> <div class="row" id="header"> <div class="col-md-8 col-md-offset-2"> <div id="logo"> </div> </div> </div><!--HEADER--> <div class="row" id="heroimage"> <div class="col-md-8 col-md-offset-2"> </div> </div><!--HEROIMAGE--> </div><!--WRAPPER--> But the #heroimage row isnt stretching 100% the width of the page. It...

BB Dialog showing up before alert

javascript,jquery,html,bootstrap,bootbox
JSFiddle Link: The bootbox.alert should show up before the bootbox.dialog. I've preloaded all the libraries into the JSFiddle. I want the bootbox.dialog to show up once the bootbox.alert has been clicked on....

Angular directive for horizontal Bootstrap form

angularjs,forms,angularjs-directive,bootstrap
I'm trying to build a directive for my Angular to help with the integration of form fields. I've implemented Scott Allens solution from his Angular playbook, and it works fine for a normal stacked form. I need however to adapt it to a horizontal form instead. Here's my code: Markup...

angularjs select the first value in select box

javascript,angularjs,bootstrap,angular-ui-bootstrap,angularjs-ng-options
I need to highlight the first value 'fullName' in select box using angularjs. I am using angularstrap selectbox. controller, $scope.accountInfo.owners = [ { "accounts":null, "phoneumber":null, "email":null, "fullName":"MITA DASGUPTA", "mobilePhoneNumber":null, "noteFlag":false, "number":130000000484 } ] Template, <button type="button" class="btn btn-default" placeholder="Pleasae select" data-ng-model="owner.fullName" data-html="1" bs-options="owner as owner.fullName for owner in accountInfo.owners" bs-select>...

Bootstrap checkbox won't fire the change event

jquery,html,bootstrap
So, I have a checkbox that I made using the Bootstrap methodology. I am trying to show or hide some divs depending on whether or not this checkbox is checked. I have the following HTML: <div class="col-lg-12"> <div class="checkbox" id="partner-div"> <label> <input type="checkbox" id="chkPartner" /> Check here if you are...

Activate bootstrap date picker on injected element

javascript,jquery,twitter-bootstrap,datepicker,bootstrap
I am adding a input field to a modal after the page has loaded. It should be bound to a date picker as follows. $('.#example1').datepicker({ format: "dd/mm/yyyy" }); This does not work. If I run this code in chrome console after the page and input is visible it works not...

Image next to text

bootstrap,timeline
I've this code and I need to have the picture on the same line as Timeline headline. <div class="container"> <div class="page-header"> <img src="https://lh3.googleusercontent.com/J1d-4ze1atTh6BbMXh34eK_4fEttHBlztlWcgjKbzzd79zQYCqkLxw07Gh7oRdJrZAybyTG3acXKn7QHh3S54bgZ7awV5YQm6XZiTp_OHJq1f3a0aoOHusbbWq2kc6oAmg" width="100px" height="124px" class="img-thumbnail"> <h1 id="timeline">Timeline</h1> </div> .... </div> ...

Bootstrap navbar doesn't show properly

jquery,html,css,bootstrap,navbar
I am new to the StackOverFlow community and hope to contribute my own solutions in future :-) For now, your help will be appreciated: This is a partial script for a Wordpress page using Bootstrap (with only the navbar part complete). For some reason, it doesn't show up properly on...

Can't scroll tab-content and keep height at 100%

html,css,bootstrap
I would like to have the tab content scrollable and have the height be 100%. There are a bunch of example on how to do this within a fixed height container, but I want the scroll window to be reactive to window resizing and resolution. Basic problem: if you want...

How to reduce the label font in bootstrap?

jquery,bootstrap
I'm using bootstrap to design the form, however I have an issue with the label font (big and bold) How I can reduce the font and remove the bold? see fiddle <form class="form-horizontal"> <div class="form-group"> <label for="sel" class="col-md-2 control-label">Selecte:</label> <div class="col-md-10"> <select id="sel" class="form-control input-sm"></select> </div> </div> </form> ...

Bootstrap - Edit input alert unfilled information?

bootstrap
I was wondering if there was a way to customize these alerts in bootstrap?

Angular2 - Bootstrap v3 datetimepicker issue in FF and IE

web,bootstrap,bootstrap-datetimepicker,angular2
I am rather new to clientside web development and am currently learning how to work with Typescript, Angular2(0.27) and bootstrap. I know that Angular2 is still in heavy development, but I ran into an issue, of which I am not sure what (technology) exactly is causing it. The problem has...

Unwanted line break between elements

css,twitter-bootstrap,bootstrap
I need to have a text input and a button using bootstrap but for some reason there's unwanted line break created between them. I'm new to bootstrap so I'm not sure what's going on. <div class="row" style="border:0px solid black"> <div class="col-xs-2 col-md-2" style="border:0px solid green"></div> <div class="col-xs-8 col-md-8" style="border:2px solid...

How to set javascript properties on a global listener, without duplicating code

javascript,parameters,call,bootstrap,typeahead
If I have multiple '.typeahead' input field on my page, and I want each of them to initialize typehead(), how can I make an exception for one specfic input element without duplicating my code? E.g.: My fields: <input type="text" class="typehead_selector" id="coworkers"> <input type="text" class="typehead_selector" id="jobs"> <input type="text" class="typehead_selector" id="search" data-action="search">...

JavaScript - Add rows adding rows after tbody tag, Need to add inside tbody

javascript,html,css,bootstrap
I am getting issue when adding rows in JavaScript. Everything works fine but rows are being added after the tbody tag. I need to add inside tbody. Snippet: function deleteRow(row) { var i = row.parentNode.parentNode.rowIndex; document.getElementById('add-row').deleteRow(i); } function insRow() { var x = document.getElementById('add-row'); var new_row = x.rows[1].cloneNode(true); var len...

How do I 'href' bootstrap3 directory when I use django 1.8 framework?

html,django,bootstrap,web-frameworks
This is what my project directory looks like (significantly truncated to get to my point quickly): ├── bootstrap-3.3.5-dist └── mysite ├── db.sqlite3 ├── myApp │   ├── admin.py │   ├── forms.py │   ├── __init__.py │   ├── templates │   │   └── myApp │   │   ├── base.html │   │   ├── index.html │   ├──...

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

How to animate text size without affecting navbar height?

jquery,bootstrap
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@ViewBag.Title</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") @Scripts.Render("~/bundles/jquery") <style> .navbar-brand { float:none; } </style> <script> $(function () { $("a.navbar-brand > div.text-center").mouseenter(function () { $(this).animate({ fontSize: "1.05em" }, 300); }).mouseleave(function () {...

css html bootsrap layout issue

javascript,html,css,bootstrap
I am trying to build a page with 2 full height columns. the left column is for a menu. The right section will hold a form. Trying to make this a responsive page by using bootstrap. I have written the following code, but when i resize the window, the form...

Django webframework relative path to .css and other .html files

html,css,django,bootstrap,web-frameworks
This is what my project directory briefly looks like (not complete picture). I am having trouble linking many components together (.css, .html). ├── bootstrap-3.3.5-dist └── mysite ├── db.sqlite3 ├── myApp │ ├── admin.py │ ├── forms.py │ ├── __init__.py │ ├── templates │ │ └── myApp │ │ ├── base.html...

How to get Bootstrap Carousel to fit 100% to screen?

html,css,twitter-bootstrap,bootstrap,carousel
I was wondering how to get the carousel in Bootstrap's Carousel example to fit 100% to screen, as opposed to the way it's displaying now which allows some blank circular images to be included in the main landing page when it is loaded. Here's a simple illustration of what I'm...

how to make horizontal list of boostrap 3 panels responsive

css,twitter-bootstrap,bootstrap
I m using boostrap 3 and struggling to make a horizontal list of panels responsive. My html is as below. It renders fine in all browsers but on mobile resolution the text is not responsive. Any ideas what I m missing? thanks <body> <div class="container"> <div class="row"> <div class="col-xs-2"> <div...

My bootstrap Toggle is disappearing after it is opened

html,css,bootstrap
I'm trying to add bootstrap toggle navigation in 1024 width. I have written a media query for it but after opening the navigation, it suddenly hides. Here is my css : @media (max-width: 1024px) { .navbar-header { width: 100% !important; } .navbar-header .logo { width: 400px !important; float: left !important;...

iOS favicons (Add to Home Screen)

xpages,bootstrap,xpages-extlib
I am using ExtLib and have an app that uses Bootstrap. I would like to add an favicon when the user selects "Add to Home Screen". I have managed to add my icon to the tab bar in Chrome (on the Mac) by extending the bootstrap theme like this: <control...

How do I keep the datepicker field empty on load?

javascript,jquery,datepicker,bootstrap
I have 3 date pickers on my page and the selected dates are stored in the database. If the values are empty I want the field to be empty, but it shows today's date. I have used the below code, jQuery('.date-picker').datepicker({ startDate: new Date(), autoclose: true, todayHighlight: true, setDate: ''...

Change menu's height on scrolling

jquery,html,css,web,bootstrap
I want for my website, when I scroll down to minimize the menu's height. For example, my header is fixed top with height:150px . And when I scroll down, I want to resize with a height: 50px. I'm using bootstrap 3. So the class of my header is .navbar .navbar-fixed-top...

How to reduce the space between four buttons in bootstrap 3

css,bootstrap
i'm creating a simple menu at the top of my web page using bootstrap 3, with btn and btn-info classes in four divs (col-md-3). the space between the buttons is too high. how can i reduce the space between them ? for example 5 pixels margin. it's my code :...

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

I can't retrieve the value typed in a text input using Javascript

javascript,onclick,bootstrap
I have a problem, when i try to retrieve the value I have typed in the text input, and I try to print it in alert , it shows nothing, the variable is empty here is the code: I have here the input textfield 'Montant', i would like to retrieve...

Bootstrap daterangepicker add option manually using jquery

jquery,twitter-bootstrap,bootstrap
I am using Bootstrap DateRangePicker $('#reservationtime').daterangepicker({ timePicker: true, timePickerIncrement: 30, format: 'MM/DD/YYYY h:mm A' }); I want to add manual option to this daterangepicker using Jquery. I need something like this $( "#reservationtime" ).daterangepicker( "option", "minDate", '01/01/2012'); Is there any option available? ...

bootstrap grid different column height and width

html,css,twitter-bootstrap,grid,bootstrap
I'm trying to achieve this on bootstrap: http://s2.postimg.org/nrbrjp4xl/layout.png Last two columns stay with a distance, I want them all stacked. how can I fix this? here is a sample of my code on JSFiddle: JSFiddle and here is the code: .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7,...

Nested Columns / Rows

html,css,twitter-bootstrap,bootstrap
I'm having a tough time with nested columns in my layout. In the following code snippet the col-md-3 floats above the other two grids using a negative margin. Everything looks fine except for when I try to add text to one of the nested columns, and then it expands out...

Style.css not loading in Mozilla Firefox

html,css,twitter-bootstrap,bootstrap,mozilla
I am working on a website that isn't loading properly on Mozilla Firefox. It loads great on Google Chrome, Opera and Safari but experiencing troubles loading on Mozilla and IE. Using Bootstrap, HTML and CSS for the website. Website link: http://alumniapp.in Problems being faced on Mozilla: It loads the Bootstrap...

Bootstrap collapse and ui-rooter

javascript,angularjs,angular-ui-router,bootstrap,angular-ui-bootstrap
I have issue with ui-router and using bootstrap collapse. <div class="panel panel-default" id="accordion" > <div role="tab" id="headingOne"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> Click me </a> </div> <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> Data </div> </div> This is page localhost/#/root/mypage/. So the 'Click me' is pointed to...

Aligning two images on bottom left and bottom right of a div

css,bootstrap
i have a justified block of text within the footer of a bootstrap html page. Now i'd like to add two images with the same height but different widths to under the text and at aligned to either side. <footer> <div class="container"> <div class="row"> <div class="col-md-3"> <span class="copyright">Copyright &copy; Bla...

How to have time in multiples of 15 in bootstrap datetime picker?

javascript,bootstrap,bootstrap-datetimepicker
I am using the bootstrap date time picker and I want the time picker to show time only in multiples of 15, for e.g. 9:00 , 9:15, 9:30, 9:45.

bootstrap grid layout questions

grid,bootstrap
http://i.imgur.com/QwbEHp5.jpg is there anyway to achieve the responsive grid layout above using bootstrap? i not sure whether this is the correct way to do it? <div class="container-fluid"> <div class="row"> <div class="col-md-6"><img src="http://s27.postimg.org/twfuw219f/256x256.jpg"></div> <div class="col-md-6 col-sm-3"><img src="http://s8.postimg.org/w0dxtotv9/256x120.jpg"></div> <div class="col-md-6 col-sm-3"><img...

Bootstrap Responsive Menu won't Respond

css,menu,bootstrap
I'm having a bad time with this Bootstrap menu I made, and I can't figure it out why it won't collapse, animate. Everything works great and all, but the button doesn't work. <!DOCTYPE html> <html> <header> <script type='text/javascript' src="//ajax.googleapis.com/ajax/lib/jquery/2.0.2/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link href="stylesheet.css" rel="stylesheet"> </header> <body> <div...

Get glyphicons thinner

css,bootstrap,glyphicons
Everyone! I'm trying to make glyphicons thinner, like this Now I get this view of icon Is there any solution to make it thinner? I tried to chnge font-size and font-weight, but it didn't help. What eles can I do?...

Popover or Tooltip doesn't work at all in my browser

php,html,bootstrap,popover
I tried all day to have some popovers in my table that shows more information for each cell. But I came to the conclussion, popovers do not work at all in my code. How and Why? Anyone any idea what it can be? <td> <div> <span class="btn" id="infoItem" data-toggle="popover" rel="popover">...

navbar disappears but no dropdown

angularjs,bootstrap
So been trying to set up a navbar that collapses to a drop down when the size is under a certain number of pixels. So far I have managed to make the normal menu disappear when it goes under a certain size, but once I make the window smaller and...

jQuery: Dynamically Adding Glyphicon

jquery,bootstrap
I am having a slight functioning issue in Firefox w/ a jQuery glyphicon. I used Bootstrap to build my portfolio and used jQuery .load function to load some portfolio pages dynamically when you click on them. I also added a jQuery .append function to append a glyphicon close icon on...

CodeIgniter 3 and Bootstrap 3 Modal

javascript,jquery,modal-dialog,bootstrap
I have a view and with this code in the head. $(document).ready(function() { $('#myModal').modal('show'); } and this: <div id="myModal" class="modal hide" role="dialog"> </div> The controller has: class Home extends CI_Controller { public function __construct() { parent::__construct(); $this->load->library('session'); } public function index() { $this->load->view('home'); } } When I run the view...

How do I load my pdf file into my modal when the button is clicked?

javascript,html,bootstrap
I have a button that, when clicked, opens a modal with pdf content. I have a list of these. My problem is that when the browser loads the website it also loads all the pdf files. I want a specific pdf file to load only when I press a button...

jQuery Validate plugin controlling CSS on error label only

jquery,css,jquery-validate,bootstrap
I'm trying to control the styling of the error message that appears when using the jQuery Validate plugin. I want to apply the label label-danger CSS classes from Bootstrap. I'm using the errorClass configuration attribute according to the documentation. $("#frm").validate({ errorClass: "label label-danger" }); The problem is the plugin also...

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

How to make a Bootstrap radio button continue into a dropdown menu

html,drop-down-menu,radio-button,bootstrap
I would like to have a radio button with a couple options showing, and the rest available in a dropdown menu. I can get the interactions I want by assigning every option to a class, but I would like the color of the dropdown menu to change to the active...

How to disable the responsive functionality on bootstrap? [closed]

css,bootstrap
Without making too many changes, what is the best way to do this? The website has 100's of files, I don't want to change them all. Is there a quick way?...

Space between rows in bootrap form not correct

html,css,asp.net-mvc,asp.net-mvc-3,bootstrap
I have the following form, however there is an extra space between 1st and 2nd row. http://screencast.com/t/brkYad2NjPaH However I am not sure how to get rid of it. This is the html code generated <div class="form-horizontal"> <div class="form-group"> <label class="control-label col-md-2" for="Entidad">Entidad</label> <div class="col-md-10"> <select name="Entidades" class="form-control m-b" id="Entidades"></select> </div>...

display the contents of another page inside tabs

jquery,tabs,bootstrap
how am I going to display the external page inside my tabs? I have these four tabs and aiming to call the external pages when it was clicked. <div class="bs-example bs-example-tabs" role="tabpanel" style="padding-top: 70px;"> <ul id="myTab" class="nav nav-tabs" role="tablist"> <li> <a href="#ViewPools.aspx" id="#tab0" role="tab" data-toggle="tab" >Pool </a></li> <li> <a href="#tabCategory"...

bootstrap - dynamically changing jumbotron background image

javascript,jquery,html,css,bootstrap
I'm trying to change the background image of the jumbotron div with jQuery when a new tab is clicked, like this: $(".about").click(function(){ $('.active').toggleClass('active'); $('.about').toggleClass('active'); $('.jumbotron').fadeOut(500); //change background image $('.jumbotron').fadeIn(500); }); I tried using $('.jumbotron').css('background-image',url('/path/to/new/image')); but when I include that line, the jumbotron background image doesn't display at all even before...

Bootstrap panel-collapse event triggers more than once

bootstrap,collapse
I am having the following code for the products available in the store with related products also. I wanted to get id of the div on collapse event. But from the code I am getting two triggered results when collapsing the nested list. HTML <a data-toggle="collapse" data-parent="#accordion" href="#collapse1"> <font style="color:...

bootstrap group inputs horizontally

css,bootstrap
i have a multi line form and in one of the lines i want to group two input and a button horizontally using bootstrap. JSFIDDLE <form> <div class="form-group"> <lable>first :</lable> <div class="input-group"> <input type="text" class="form-control" value="123" style="width:50px;"/> <span class="input-group-btn" style="width:0px;"></span> <input type="text" class="form-control" value="test2" disabled/> </div> </div> <div class="form-group"> <lable>second...

'Submit' button in Bootstrap scrolling to top

php,twitter-bootstrap,button,bootstrap
I have created a single page portfolio template using Bootstrap framework from Twitter. I am having an issue that when I click on "Submit" button in the contact form, the page scrolls all the way to top. I have checked that I have not used any internal linking to top...

maxlength not working in html form input field with bootstrap

html5,forms,twitter-bootstrap,bootstrap,html-form
I am using bootstrap and currently created form with 5 tabs in it. I have a form field called layer time in which I have 3 input fields namely hours, minutes,seconds. I want to set the maxlength of 2 for each field.But it is not working when I specify it....

ng-show/hide but with Bootstrap's collapse effect

javascript,angularjs,bootstrap
We're using Angular and Bootstrap (note: but not Angular UI Bootstrap). I have a div with an ng-show on it. What I don't like is that when it shows or hides it doesn't exhibit a collapsing, like you see with Bootstrap's collapse. How can I get this growing/shrinking behavior that...

Bootstrap Smaller Navbar Collapse Width

css,asp.net,bootstrap
i have a problem i was searching all day for answer and did't find it. The code: <div class="visible-xs navbar navbar-ti navbar-fixed-top "> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#navbar" > <span class="glyphicon glyphicon-menu-hamburger white"></span> </button> <button type="button" class="navbar-toggle collapsed pull-right"> <span class="glyphicon glyphicon-search white"></span>...