Questions tagged [twitter-bootstrap-3]
Bootstrap 3 is the third generation of the front-end framework allowing for speedier web development with an attractive look and feel. Use with the [twitter-bootstrap] tag
0
votes
1answer
9 views
Bootstrap responsive div with order
i have 3 div. In PC, i want to show it same the picture. But when responsive, i want to show with order 1 -> 2 -> 3. How can i do it, please me
<div class="row">
<div class="col-md-6 ...
0
votes
1answer
21 views
When loading 5000 or above entries in a Dropdown, it is taking time to load to few seconds
<div class="row invoice-info">
<div class="col-sm-4 invoice-col">
<b>To,</b>
<address>
...
0
votes
1answer
41 views
How to make bootstrap modal to vertical align: top
I am using bootstrap modal with Boostrap 3 patch for for bootstrap-modal. The Modal is good after this patch. But I need to align it vertically top not on the middle.
The Boostrap 3 patch has below ...
1
vote
4answers
2k views
Center Navbar in Bootstrap [duplicate]
How do you center the menu with bootstrap?
HTML:
<nav class='navbar navbar-default'>
<div class='container-fluid container'>
<div class='navbar-header'>
<a ...
980
votes
29answers
1.8m 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.
Please see the starter fiddle.
<body class="container">
<div class="col-lg-1 col-...
0
votes
2answers
27 views
Bootstrap3 nav-bar fixed to the top of the page is blocking the top content of the page below the bar, how do I fix this?
In the image below you will see that my navbar is at the top of the page however it is slightly covering the heading that is supposed to be beneath it. How do I fix this?
My code for the navigation ...
-1
votes
0answers
14 views
how to use icon on a button (glyphicons) in play framework
i had something like this
<button id="search-submit-button" type="submit" name="search-submit-form" class="btn">
<i class="fas fa-search"></i>
</button>
here i have ...
0
votes
2answers
21 views
Node.js express request - Fade in and out bootstrap modal on request error
I'm using node.js express express-session and request. If a request has an error I fade in and out a bootstrap alert message. This works. But if I want to fade in and out a bootstrap modal ... this ...
0
votes
0answers
13 views
Dynamically resizing width in two column sub menu
I don't what to write in to title. But I trying create two columns sub menu in boostrap. I separate columns as col-lg-auto but class row created columns with width col-lg-12 and my columns sub menu ...
1
vote
0answers
18 views
Resize column width in bootstrap
I want to resize column width in bootstrap.
Curently, I have 3 <div> with col-md-4. But when one of the <div> hides then I want to change another 2 <div>'s into col-md-6.
Is this ...
2
votes
1answer
1k views
How to darken main content/canvas of site when side menu appears?
I am currently using Bootstrap 3, specifically the Jasny Off Canvas Reveal Menu template, see here:
https://jasny.github.io/bootstrap/examples/navmenu-reveal/
All is working great but what I would ...
117
votes
14answers
237k views
Bootstrap 3 Collapse show state with Chevron icon
Using the core example taken from the Bootstrap 3 Javascript examples page for Collapse,
I have been able to show the state of collapse using chevron icons.
I have this working using:
$('#accordion ...
-2
votes
0answers
20 views
How to handle redirect with jQuery load
I'am using a simple jQuery code to load a bootstrap modal window:
$('#modal').modal('show').find('#modalContent').load(url);
However the url sometimes returns with a redirect (302). In that case the ...
0
votes
3answers
32 views
Why is Bootstrip grid not working, but buttons are?
Here is the php with bootstrap classes (in the single.php file of my wordpress theme)
<?php get_header(); ?>
<button class="btn-danger">Hello Bootstrap World</button>
<div ...
0
votes
0answers
17 views
Bootstrap select dropdown with collapsable sub options
I am trying to achieve bootstrap select drop-down with collapsible sub options.
for example : The select drop-down should display the OPTION as "Vehicle", "House" etc. where in the option Vehicle ...
0
votes
2answers
14 views
Bootstrap fixed nav-bar doesn't stay width of the page when scrolling?
My bootstrap nav-bar is fixed to the top of the page and it is the width of the page as displayed in the image below.
However when I scroll down the page my fixed nav bar suddenly changes size and it ...
1
vote
1answer
30 views
How to make div inside bootstrap column all have the same height?
Let's say I have this structure:
<div className="row">
<div class="col-sm">
<div>TEST</div>
</div>
<div class="col-sm">
<div>TEST<...
21
votes
5answers
25k views
Bootstrap 3 Dropdown on iPad not working [closed]
I have a simple Bootstrap 3 dropdown that is working in all browsers that I've tested (Chrome, FF, IE, Chrome on Android) but it is not working in Safari or Chrome on the iPad (ios 7.04).
I thought ...
0
votes
3answers
59 views
hyperlink: set onClick
Good day,
I have an hyperlink
Click in this ¿ <a href="#" id="hr" class="alert-link"><strong>Link</strong> ?</a>
I want to use a bootstrap alert that OnClick uses a ...
1
vote
2answers
406 views
Change Bootstrap 3 Carousel options on event
I'm trying to instantiate the Bootstrap 3 carousel with one behavior, and then change that behavior on an event.
More specifically, the initial state of the carousel will cycle through all slides ...
0
votes
1answer
22 views
Toggle Icon in Form Field
I'm working on a login screen where I need to display the password requirements and matching status. Currently, the password requirements are working as needed, but the problem I am having is with the ...
1
vote
3answers
37 views
Bootstrap Popover: Hover/Click and Close on Outside Click, but Revert to Hover Mode
In the snippet below, I have a Bootstrap Popover which supports both Hover & Click modes. On Click, the window stays open and should close either on (1) self-click (link again), or (2) any outside ...
1
vote
2answers
34 views
Change the Size of a Bootstrap Drop Down Menu
I have a simple html select box with a lots of options (round about 100).
Because the select box has so much options, it uses the complete desktop height for showing the options, but I want to add a ...
0
votes
1answer
2k views
Reusing a single modal to display dynamic content for a number of modules in angular js
I'm looking to create a stateful app that uses a common modal for a number of modules. On clicking items in a menu, the modal window should open and then I'm hoping to populate the modal with dynamic ...
-6
votes
0answers
20 views
Make a website that generate another website like blooger and wordpress blogs
I want to make a website that generates a websites (the user will declare how his website will look like) .
1) What is the programming languages I need to use ?
2) To make the websites responsive ...
2
votes
2answers
90 views
Switching from an open Bootstrap 3 dropdown menu to a different dropdown menu requires an extra tap on mobile
When a bootstrap dropdown is open, opening another dropdown requires two taps. This is because of an overlaying div that swallows all other input in order to close the first dropdown.
This is a known ...
0
votes
0answers
13 views
Bootstrap navbar not pulling right
I have just come across a strange issue, my navbar is not pulling text to the right anymore:
HTML:
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#...
0
votes
1answer
24 views
Add a scrollbar to the table which is having a footer
I am new to web development. I am using react js . Here I have a table
which is like ,
Now, my code is ->
import React from 'react';
import { connect } from 'react-redux';
import { Table } from '...
-1
votes
2answers
52 views
Make others text div change size when one text div changes [duplicate]
I have the following text divs.
.owners{
margin: 0px 20px 0px 20px;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://...
1
vote
0answers
32 views
Monitoring and reporting cumulative elapsed time to read a Popover
I'm using a library called Screentime to monitor the activity of users. One way I want to monitor user activity is by seeing how long they keep a popover active to read the text. The problem is that ...
7
votes
5answers
9k views
Bootstrap icons are loaded locally but not when online
Basically I got the following HTML:
<button class="disabled btn-primary btn" type="submit" disabled="">
<i class="glyphicon glyphicon-ban-circle"></i>
Log in
</button>
...
azure
0
votes
0answers
36 views
How to make Bootstrap carousel show n images depending on the screen width
I'm trying to make carousel of images that allows the user to navigate left/right.
I have managed to make it work on my standard resolution with code at the bottom of the post (bootstrap 3.3.7).
...
0
votes
1answer
12 views
How to edit bootstrap tab text without it being set as current and functioning?
I have tabs that are being dynamically created on the fly and am needing to be able to edit any of those tabs text, which I can do. However, I have run into a bit of change to be added and that is ...
0
votes
1answer
21 views
Fixed Sidebar Scroll not working properly
I made a fixed sidebar after the navbar in bootstrap. There is an issue in it when i used top:0 it works fine when i add new blocks in the sidebar but when I remove top:0 from the .sidenav class the ...
7
votes
6answers
1k views
jQuery UI Dialog on resizing shrinks the content of the Dialog
I have seen a strange behavior of jQuery UI Dialog and I am not able to understand:
What the issue is? or
What am I doing wrong here? or
Is this a known bug?
Steps followed to replicate the issue:
...
0
votes
1answer
41 views
How to control navbar spacing?
I would like my navbar elements to not take up the width of the whole page. I've done research to try find the best way to do this but I get a load of different solutions. I would like my navbar to ...
0
votes
1answer
39 views
Bootstrap looping a rows on an odd col
I'm using bootstrap and the content coming in is an xml feed which changes so I may have an odd number or an even number of cols. I'm using col-sm-6 and I'm trying to close the row off for both an odd ...
0
votes
1answer
24 views
List of search results made using input in bootstrap3 navbar
In my project I have a navbar of the bootstrap3, and in this navbar I have an input to perform search in the contents of the system, when I perform a digit I must appear a list exactly under the input,...
0
votes
1answer
62 views
Bootstrap Date Time Picker Gap between the calendar icon and the text field
In my date time picker i have a gap as seen in the picture how can i fix this? I am using .Net MVC. With bootstrap v3.3.7 and Bootstrap.v3.Datetimepicker.CSS 4.17.45.
Image of the gap:
Here is the ...
0
votes
1answer
12 views
Bootrap 3 carousel slide control by link of another page
THe services page http://testingatenspree.com/elusmock2/service.html has 6 services and it should go to specific service to the slider.
I tried anchor tag jump and added slider section with an id. ...
4
votes
4answers
31k views
How to put multiple Bootstrap inputs on same line?
I have the following HTML:
<input type="text" class="form-control" name="watch" value="" placeholder="watch">
<div class="input-group">
<span class="input-group-addon">$</...
7
votes
4answers
22k views
Center text and container inside a circle
I have a Bootply here: http://www.bootply.com/XLGE6Vpjov
I need the 3 circles centered in there containers and then I need the text inside to be centered horizontally and verticaly.
How can I center ...
2
votes
3answers
1k views
Popover overlay in OpenLayers 3 does not extend beyond view
In the OpenLayers overlay example:
http://openlayers.org/en/v3.11.2/examples/overlay.html
If you click near the top of map most of the overlay is hidden. Is there a CSS trick, or an OpenLayers ...
0
votes
2answers
27 views
Bootstrap footer is overlapping the content on small screens?
I have an issue with my bootstrap layout.
Basically, everything looks OK on larger screens but on smaller screens my footer overlaps the content or the content overlaps the footer!
This is the code ...
1
vote
1answer
441 views
Input group addons altering the total width of an input group
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 ...
0
votes
3answers
562 views
Convert bootstrap3 DateTime picker to C# datetime [duplicate]
I use bootstrap Datetime picker v3 with following option
$(".form_datetime").datetimepicker({
autoclose: true,
isRTL: Metronic.isRTL(),
format: "dd MMyyyy hh:ii",
...
5
votes
2answers
14k views
Boostrap: How to “stick” a button over an image when re-sizing
I have an image in which I need to put a button over, the problem is that I don't know how to place the button and automatically re-size and position it when making the browser smaller, right now I ...
2
votes
2answers
42 views
bootstrap 3 increase text background color size and toggle on each tab
This is my first work with css and Bootstrap. As shown in attached image, I want the green color of text TEST to be green to be applied to that all yellow highlighted rectangle. how can I do that? ...
1
vote
1answer
39 views
Carousel Items not appearing in horizontal in Bootstrap
I trying to create a multi column bootstrap carousel, but all items are appearing in vertical, PFB my html code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta ...
74
votes
3answers
83k views
How to display tables on mobile using Bootstrap?
My tables display fine on desktop, but once I try to view the mobile version my table ends up being too wide for the mobile device screen. I am using a responsive layout.
How can I set table widths ...
