FAQ Database Discussion Community
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...
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...
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...
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...
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> ...
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....
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....
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....
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...
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...
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...
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">...
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...
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...
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">...
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...
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...
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"...
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...
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...
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...
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...
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...
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)...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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">...
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>...
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);...
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">...
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...
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...
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...
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>...
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...
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...
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...
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"> {%...
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' +...
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!...
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...
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...
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...
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>...
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...
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...
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...
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,...
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? ...
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...
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...
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...
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...
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...
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...
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...
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 ...
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...
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. ...
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...
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...
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...
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...
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...
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...
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...
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...
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....
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!...
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...
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...
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>...
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...
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...
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...
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...
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...
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;...
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...
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?
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...
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">...
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...
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) {...
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">...
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?
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...
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...
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"...
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....
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....
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>...
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!...