Questions tagged [twitter-bootstrap]

26095 questions
7

votes
2

answer
126

Views

Is it possible to use CSS variables in Twitter-bootstrap 4 $theme-colors array?

In bootstrap 4 you can define and/or override default colors using the following array: (as documented here) $theme-colors: ( "primary": #001122, /*override*/ "color-1": red, /*new color*/ "color-2": black, /*new color*/ "color-3": white /*new color*/ ); I want to make custom theme colors for differ...
djl
1

votes
2

answer
4.6k

Views

Vertical stacking span labels in bootstrap

I am trying to stack spans inside of a bootstrap div.controls. Multiple span.label's default to stack horizontally but I would like each span.label to be vertically listed instead, on it's own line per se. This is currently how I have it displaying: test test 2 http://jsfiddle.net/gMN4f/3/
Jon
1

votes
1

answer
4.2k

Views

Creating very large form elements with twitter bootstrap

I want to create a form for my front page that has very big elements, so I'm thinking I just define some custom css classes, but I'm struggling with how exactly I'm meant to scale everything up, eg padding, line height, etc. to match font size. I'm thinking of having a horizontal form with labels an...
Tesla
1

votes
1

answer
654

Views

hide an html div for some devices with bootstrap

I use from bootstrap 3, a have a div, i want to show this in only XS and LG devices. how I can do this work?
2 8
1

votes
1

answer
944

Views

jQuery datatable - update “Processing…” message after x seconds?

I'm using a jQuery datatable with Bootstrap v2. When the page first loads, it displays "Processing..." which is good. It also displays this message when I change pages or sort - also good. Most of the time the database on the backend is quick and the Processing message is only on screen for one seco...
user2838966
1

votes
1

answer
152

Views

Is this a correct implementation of LESS?

Problem Ok so i'm trying to use LESS to allow a CSS called bootstrap.min.css to only apply to one part of my code. As when i apply it globally it screws with my styling. Current Implementation My .less defined in header Contents of Boot.less #bootbox { @import (css) "bootstrap.min.css"; } Usage in...
Dan Cundy
1

votes
2

answer
2.6k

Views

boostrap in a rails application, 404 (Not Found)

I've tried to integrate bootstrap following this procedure found on stackoverflow (my rails version is the 3.2.17, this is a difference), so without a gem but just including the bootstrap files in the relevant project directories. Then i've created an HTML page and i put it in the project public di...
AgostinoX
1

votes
1

answer
1.4k

Views

How to create a 3 column responsive design with column 1 as optional and column 3 with minimum width?

I want to create an HTML layout like http://vandelaydesign.com/blog/blog-promotion/best-twitter-practices-for-improving-visibility/ where the left most column is shown only on higher screen sizes, and the right most column has a fixed width of 345px. With bootstrap 3, I have tried the following. But...
Mic
1

votes
1

answer
1.8k

Views

Extending Bootstrap 3 LESS .btn-group not working

Ultimately I'm trying to accomplish the following styles with LESS. show all CD Vinyl I have the following HTML show all CD Vinyl And I have this in a LESS file with imports of Bootstrap 3 .filter { .btn-group; button { .btn; .btn-default; } } When adding .btn and .btn-default to the button work...
julzmon
1

votes
2

answer
1.4k

Views

Unwanted empty space in 3 column grid

I have this grid which has to take up the full width of the container, but it keeps adding unwanted space on the left and right sides. I added a border around the areas: http://i.imgur.com/0FP64kK.png There is a container wrapper div and 3 divs with col-lg-4. The only thing that works so far is to s...
user2475825
1

votes
1

answer
1k

Views

Ajax load from PHP/MySQL generated Bootstrap drop down with variable pass

I have two problems with my code, but because I am not quite sure that they are not related, I'll ask them together. Question one: My button group, static + dynamically generated (by a PHP while loop of a MySQL query) drop down loads on the first page load. However, after loading content with Ajax t...
1

votes
1

answer
12.3k

Views

Bootstrap 3 input Date format

I would like to know without using any plugin/library, is it possible to format bootstrap date input format. My webservice will return ISO.DATE pattern = "yyyy-MM-dd", and bootstrap displays it in MM/DD/YYYY format. I want to change it to DD/MM/YYYY format. Is it possible to do ? I googled and eve...
Mukun
1

votes
2

answer
437

Views

jQuery addClass and removeClass in checkboxes

i am new to jQuery, and i am trying to figure out how to create the jQuery function of the checkboxes, what i want to attain is that, when a user clicked on Yes the checkboxes(which will have a display:none) will have a checkmark. But if a user will click on No the checkmark will be removed. This w...
Nooblike
1

votes
3

answer
7.1k

Views

Bootstrap divs are not next to each other

I'm just experimenting with my first Bootstrap project and but this one in the body: .col-xs-12 .col-md-8 .col-xs-6 .col-md-4 But somehow, the two divs are just below each other and not next to each other aligned as they should be. Does someone has an idea, what I did wrong?
herbigt
1

votes
3

answer
1.3k

Views

Dropdown menu in … a dropdown menu with Bootstrap

I need to put a dropdown menu ... in a dropdown menu in Bootstrap 3. Here is what I tried : Demo. Unfortunately, when I click on the the second dropdown, it is not displayed. How can I display the second dropdown when clicking on it ? Then how (with JS or jQuery) could I handle the change of state o...
Basj
1

votes
2

answer
949

Views

How do I show an error for unauthorized can can access

I am using Bootstrap, which has div class="alert notice" that has a bunch of classes for various notice messages. I also have an AJAX destroy action for a comment, that I have added cancan authorization on. When I try to delete a comment that the current_user doesn't have access to it doesn't work -...
marcamillion
1

votes
1

answer
568

Views

Bottom rounded corners broken in Bootstrap after custom css

I am using the last version 3.3.0, but since 3.2.0 I have this issue. The inferior round corners do not connect. With 3.2.0: With 3.1.1: I just found if I add the following line: background-color: #ffffff !important; and changing the: padding: 15px; to padding: 0px; to the class: .panel-body it bre...
Khrys
1

votes
1

answer
4.1k

Views

Yii2 Where is the CSS file that permits to edit the style of pages

I'm new to Yii2, and i spent the last 2 hours in finding how to change the black top menu bar color of Yii2. In Yii1.1 it was easy, but now i cannot figure out where it is the CSS file. Inspecting element in Chrome says the file is in assets dir, but i edit this file and nothing happens. In the fold...
André Castro
1

votes
2

answer
791

Views

Multi line h1 header based on pixel width

I am trying to create a multiline header based on width. Here is an example: Long title: I am learning html and web design. Also, I love data science. Stephen curry is killing everyone by Me The code above produces a header that spans beyond the browser's right border. I would like to turn it into m...
Koba
1

votes
2

answer
2.3k

Views

Angular Bootstrap alerts do not dismiss on a timeout

I am trying to add alerts from Angular Bootstrap and on timeout dismiss itself. However it does not dismiss itself. Here is the code: angular.module('ui.services').service('AlertService', [ function () { var alerts = []; this.add = function(type, msg){ var self = this; return alerts.push...
looneytunes
0

votes
0

answer
17

Views

Content added after PHP “included” files not positioning correctly

I'm using PHP's "include" function to display static elements on all my pages, but the end result is not displaying as it should. index code: Test Home Library With supporting text below as a natural lead-in to additional content. Go somewhere sidebar code: TestDashboard BD Main Home...
kurisu
0

votes
0

answer
16

Views

jQuery go up button stopped working after worked once

I have putted together some basic website features by applying jquery in a testing page and the features includes smooth scrolling, assign active class to focused section when scrolling up & down web page, shrinking navbar and go back to the top button. However, I realised that all these features st...
Sen123
1

votes
2

answer
56

Views

Footer is not on the bottom of the page

I am creating a webpage using Twitter Bootstrap Framework. I have a footer here and it is on the bottom of the page of every page with a lot of content. But I just created another sub-page and the footer is in the middle of the page like this: http://gyazo.com/45232ab25cdeb7705f9775a969051233. I nee...
user3654045
1

votes
2

answer
37

Views

jQuery disabling a function

On my website I use Bootstrap and have a navigation menu with a dropdown. Now I added some JS code to have the dropdown menu open on hover. $(function() { $("li.dropdown").hover( function(){ $(this).addClass('open') }, function(){ $(this).removeClass('open') } ); }); }, I also use enquire to on...
Paul
1

votes
2

answer
683

Views

Show event for all Bootstrap Modals on the page

I'm trying to do something (in this case some statistics) whenever a Bootrap modal is opened. I know, I can ad an event listener like this to a modal: $('#modal-content').on('shown.bs.modal', function() { alert('do something'); }); But is there a way to have a listener for all modals on the page? Bo...
wawa
1

votes
1

answer
1.8k

Views

How to get Boostrap popover feature on an Html ActionLink in MVC?

I have a table with ActionLinks. I am trying to figure out how to wrap these so that I can display a bootstrap popover feature. Any help is appreciated! Here is what I have before trying to make any changes to allow for Bootstrap-Popover feature: Group Name Description Last Change
Tim
1

votes
2

answer
746

Views

a href link of an image not taking up full image size

I have set up 3 mini-features on an index page but for whatever reason the links only show up on the top 20% of the image on the desktop version. When on mobile the linkable area is perfectly fine. The site's core is running off Bootstrap. Here is a link to the current development version of the si...
user3810523
1

votes
2

answer
8.2k

Views

How to use the bootstrap datepicker?

I'm fairly new to Angular.js (or to web programming in general). I got a pretty basic problem - I'd like to include a date picker in my application. For this purpose, I try to set up the bootstrap datepicker: https://bootstrap-datepicker.readthedocs.org/en/latest/# I have the jQuery and Bootstrap d...
2

votes
3

answer
11

Views

Building grid with setting a height

I am trying to make a grid system with inspiration from this Bootstrap template: Link to template I can see in the code that the 4 big grid elements are controlled with setting a height. I can make the first 2 grid items, but I am lost right now how to make the 2 small columns. Here is the code what...
McDuck4
1

votes
3

answer
939

Views

Change Bootstrap gutter

I'm using Bootstrap v3.3.4, and I'm quite new at it. Is there any easy way to change Bootstrap gutter without recompiling it from its less files or using the website editor or any-other way that has something to do with modifying bootstrap.css? What I'm trying to do is to get a 5px space between 2...
LuTz
1

votes
3

answer
1.6k

Views

Difference between column type in bootstrap

I am really confused about the column in bootstrap. I study bootstrap but I cannot recognize the different between columns type. .col-md-4 .col-xs-4 .col-sm-4 .col-lg-4 .col-sm-offset-2 I understand what the numbers mean. and I understand the 12 column but what is the different between md, xs .......
1

votes
2

answer
3.5k

Views

My Bootstrap modal is not draggable?

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: Search Modal window is created with next code: × Search Your browser does not support iframes. Close .modal-header { cursor: move; } $(d...
user198003
1

votes
1

answer
149

Views

How to store only ID in dropdown Bootstrap

Section Id This is my code, I populate the sections object via JSON and section has id,name. I want to store only section.id in my product.sectionId but it stores both section id and name as below "sectionId":{"id":"Iron Man","name":"Superman"}. I want only the id to be s...
Ferooz Khan
1

votes
4

answer
2.5k

Views

Glyphicons rendering as empty box in one environment, but not the other

I've read quite a few threads at SO on this issue. But none covers my situation. My bootstrap glyphicons show up as a vertical rectangle on production only. They show up fine on dev and staging servers. Exact same copy of files. This is my HTML (razor view) for the glyphicons in question: Cancel...
Stack0verflow
1

votes
1

answer
1.6k

Views

Print view ignores stylesheet

I'm using a JQuery DataTables in a Ruby on Rails project and it does have a wonderful extension Buttons. This can export to PDF, Print, Excel or CVS and also support bootstrap. I'm currently using Chrome Dev Tools to add directly the bootstrap classes "table table-striped table-bordered" to a tag,...
Mr_LinDowsMac
1

votes
3

answer
2.5k

Views

Bootstrap Datepicker strange sizing

I'm using the latest (1.4) version of the Bootstrap Datepicker from Eternicode on my ASP.Net MVC website. The datepicker works fine but for some reason when I click on the month/year "zoom-out" button, the content is squashed into half the horizontal width of the dropdown. I haven't modified the boo...
illya
1

votes
1

answer
3.3k

Views

iframe auto height to 100%

I'm trying to get this iframe to auto-adjust its height but whatever I do, it won't work! I have tried various combinations of using positions and other tricks in css. Somehow I'm missing out on something crucial. I can't use min-height or max-height since the forms will be different everytime and a...
user3362364
1

votes
3

answer
715

Views

Keep hover-triggered twitter bootstrap popover alive while selecting option from a dropdown inside the popover

I'm trying to put a dropdown list inside the twitter bootstrap popover. The popover should be triggered on link's hover event and remain visible while cursor is inside the popover. I used a code posted by @vikas devde from here to make it work, and everything works great except selecting an option f...
Pavlo Opanasenko
1

votes
2

answer
3.4k

Views

Overriding Bootstrap Container Full Width Background Color

I'm trying to have my container divs background color extend to the full width of the browser. Right now I am unable to bypass the container styling set up by default in bootstrap, despite adding my own class to the container. The only styling that works is the background-color. I have also tried th...
cphill
1

votes
2

answer
1.2k

Views

Play video when modal opens, pause when it closes

I have it so you click the image, the video opens up in a modal dialog, and then you have to click play. If you click off the video, it continues to play unless it has finished or has been paused beforehand. If I set the video to autoplay, it will autoplay when the page loads, not when the dialog o...
Alex

View additional questions