Questions tagged [twitter-bootstrap]

36535 questions
1

votes
2

answer
1.1k

Views

Bootstrap modal x button out of position

I'm setting up a Boostrap modal and what I've put below is fairly basic code, but the x close button on the modal is out of position. The button is sitting down lower than the vertical center of the div. I can't see anywhere that this might be affected? Monsta Desk $(window).on('load',function(){...
Daniel Williams
1

votes
1

answer
3.3k

Views

Bootstrap 4 Carousel columns instead of carousel-item

Does Bootstrap support displaying grid columns or rows in Carousel instead of carousel-item -s? The idea is to have a complex grid column structures that interchange with each other just like carousel-items. For example if we have the following grid: I would like to be able to represent row1, row2 a...
astralmaster
1

votes
1

answer
250

Views

Using input groups (with addons) together with help-text in Bootstrap 4

I'm having a hard time getting Help-texts showing up properly (i.e. at the bottom of the field) with Bootstrap 4's input-groups with add-ons. Here's my code: Title Some . Here is what it looks like: Am I missing something obvious?
Rodolphe
1

votes
2

answer
144

Views

Removed space between spaces buttons in a bootstrap dialog

I'm developing a web app with Bootstrap 3.3.7 and Bootstrap Confirmation 2.4.1. The confirmation works well, but when I press the button (Delete) that contains the Confirmation, it removes some space between the Delete and the Close button as you can see in the following images: View without confirm...
0

votes
0

answer
13

Views

Is there an way to get responsive background image on my html div

I have an issue and can't solve it properly. There is a header with registration form, but I can't do background image responsive. I've read a lot of manulas but it doesn't work. Header phrase Register  SMS is here some text SMS will come after 60 sec. My css look like this: .background-img { backg...
NashGC
0

votes
0

answer
13

Views

shiny html full page bootstrap carousel

I am begining in styling shiny apps. I want to create a create a full screen slider into a tabpanel of my application for my landing page. According to this snippet https://codepen.io/nikhil/pen/RPOXya , here's my application. The carousel is empty. How can I solve this issues (perhaps the in...
Wilcar
1

votes
1

answer
286

Views

Google Maps autocomplete suggestions not appearing

I'm trying to create an autocomplete for Google Maps in HTML and JavaScript, and I'm using a Bootstrap modal. But it doesn't show the suggestions. This is my code: Hello, world! Abrir mapa Modal title × Close Save changes function init() { var map = new google.maps.Map(document.getElementByI...
Diego Avila
1

votes
1

answer
551

Views

Custom Boootstrap 4.1 Toggler Animation

I'm trying to add a custom menu toggle to Bootstrap 4.0's Navbar menu. The code I am using is from Codeply HERE. I am trying to apply the X toggle style to my website's bootstrap navbar. Here is what I currently have now. Title Link Link .navbar-collapse InfoInformation Section ServicesServices Sec...
Haxz4Lyfe
1

votes
2

answer
209

Views

Second bootstrap navbar overlapping a dropdown-menu from the first navbar?

I have two fixed-top navbars, the dropdown-menu from the first one gets overlapped by the second navbar. Tried messing around with z-index, positioning and overflow.. Also found a couple somewhat related questions but nothing seems to be helping. Any ideas what could be causing this? Link to FIDDLE...
Jonathan Laliberte
1

votes
1

answer
34

Views

Material design wave effect not applied to dynamically created button

I am trying to create buttons by using jQuery's append method. However the buttons which where created by jQuery don't have the wave effect if I click on them. The button that I created in HTML has the wave effect. Why is it different? How can I get the wave effect to also appear for the button whic...
InFlames82
1

votes
1

answer
20

Views

Redirect a href link to an external application

In a link in my web application it is possible to redirect to an external site and load as activated a specific bootstrap tab. This external site I do not have access to the source code. In the site that I have access to the source code I can use something like this: // trigger additional clicks $ (...
Washington Borges
3

votes
2

answer
26

Views

How can I make my hamburger menu button change colors once clicked?

I am working with Bootstrap and am trying to have the basic hamburger menu button change background colors once clicked. I can make the color change within the browser when it is inspected, but cannot replicate in my css. I also cannot make the color change only when clicked on. I believe it may be...
msa522491
1

votes
2

answer
4.6k

Views

Bootstrap - Show an error message on button click

I'm a jquery newbie. I'm using bootstrap on my webpage and i want to show an error message on user click. $('Btn_register').on('click', function () { $('.alert').alert(); }); Code is working but it shows error message also when page loads. I need to hide the message and show only on click event. I...
Sefa
1

votes
5

answer
4.1k

Views

container-fluid leaving blank space

I want to use a full width div, so added container-fluid class which leaves blank space on left and right. I solved it using negative margin left and right. But the problem is the negative margin afftects bootstrap responsive nature. When I resize the left side contents are hidden and there is a ho...
Ash
1

votes
2

answer
4.4k

Views

Bootstrap tab ajax load content when page loaded

i need help about loading tab content when page is loaded. My example work good but default tab load content only when i click on him. That content is not loaded automatically when page is loaded is empty. Check: Fiddle example Like on example u will see you Contacts Friends list Awaiting reques...
Ivan
0

votes
0

answer
6

Views

Editing the bootstrap classes

I am a beginner at Bootstrap, and now I'm learning Bootstrap and I have a question about editing the bootstrap classes I want edit the bootstrap classes For example I want change the border size and color , I create the file (main.css) and call class For example :table and define the new border an...
Mahdi Adeli
1

votes
1

answer
2.6k

Views

how to make input field fit completely inside bootstrap table <td>

I am using bootstrap 3. I wanted the input field get fit inside my table. Here is my code, I want to do it in table-bordered class of bootstrap. here is the code: Organization: City: From: To: Stackoverflow 2001 2009 CSS code : td>input { margin: 0; height: 100% !important; display: inline-block; w...
Helping hand
1

votes
2

answer
2.6k

Views

Avoid line breaks in bootstrap button group

I've a bootstrap button group which includes a text between the buttons: @import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); 2016 How to avoid the line breaks, such that the buttons...
Thomas W.
1

votes
1

answer
21.1k

Views

bootstrap navbar not working correctly

Im using tomcat 9, java, bootstrap to develop a online forum. Suddenly the navigation is not working, i tried a few things but no luck. In the chrome network inspector tab everything seems fine. Index Toggle navigation Index Profile Logout screenshot: localhost:screenshot
Zozo
1

votes
2

answer
283

Views

bootstrap columns stacking on each other when supposed not to

I have 3x4 columns on my website which makes equal to 12 columns in total. But for some reason they happen to stack on each other, even tho there is enough space for them. I can't figure out what causes them to collapse. I have a little demo, you can see red boxes stacking on each other. HTML: Portf...
Limpuls
0

votes
2

answer
24

Views

Close bootstrap modal after ajax call

I want to close bootstrap-modal after ajax call. For, this purpose i call '$(myid).modal('close')'. This event is called but not in a proper way. Likewise, the modal box is gone but an overlay of grey colour is not fade out some reason. Below I put my some stuff for look up and help me. Thanks a loa...
Bhavin Patel
1

votes
2

answer
1.9k

Views

Scrollbar focus on the bottom of the HTML div

How do I make this scrollbar focus on the bottom of this div. Does JavaScript is necessary?
0

votes
0

answer
11

Views

I don't know how to fix this bootstrap problem

I am working on a MyBB website and I'm having a problem with the bootstrap checkbox formatting. The text runs through the checkbox. Image of the problem: http://prntscr.com/nfj4vr When I try to move the text it moves the whole block.
Colin McCoy
1

votes
2

answer
893

Views

CSS use color from another class?

Is it possible to import a color from one CSS class to another? Or create some sort of global color define and then use it in multiple classes so that doesn't have to be updated in multiple places if you want to change a color? For example say I have a CSS class that I want to use for specific eleme...
Dan
1

votes
2

answer
1.3k

Views

Printing breaks bootstrap layout

I have the following page: Column 1,1 in small row 1 in xs Column 1,2 in small row 2 in xs Column 2,1 in small row 3 in xs Column 2,2 in small row 4 in xs This page appears as expected when viewing (i.e. there's 2 columns and 2 rows on small+ screens and 4 rows on mobile) however the problem is...
apokryfos
1

votes
1

answer
70

Views

Bootstrap 4 Grid - 3 Columns - 5.5 - 1 - 5.5

Looks like half column sizing is doable in Boostrap 4. I'm trying to do a basic responsive layout like the following. I realize they have to add to 12. Column 1 (5.5) - Column 2 (1) - Column 3 (5.5) This article seems to suggest it's possible? I want to ensure it keeps base gutters and spacing. http...
aherrick
1

votes
2

answer
85

Views

How to slide up and down the extra text in jQuery?

How to slide up and down when there are many lines of text? My Title my text my text my text my text my text my text my text my textmy text my textmy text my textmy text my text my text my textmy text my textmy text my textmy text my text my text my textmy text my textmy text my textmy text my text...
Ramesh Madusanka
1

votes
3

answer
515

Views

How to implement RTL bootstrap 4 navbar?

I'd like to make my bootstrap navbar RTL. That is the logo in the right and the links flow from right to left. I have tried different tricks but none of they works. Here is the code I have right now: Logo Link 1 Link 2 Link 3 How can I fix this code to implement RTL navbar?
Babr
1

votes
3

answer
48

Views

Bootstrap 4 component with same padding like card and without custom css

I am placing elements on top of my card like so (run snippet): right left right left Sequi ad provident non. Et ea beatae ipsum sint. Quas omnis libero similique maxime perferendis pariatur aut ut. Alias quo et modi eaque. Et doloremque minima adipisci error quia rem. Minima quibusdam sunt sint...
Jankapunkt
1

votes
2

answer
77

Views

Move checkbox label to left on bootstrap custom checkbox

I have a checkbox Option 1 How do I move the label to display on the left? I have tried changing the order but it just breaks the checkbox functionlity. Option 2 CODEPEN Link to show both examples
JaChNo
1

votes
2

answer
71

Views

Unable to align div content

I am developing an application using Vue.js and Bootstrap. I am looking to develop a folder to look like this: But, I am unable to align the contents to make sure that it looks like in the above picture. The picture currently looks like this: Here is the code: folder Folder Name 20 files What wro...
CoderPJ
1

votes
2

answer
68

Views

Bootstrap: Dropdown on top of accordion

I have a bootstrap 4 drop down menu, that sits within the body of a bootstrap accordion: Lalala Lalala Dropdown Item 1 Item 2 Item 3 Item 4 Item 5 Test Test Dropdown Item 1 Item 2 Item 3 Item 4 Item 5 Unfortunately, the dropdown menu is drawn behind the accordion. I've already trie...
LukeLR
1

votes
3

answer
39

Views

How to set an absolute margin to an element using CSS or Bootstrap?

I have several div elements where inside every div there is a table between some paragraphs (p) using the following code: Something BEFORE the table header data Something AFTER the table which produces a nice content that looks something like this: head Something BEFORE the table Something AFTER...
Arpad Flandorffer
1

votes
3

answer
50

Views

No space between columns using the Flex Box Grid system

Using the Flex Box Grid system. What is the correct way of removing the spacing between two 50% width columns? Is there a standard class available for this? I can't find one on the official website. col 1 col 2
Floris
0

votes
1

answer
19

Views

How to make margin more that mt-5 or mb-5 in bootstrap4?

I have a form that I need it's margin-top to be 100px. Can I have this margin with bootstrap classes or I need to define a custom class for it? Maximum margin-top that I can achieve here is 48px
Ahmad Mobaraki
0

votes
0

answer
9

Views

How to make image expand/shrink to available space while keeping aspect ratio

How do we make an image 'fit' inside the second column below? This is Bootstrap 4 and I want the right column to take the same height as the left column and then the image to fit inside it while keeping the aspect ratio. I also want it to be centered horizontally and vertically. The HTML currently l...
dotNET
1

votes
0

answer
74

Views

Unable to add a class attribute to the label generated by a radio button input

I have the following configuration: # config/initializers/simple_form.rb config.item_wrapper_tag = :div config.item_wrapper_class = 'form-check' # config/initializers/simple_form_bootstrap.rb config.wrappers :vertical_radio_and_checkboxes, tag: 'div', class: 'form-group', error_class: 'has-error' do...
bitsapien
1

votes
0

answer
114

Views

ng2-bs3 modal dynamic sizing?

I have been using an ng2-bs3 modal for my admin login form, but when the validation message comes, it is overflowing the modal body. How to fix it so that, when the message comes, its size also increases relative to the modal size? Example:
Aditya Vashishtha
1

votes
1

answer
110

Views

Popup UserCreationForm in Django

Can I popup UserCreationForm of Django? I am building a website. When I click on signup page popup signup page needs to show. Right now I have a signup page and login page and they are working but I need to popup them. I am using usercreationform of Django. Can I add Bootstrap and CSS in that form...
Dawood Basharat
1

votes
1

answer
131

Views

CSS slider with link to pop up video

I'm trying to create a link to a pop up video in my css slider. I cant get the link to work. It seems like a simple task but its just not acting as a link. Any advice would be really appreciated Here is my code
user9150564

View additional questions