Questions tagged [twitter-bootstrap]

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.

Filter by
Sorted by
Tagged with
1138 votes
34 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 ...
Richard's user avatar
  • 63.6k
269 votes
18 answers
708k views

Bootstrap Center Vertical and Horizontal Alignment

I have a page where only form exists and I want form to be placed in the center of the screen. <div class="container"> <div class="row justify-content-center align-items-center"> &...
user348173's user avatar
  • 8,918
488 votes
20 answers
967k 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 ...
canaan seaton's user avatar
963 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" ...
corinem's user avatar
  • 9,785
478 votes
24 answers
871k 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 <...
Luuk Wuijster's user avatar
615 votes
15 answers
1.5m 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 ...
Aliv's user avatar
  • 6,175
614 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 ...
Leon Cullens's user avatar
  • 12.3k
746 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?
Jamal Khan's user avatar
  • 9,411
1229 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 ...
bsr's user avatar
  • 57.6k
316 votes
14 answers
507k views

How can I override Bootstrap CSS styles?

I need to modify bootstrap.css to fit my website. I feel it's better to create a separate custom.css file instead of modifying bootstrap.css directly, one reason being that should bootstrap.css get an ...
Alex's user avatar
  • 3,521
110 votes
3 answers
107k views

Bootstrap row with columns of different height

I currently have something like: <div class="row"> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">...
user3379926's user avatar
  • 3,885
809 votes
6 answers
580k 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"&...
kanarifugl's user avatar
  • 9,937
1247 votes
43 answers
850k 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.
falter's user avatar
  • 13.6k
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 ...
DevC's user avatar
  • 7,105
386 votes
26 answers
328k 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 ...
mraliks's user avatar
  • 4,057
447 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 ...
giulio's user avatar
  • 5,935
356 votes
13 answers
406k 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 ...
johna's user avatar
  • 10.6k
972 votes
15 answers
2.4m 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" ...
user244394's user avatar
  • 13.3k
39 votes
12 answers
60k views

Navbar dropdown (collapse) is not working in Bootstrap 5

I am facing a issue when trying to create a responsive menu or dropdown button with Bootstrap 5.Everything seems ok.The navigation icon & dropdown icon apears.But its not working.When I clicked ...
Sonet Adhikary's user avatar
21 votes
4 answers
16k views

Data-toggle tab does not download Leaflet map

I am using tabs to display clear content, but one of them stopped downloading well since it is in the data-toggle tab. It is a Leaflet map. Here is the code : Navbar code : <ul class="nav nav-...
Ned's user avatar
  • 213
237 votes
18 answers
433k views

How to change Bootstrap navbar collapse breakpoint

Currently when the browser width drops below 768px, the navbar changes to collapsed mode. I want to change this width to 1000px so when the browser is below 1000px the navbar changes to collapsed mode....
Nearpoint's user avatar
  • 7,272
117 votes
9 answers
128k views

Customizing Bootstrap CSS template

I am just getting started with Bootstrap from Twitter and am wondering what the ‘best practices’ is for customization. I want to develop a system that will take advantage of all the power of a css ...
Anne's user avatar
  • 1,253
235 votes
12 answers
653k views

Center content in responsive bootstrap navbar

I'm having trouble centering my content in the bootstrap navbar. I'm using bootstrap 3. I've read many posts, but the CSS or methods used will not work with my code! I'm really frustrated, so this is ...
Nick lK's user avatar
  • 2,647
94 votes
6 answers
197k views

Order columns through Bootstrap4

I have 3 columns which I want to order in different ways on desktop and mobile. Currently, my grid looks like this: <div class="row"> <div class="col-xs-3 col-md-6"> 1 </div&...
Cray's user avatar
  • 5,337
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....
user1012181's user avatar
  • 8,656
212 votes
12 answers
384k views

Bootstrap 3 Navbar Collapse

Is there any way to increase the point at which the bootstrap 3 navbar collapses (i.e. so that it collapses into a drop down on portrait tablets)? These two were applicable to bootstrap 2 but not now!...
timhc22's user avatar
  • 7,233
29 votes
4 answers
50k views

How to extend/modify (customize) Bootstrap with SASS

I want to create a website theme based on Bootstrap. I want to extend Bootstrap's default components and change some of them. For this, I would need access to SASS variables that Bootstrap defines so ...
Victor's user avatar
  • 14.1k
710 votes
67 answers
561k 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 (...
natlines's user avatar
  • 7,506
377 votes
19 answers
348k 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 ...
Matthew Berman's user avatar
597 votes
10 answers
406k 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?
StreetCoder's user avatar
  • 9,961
229 votes
22 answers
180k views

IE8 issue with Twitter Bootstrap 3

I am creating a site using the new Twitter Bootstrap. The site looks fine and works in all required browsers except IE8. In IE8 it seems to be displaying elements of the mobile version but stretched ...
wrayvon's user avatar
  • 2,510
63 votes
10 answers
203k views

Center an element in Bootstrap Navbar

No matter what I try, I can't center something in Bootstrap navbar, any solutions for it? I've tried adding a div, using margin:0 auto; or margin-right:auto; margin-left:auto;, used center-block ...
LuTz's user avatar
  • 1,493
59 votes
6 answers
37k views

Why are Bootstrap tabs displaying tab-pane divs with incorrect widths when using highcharts?

So I'm creating a page with tabbed content using Twitter's Bootstrap, yet the content of my starting active div is always different than that of my other tabs. For example, I am putting in charts ...
VirtualValentin's user avatar
411 votes
47 answers
487k 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/...
Gandalf's user avatar
244 votes
35 answers
349k views

Multiple modals overlay

I need that the overlay shows above the first modal, not in the back. $('#openBtn').click(function(){ $('#myModal').modal({show:true}) }); <a data-toggle="modal" href="#myModal" class="btn ...
Willian Bonho Daiprai's user avatar
265 votes
22 answers
179k views

Twitter bootstrap remote modal shows same content every time

I am using Twitter bootstrap, I have specified a modal <div class="modal hide" id="modal-item"> <div class="modal-header"> <button type="...
Dhruv Kumar Jha's user avatar
335 votes
8 answers
313k views

How do I change Bootstrap 3 column order on mobile layout?

I'm making a responsive layout with a top fixed navbar. Underneath I have two columns, one for a sidebar (3), and one for content (9). Which on desktop looks like this navbar [3][9] When I resize ...
user3000310's user avatar
  • 3,355
5 votes
2 answers
7k views

Bootstrap full-width with 2 different backgrounds (and 2 columns)

It's a little bit hard to explain, that's why i also can't find the answer on Google. I'm working with Bootstrap 3, and i need a full width background image. On top of that 2 transparent color ...
zrero's user avatar
  • 129
605 votes
12 answers
665k 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 ...
BillPull's user avatar
  • 6,913
586 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 ...
Hoa's user avatar
  • 20k
363 votes
16 answers
744k 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:
doovers's user avatar
  • 8,595
232 votes
6 answers
148k views

`col-xs-*` not working in Bootstrap 4

I have not encountered this before, and I am having a very hard time trying to find the solution. When having a column equal to medium in bootstrap like so: <h1 class="text-center">Hello, world!...
YoungCoder's user avatar
  • 2,549
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?
Rui's user avatar
  • 5,910
291 votes
21 answers
1.1m views

Launch Bootstrap Modal on Page Load

I don't know JavaScript at all. The Bootstrap documentation says to Call the modal via JavaScript: $('#myModal').modal(options) I have no clue how to call this on a page load. Using the supplied ...
Brandon's user avatar
  • 3,039
150 votes
28 answers
179k views

How to add "active" class to Html.ActionLink in ASP.NET MVC

I'm trying to add an"active" class to my bootstrap navbar in MVC, but the following doesn't show the active class when written like this: <ul class="nav navbar-nav"> <li>@Html....
Gillespie's user avatar
  • 2,228
15 votes
4 answers
29k views

Bootstrap Rows and Columns - Do I need to use row?

I just need clarification with a certain point in Bootstrap Grid's rows and columns.. On this link: http://getbootstrap.com/css/#grid; the 3rd point under Introduction says: "Content should be placed ...
Rahul Patwa's user avatar
  • 2,339
139 votes
19 answers
247k views

How can I keep selected Bootstrap tab on page refresh?

I am trying to keep selected tab active on refresh with Bootstrap 3. Tried and checked with some question already been asked here but none of work for me. Don't know where I am wrong. Here is my code ...
Code Lover's user avatar
  • 8,178
46 votes
1 answer
88k views

How to make the row stretch remaining height

I'm trying to make the container-fluid and 2nd row to stretch to the remaining height but I couldn't find a way to do it. I have tried setting the align-items/align-self to stretch but didn't work ...
Reddy's user avatar
  • 1,423
43 votes
3 answers
72k views

Bootstrap 4 navbar with 2 rows

I have created a navbar with Bootstrap 4 alpha 6 that has a large brand/icon on the left, and 2 navbar-nav's with links to the right of the icon. One nav has links, and the other nav has icons. It's ...
Tom Michew's user avatar
33 votes
5 answers
56k views

Bootstrap Fluid grid system with different height

I am new in Bootstrap. I want to use the fluid grid system grid with different height and same width like the following image . How can i implement the same? Please help me.
Nandu's user avatar
  • 3,086

1
2 3 4 5
161