Questions tagged [twitter-bootstrap]
Bootstrap (formerly Twitter Bootstrap) is a frontend framework designed to kick-start development of Web apps and sites. For questions related to a version of Bootstrap also use the specific version's tag from "twitter-bootstrap-2", "twitter-bootstrap-3", "bootstrap-4" and "bootstrap-5" tags.
twitter-bootstrap
103,123
questions
1248
votes
43
answers
851k
views
How to make Twitter Bootstrap menu dropdown on hover rather than click
I'd like to have my Bootstrap menu automatically drop down on hover, rather than having to click the menu title. I'd also like to lose the little arrows next to the menu titles.
- 13.6k
1232
votes
34
answers
2.3m
views
Center a column using Twitter Bootstrap
How do I center a div of one column size within the container (12 columns) in Twitter Bootstrap 3?
.centered {
background-color: red;
}
<!-- Latest compiled and minified CSS -->
<link ...
- 58k
1139
votes
35
answers
1.3m
views
How can I make Bootstrap columns all the same height?
I'm using Bootstrap. How can I make three columns all the same height?
Here is a screenshot of the problem. I would like the blue and red columns to be the same height as the yellow column.
Here is ...
- 64.3k
978
votes
17
answers
2.5m
views
How to open a Bootstrap modal window using jQuery?
I'm using Twitter Bootstrap modal window functionality. When someone clicks submit on my form, I want to show the modal window upon clicking the "submit button" in the form.
<form id="myform" ...
- 13.3k
965
votes
26
answers
1.6m
views
vertical-align with Bootstrap 3
I'm using Twitter Bootstrap 3, and I have problems when I want to align vertically two div, for example — JSFiddle link:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" ...
- 9,805
810
votes
6
answers
585k
views
What is sr-only in Bootstrap 3?
What is the class sr-only used for? Is it important or can I remove it? Works fine without.
Here's my example:
<div class="btn-group">
<button type="button" class="btn btn-info btn-md"&...
- 9,947
778
votes
22
answers
1.6m
views
Text-align class for inside a table
Is there a set of classes in Twitter's Bootstrap framework that aligns text?
For example, I have some tables with $ totals that I want aligned to the right...
<th class="align-right">Total</...
- 9,615
747
votes
12
answers
1.3m
views
Change navbar color in Twitter Bootstrap
How would I go about modifying the CSS to change the color of the navbar in Twitter Bootstrap?
- 9,461
714
votes
68
answers
574k
views
Bootstrap modal appearing under background
I have used the code for my modal straight from the Bootstrap example, and have included only the bootstrap.js (and not bootstrap-modal.js). However, my modal is appearing underneath the grey fade (...
- 7,546
645
votes
25
answers
1.3m
views
How to set up fixed width for <td>?
Simple scheme:
<tr class="something">
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
I need to set up a fixed width ...
- 47.3k
620
votes
15
answers
1.6m
views
Bootstrap NavBar with left, center or right aligned items
In Bootstrap, what is the most platform-friendly way to create a navigation bar that has Logo A on the left, menu items in the center, and Logo B on the right?
Here is what I've tried so far, and it ...
- 6,225
619
votes
16
answers
1.1m
views
Passing data to a bootstrap modal
I've got a couple of hyperlinks that each have an ID attached. When I click on this link, I want to open a modal ( http://twitter.github.com/bootstrap/javascript.html#modals ), and pass this ID to the ...
- 12.4k
611
votes
27
answers
883k
views
Twitter Bootstrap Form File Element Upload Button
Why isn't there a fancy file element upload button for twitter bootstrap? It would be sweet if the blue primary button was implemented for the upload button. Is it even possible to finesse the upload ...
- 8,946
606
votes
12
answers
668k
views
Bind a function to Twitter Bootstrap Modal Close
I am using the Twitter Bootstrap lib on a new project and I want for part of the page to refresh and retrieve the latest json data on modal close. I dont see this anywhere in the documentation can ...
- 6,933
598
votes
24
answers
1.1m
views
Disable click outside of bootstrap modal area to close modal [duplicate]
I am making a bootstrap website, with a couple of Bootstrap 'Modals'.
I'm trying to customize some of the default features.
Problem is this;
You can close the modal by clicking on the background.
Is ...
- 6,957
598
votes
10
answers
410k
views
What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?
What is the difference among col-lg-* , col-md-* and col-sm-* in Twitter Bootstrap?
- 10k
591
votes
16
answers
790k
views
Prevent Bootstrap Modal from disappearing when clicking outside or pressing escape? [duplicate]
I'm using the Twitter Bootstrap modal as a wizard window, and would like to prevent the user from closing it when clicking outside of the modal or when pressing escape. Instead, I want it to be closed ...
- 24.5k
587
votes
24
answers
957k
views
How do you get centered content using Twitter Bootstrap?
I'm trying to follow a very basic example. Using the starter page and the grid system, I was hoping the following:
<div class="row">
<div class="span12">
<h1>Bootstrap ...
- 20.2k
583
votes
29
answers
352k
views
Disallow Twitter Bootstrap modal window from closing
I am creating a modal window using Twitter Bootstrap. The default behavior is if you click outside the modal area, the modal will automatically close. I would like to disable that -- i.e. not close ...
- 5,881
553
votes
8
answers
505k
views
What is the difference between Bootstrap .container and .container-fluid classes?
Just downloaded 3.1 and found in the docs...
Turn any fixed-width grid layout into a full-width layout by changing your outermost .container to .container-fluid.
Looking in bootstrap.css, it appears ...
- 6,867
549
votes
30
answers
1.6m
views
Close Bootstrap Modal
I have a bootstrap modal dialog box that I want to show initially, then when the user clicks on the page, it disappears. I have the following:
$(function () {
$('#modal').modal(toggle)
});
<...
- 9,379
526
votes
12
answers
492k
views
What is Bootstrap?
There are a lot of questions here related to Bootstrap. I see a lot of people using it. So I tried to research it, and I found the official Bootstrap site, but there was only a download section and a ...
- 6,607
514
votes
21
answers
831k
views
Twitter Bootstrap - add top space between rows
How to add margin top to class="row" elements using twitter bootstrap framework?
- 49.4k
511
votes
6
answers
698k
views
Meaning of numbers in "col-md-4"," col-xs-1", "col-lg-2" in Bootstrap
I am confused with the grid system in the new Bootstrap, particularly these classes:
col-lg-*
col-md-*
col-xs-*
(where * represents some number).
Can anyone please explain the following:
How that ...
- 8,819
503
votes
21
answers
1.3m
views
How can I get my Twitter Bootstrap buttons to right align?
I have a simple demo here:
<ul>
<li>One <input class="btn pull-right" value="test"></li>
<li>Two <input class="btn pull-right" ...
- 43.2k
494
votes
20
answers
986k
views
Vertical Align Center in Bootstrap 4 [duplicate]
I am trying to center my Container in the middle of the page using Bootstrap 4. I have been unsuccessful thus far. Any help would be appreciated.
I have built it at Codepen.io so you guys can play ...
- 6,808
483
votes
24
answers
884k
views
Bootstrap align navbar items to the right
How do I align a navbar item to right?
I want to have the login and register to the right.
But everything I try does not seem to work.
This is what I have tried so far:
<div> around the <...
- 6,768
457
votes
29
answers
1.2m
views
Table fixed header and scrollable body
I am trying to make a table with fixed header and a scrollable content using the bootstrap 3 table.
Unfortunately the solutions I have found does not work with bootstrap or mess up the style.
Here ...
- 6,035
440
votes
19
answers
918k
views
Responsive image align center bootstrap 3
I do a catalog using Bootstrap 3. When displayed on tablets, the product images look ugly because of their small size (500x500) and a width of 767 pixels in the browser. I want to put the image in the ...
- 6,454
427
votes
8
answers
1.4m
views
Left align and right align within div in Bootstrap
What are some of the common ways to left align some text and right align some other text within a div container in bootstrap?
e.g.
Total cost $42
Above total cost should be left ...
- 13.3k
421
votes
36
answers
409k
views
Select2 doesn't work when embedded in a bootstrap modal
When I use a select2 (input) in bootstrap modal, I can't type anything into it. It's like disabled? Outside the modal select2 works fine.
Working example: http://jsfiddle.net/byJy8/1/
code:
<!-- ...
- 24.9k
414
votes
47
answers
489k
views
Five equal columns in twitter bootstrap
I want to have 5 equal columns on a page I am building and I can't seem to understand how the 5 column grid is being used here:
http://web.archive.org/web/20120416024539/http://domain7.com/mobile/...
- 1
405
votes
5
answers
179k
views
Fluid or fixed grid system, in responsive design, based on Twitter Bootstrap
I'm getting confused about the various options in the twitter bootstrap grid, and how they go together.
To begin with, you can have an ordinary fixed container, or a container-fluid.
Then either ...
- 23.1k
401
votes
10
answers
1.1m
views
How to vertically center a container in Bootstrap?
I'm looking for a way to vertically center the container div inside the jumbotron and to set it in the middle of the page.
The .jumbotron has to be adapted to the full height and width of the screen....
- 8,656
392
votes
29
answers
905k
views
Bootstrap 3 Navbar with Logo
I want to use the Bootstrap 3 default navbar with an image logo instead of text branding. What's the proper way of doing this without causing any issues with different screen sizes? I assume this a ...
- 11.4k
390
votes
17
answers
522k
views
Twitter Bootstrap 3: how to use media queries?
I'm using Bootstrap 3 to build a responsive layout where I want to adjust a few font sizes according to the screen size.
How can I use media queries to make this kind of logic?
- 5,910
387
votes
26
answers
934k
views
Remove padding from columns in Bootstrap 3
Problem:
Remove padding/margin to the right and left of col-md-* in Bootstrap 3.
HTML code:
<div class="col-md-12">
<h2>OntoExplorer<span style="color:#b92429"&...
- 5,913
386
votes
26
answers
329k
views
Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink
I'm developing a web page in which I'm using Twitter's Bootstrap Framework and their Bootstrap Tabs JS. It works great except for a few minor issues, one of which is I do not know how go directly to ...
- 4,057
380
votes
19
answers
350k
views
twitter bootstrap navbar fixed top overlapping site
I am using bootstrap on my site and am having issues with the navbar fixed top. When I am just using the regular navbar, everything is fine. However, when i try to switch it to navbar fixed top, all ...
- 8,581
380
votes
12
answers
624k
views
to call onChange event after pressing Enter key
I am new to Bootstrap and stuck with this problem. I have an input field and as soon as I enter just one digit, the function from onChange is called, but I want it to be called when I push 'Enter when ...
- 4,773
371
votes
16
answers
656k
views
What is the easiest way to disable/enable buttons and links (jQuery + Bootstrap)
Sometimes I use anchors styled as buttons and sometimes I just use buttons. I want to disable specific clicky-things so that:
They look disabled
They stop being clicked
How can I do this?
- 19.1k
363
votes
16
answers
746k
views
Add Bootstrap Glyphicon to Input Box
How can I add a glyphicon to a text type input box? For example I want to have 'icon-user' in a username input, something like this:
- 8,615
358
votes
13
answers
410k
views
Missing visible-** and hidden-** in Bootstrap
In Bootstrap v3 I often use the hidden-** classes combined with clearfix to control multi column layouts at different screen widths. For example,
I could combine multiple hidden-** in one DIV to ...
- 10.7k
357
votes
27
answers
860k
views
How to hide Bootstrap modal with javascript?
I've read the posts here, the Bootstrap site, and Googled like mad - but can't find what I'm sure is an easy answer...
I have a Bootstrap modal that I open from a link_to helper like this:
<%= ...
- 20.1k
357
votes
46
answers
631k
views
How to remove focus around buttons on click
My buttons all have a highlight around them after I click them. This is in Chrome.
<button class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</...
- 16k
352
votes
12
answers
268k
views
How to include scripts located inside the node_modules folder?
I have a question concerning best practice for including node_modules into a HTML website.
Imagine I have Bootstrap inside my node_modules folder. Now for the production version of the website, how ...
- 6,143
349
votes
9
answers
561k
views
Hiding elements in responsive layout?
Looking through bootstrap it looks like they support collapsing the menubar items for smaller screens. Is there something similar for other items on the page?
For example, I have a along with nav-...
- 3,899
347
votes
11
answers
461k
views
Bootstrap dropdown sub menu missing
Bootstrap 3 is still at RC, but I was just trying to implement it. I couldn't figure out how to put a sub menu class. Even there is no class in css and even the new docs don't say anything about it
...
- 7,185
345
votes
36
answers
712k
views
Flushing footer to bottom of the page, twitter bootstrap
I am generally familiar with the technique of flushing a footer using css.
But I am having some trouble getting this approach to work for Twitter bootstrap, most likely due to the fact that Twitter ...
- 36.1k
338
votes
14
answers
432k
views
Making button go full-width?
I want a button to take up the full width of the column, but having difficulties...
<div class="span9 btn-block">
<button class="btn btn-large btn-block btn-primary" type="button">...
- 6,653