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
21,481
questions
0
votes
0
answers
24
views
Navigate to a div section on same page not working properly?
I have a top bar containing 5 links that redirects to a div on a click on the same page, but whenever I clicked on the link it redirects to the exact same div but in the middle of the divs content not ...
1
vote
0
answers
21
views
Turning an auto-expanding table row into a 'click to expand' row
I have a tablecompiled in Slim, which displays incoming messages in a row called 'events'.
My current issue is that this row automatically adjusts to expand to account for long messages, which creates ...
0
votes
0
answers
20
views
Datetimepicker - How to set stored database date instead of today date
I am using 'bootstrap3-datetimepicker-rails' gem and I would like set my stored date in the input datetimepicker instead of today date.
This is my code:
$(document).on('dp.change','input....
1
vote
2
answers
13
views
Deleting a dynamically created bootstrap form group with a Jquery onclick event
I have dynamically created a form-group with an input field and a delete button next to it, this button needs to remove: the button, the div it is contained in and the div that that div is contained ...
0
votes
0
answers
10
views
Bootstrap is interfering with my change function of select
I do have a trouble with Bootstrap. This is my code for my form; when something is selected, then another div according to this selected value appears. This works fine (https://jsfiddle.net/jtur4L1k/)....
0
votes
0
answers
8
views
Bootstrap 3 carousel buttons and indicators not working
My bootstrap 3 carousel buttons are totally broken. I copy and pasted the exact code from w3schools bootstrap 3 guide, but after adding images and captions the slides don't work. The automatic start ...
0
votes
0
answers
27
views
Bootstrap table how to change column value by jquery
I am using bootstrap table to display my data. I used a data formatter on a column like:
formatter: function (value, row, index) {
var html = $.common.sprintf("<input class='form-control' ...
0
votes
0
answers
15
views
How do I add shadow in Bootstrap 3 Tooltip?
I'm trying to a shadow in Bootstrap 3 Tooltip.
I have a code here: https://codepen.io/aceraven777/pen/ExQXOWq
When I try to add a shadow, its covering the arrow:
.tooltip {
box-shadow: rgb(118 118 ...
0
votes
1
answer
21
views
Why is my Bootstrap div Alignment not working?
I have been trying to make a portfolio website for myself.
But for 'My works' div when I apply the Bootstrap class, I am not getting the result as I am expected to get. The alignment of the div is not ...
0
votes
1
answer
16
views
Rails 6 Bootstrap v3.4.1, jQuery 1.12.4 popover function is showing the Title but not the Body?
I am re-writing an application called FILTERtrak and it has been going great so far. I have added a subscription model to it, enhanced it in all kinds of ways and have really started to like Ruby and ...
1
vote
0
answers
103
views
Bootstrap carousel slider as a row
I am trying to build a bootstrap (3.3.7) carousel from scratch, similar to this one:
https://littleseabear.com
I have managed to get the code to call posts but currently it shows the slides as a grid. ...
1
vote
0
answers
17
views
Split up bootstrap 3 typeahead search
I'm currently working on implementing a search autofill and they have been using bootstrap typeahead for almost all their autofill functions. The problem with the one I'm currently working on is it ...
0
votes
0
answers
15
views
Bootstrap 3 to 4 migration issue in plugins
I am using nth-tabs for creating dynamic tab this plugin is working fine in Bootstrap V3 but it will gives error when I am using Bootstap V4. Tab close option is not working. Giving error
Uncaught ...
0
votes
0
answers
11
views
Twitter Firebase Authentication
I am using the Firebase authentication functionality. I am using Facebook, Google, Twitter and email and password as providers. The default functionality is to use a single email by authentication.
If ...
0
votes
1
answer
23
views
Cannot get div items ordered out of sequence with bootstrap
I have included the bootstrap 3.4.1 in my Angular 12 project and placed this HTML on my app.component page:
<div class="container">
...
<div class="d-flex row">
...
-1
votes
0
answers
15
views
Bootstrap Nav and cards conflicting
please help - my navigation looks as it should but when i implement cards these don't work - are there different versions of bootstrap that are over-riding each other ?
if i use the following in the ...
0
votes
0
answers
18
views
Convert List group to tabs in bootstrap
I have dynamics powerapps portals that renders the tabs like below but my requirement is to change it to look like tabs. Powerapps portals uses bootstrap 3.3v.
the markup it generates is
<ol ...
0
votes
0
answers
41
views
Toast not displaying with bootstrap and vue (not bootstrap-vue)
I want to toast as notification to my web app with the help of bootstrap 5 and vue 3 and I'm trying to use template code which is given in the bootstrap official documentation but its not working in ...
0
votes
0
answers
35
views
The bootstrap-select element gets hidden by parent element
Hello, I am using the bootstrap-select.js plugin in my project the problem with this select element is that when I open the dropdown it hides under the parent element and creates a scroll, I want to ...
1
vote
1
answer
28
views
How can I change the text inside my dynamically created button's <span> with jQuery?
I have reviewed How can I change the text inside my <span> with jQuery? to get where I am. However, that does not cover dynamically created buttons.
I am creating buttons dynamically which ...
0
votes
1
answer
29
views
How to make a Jumbotron w/ background image responsive? (Bootstrap 3)
I cannot figure out how to make the jumbotron with a bg image responsive. I try to resize the tab but the image does not move with it. Not sure if that makes sense. I want the full image to display ...
0
votes
0
answers
18
views
Installing a GetBootstrap website Template, in Visual Studio 2022
Has anyone installed a GetBootstrap website Template, in Visual Studio 2022 for use in generating a web app?
the guide at GetBootstrap seems to assume linux but I'm new and its not clear to me.
Any ...
0
votes
1
answer
46
views
How do I extend my navbar banner below my navbar row?
I'm rebuilding a new website and upgrading from Bootstrap 3.3 to Bootstrap 5. I'm re-creating the look and feel of the navbar seen here. I've gotten very close but am having trouble with the banner. ...
-1
votes
1
answer
132
views
Bootstrap 3 Upgrade to Bootstrap 5 NavBar Issue
I am responsible for upgrading Bootstrap from 3 to 5, and allow some minor UI changes, like px-wise changes. However I am suffering from navbar transition like the below discussed.
Here is the ...
0
votes
0
answers
24
views
Can I close a bootstrap modal (v3) and link to a different site, without using JS?
I've created a modal (Bootstrap v3) on a site that doesn't allow for any Javascript, just HTML and CSS (Bootstrap v3). I'd like to have a button at the bottom that users can click to close the modal, ...
1
vote
2
answers
57
views
how to change color of links in dropdown menu in navbar toggle
My navigation bar has a dropdown menu that looks like this.
when I resize my browser to get the small device version it looks like this.
I want to change the color of links in the dropdown(services) ...
0
votes
0
answers
45
views
why some CSS properties are not there after running it
I am learning CSS and I have created a button which is a dropdown and then added display:block and width:100% to it, it does not do anything. also when I check page source after running it the ...
0
votes
0
answers
17
views
navbar-toggle works great when run from computer, but not when hotsted on github
So I'm working my way through a coursera course.. If I run the same exact page hosted on my computer everything is great... If on githubs "pages" the navbar-toggle acts as though it has no ...
0
votes
0
answers
22
views
How do I control the size of my Bootstrap `<div class="alert alert-info"> </div>` when the page dimensions changes?
In my HTML app design. I used the Bootstrap <div class="alert alert-info"> </div> to hold some information.
I designed my entire UI while in the Chrome Developer Tools toggle ...
0
votes
0
answers
7
views
How to set custom width of bootstrap modal dialog?
Bootstrap version: v3.3.4
Using this statement to open a dialog -
var modalInstance = $modal.open({
templateUrl: 'hello-world.html',
size: 'lg'
I want to create extra-large or with the ...
0
votes
1
answer
20
views
bootstrap collapse collapses when clicking on calendar icon
I have a bootstrap panel-collapse as follows
<div class="panel-heading">
Business/Financial Information <a data-toggle="collapse" href="#...
1
vote
1
answer
56
views
Add separate button action for Bootstrap 3 collapse panel
In the following example when I click Add button the panel started collapsing along with panel.
But I want the panel should not collapse when I click add button. Because I have to write different ...
0
votes
1
answer
65
views
migrating from bootstrap 3.0.2 to 3.4.1
i searched google but couldn't find any migration guide.
I've working website that is in Bootstrap 3.0.2, I am upgrading it to Bootstrap 3.4.1 because of the vulnerabilities found in <3.4.1, I know ...
0
votes
1
answer
51
views
how to fix navbar size to its original
I am trying to make a navbar with dropdown in it. when i added dropdown menu, my navbar's height got big although i commented the dropdown menu code but navbar size didn't went to it's original size. ...
0
votes
0
answers
21
views
data-toggle only works after browser magnification
I have a cshtml file that has this snippet :
<div id="@accordionId" class="customToolTip">
<div title="Sample" align="right" class="something&...
0
votes
0
answers
13
views
Add different classes based on responsive breakpoints in Bootstrap 3
Is there no better way to handle this in Bootstrap 3 ?
I want to add class btn-full when its on visible-xs and class btn-xl on hidden-xs
<div class="visible-xs">
<a href=&...
0
votes
0
answers
33
views
handle Onclick event from Vue to Vuex
I'm switching from vue to vuex and I'm having trouble implementing an onclick event. I'm using bootstrap collapse to create 3 div. Each div has a button to show the collapsible elements inside. With ...
1
vote
0
answers
25
views
Toggle navigation button not displaying menu, about and awards when reducing the size of the web-page to below 768px breakpoint
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
...
1
vote
1
answer
35
views
Calling collapse manually doesn't trigger at certain times
On clicking I Agree, the current panel collapses and the next panel opens.
But let's say you click on Menu Item 3 and then Menu Item 4 and then back to Menu Item 3 and click I Agree, Menu Item 3 ...
0
votes
1
answer
53
views
How can I make sure that the content in my bootstrap container is never larger than the container itself
What I am trying to do is have 3 rows in one container. The first one is the header. The last one the footer. In the middle row there should be two columns. The left column should contain many cards ...
0
votes
4
answers
282
views
Radio Button Does Not Unchecked When Clicking On Itself
I'm using Bootstrap 3 and I have a radio button like this:
<input type="radio" name="attr_var" class="minimal">
Add To Attribute
Users can properly click on it for ...
0
votes
1
answer
41
views
Auto Adjust height of multiline editor for in MVC using bootstrap
I have below editorfor which is multiline, I need to auto adjust height when user starts adding multiple email address in separate lines using bootstrap. Any code example is highly appreciated.
Model:
...
1
vote
0
answers
12
views
CSS's native transition doesn't work once I add Bootstrap 3's stylesheet
This works, but the moment I add Bootstrap 3, (which I need to as it's required in an existing project) it no longer fades in and out.
<!DOCTYPE html>
<html lang="en">
<head&...
0
votes
0
answers
7
views
I want to include carousel only in specific page css in Jekyll
I am using bootstrap v3.4.1
I decided to take out the carousel css and put it in it's own css file. _assets/stylesheets/vendor/carousel.css
Now I'm trying to put it in the individual page css
@charset ...
0
votes
0
answers
19
views
Vertical Align label with radio input in Bootstrap 3
How do I vertically align the text of a label with the input radio using Bootstrap 3 ? Here I had to manually specify the margin-top.
<style type="text/css">
div.radio label input[type=...
0
votes
1
answer
37
views
How do I isolate a line of html so that the javascript doesn't effect it and consequently close the nav bar when clicked?
I have a nav bar that closes and scrolls down the page when clicked. How do I isolate just the "Info" link which has a dropdown menu so that it doesn't close the nav bar when clicked? Here ...
1
vote
0
answers
52
views
Bootstrap file input does not show the image name which is browsed
I'm using Admin LTE theme and I have added this input for uploading image:
<div class="form-group">
<label for="sendImage">Send Image</label>
<div ...
0
votes
0
answers
26
views
Convert less to scss - to extend a clearfix
I have a LESS file which I need to convert to SCSS:
.container-fixed(@gutter: @grid-gutter-width) {
padding-right: ceil((@gutter / 2));
padding-left: floor((@gutter / 2));
margin-right: auto;
...
0
votes
2
answers
220
views
The HTML table sticky columns and rows stop working when I add css to keep the table within the page boundaries
I have a large table that is scrolling on the horizontal and vertical with the first column sticky and the three header rows sticky. This works to a point. However the table extends past the right ...
1
vote
1
answer
205
views
Creating an ecommerce product image carousel with 2 images in Bootstrap
I've searched Google for a Bootstrap snippet to be able to display two images when clicking a nav bar as displayed in the image below but I can't find any examples. Do you have any examples of how to ...