Questions tagged [bootstrap-4]
2467 questions
1
votes
1
answer
2k
Views
datetime picker for Angular 6, Bootstrap4 without fontawesome
Does anyone know of any datetime picker for Angular 6 / Bootstrap 4 which does not have fontawesome or any other custom font as a dependency, and will work with IE 11?
0
votes
0
answer
13
Views
How to bring PayPal Payment Window to the front so its on top of all browser windows?
My application gives users a specific amount of time to pay for a service. We do this because we can only keep their reservation for X amount of time.
The time we give them should be sufficient, however if they are running out of time we notify them with a Bootstrap Modal as shown below:
However, a...
0
votes
0
answer
4
Views
Autocomplete Dropdown Search Width adjustment
I am trying to design a search bar with an autocomplete dropdown like Google's. However, the dropdown does not come up as wide as the search bar
I have tried changing the width to auto and device-width but I see no change in autocomplete dropdown's width
.input-group-btn{
width:auto;
}
body{
back...
1
votes
0
answer
4
Views
Search input with an icon Bootstrap 4 with rounded textbox
I want rounded border search box with search icon.
Below code works but if I class 'rounded-pill' then icon separates from textbox.
How can I make textbox round while icon also remains within.
1
votes
1
answer
293
Views
Fadeout is not a function jquery 3.3.1
so i've beens using this below code for most of my web projects so far
setTimeout(function() {
jQuery('.pre_loading').fadeOut('fast');
}, 4200); //
0
votes
0
answer
10
Views
Progress Bar in Modal not updating
I have created a PHP upload class that takes a file as input and copies it to the server, this side of the application works fine. My issue that I am having is showing the progress bar updating within a bootstrap modal. The modal shows and I can see the progress bar within the Modal I just don't...
1
votes
2
answer
42
Views
Radio buttons does not show checked state when styled with Bootstrap
When I just use a plain group of radio buttons with Bootstrap like this with no special styling then it works just fine:
Ändra inte lösenordet
Generera ett nytt lösenord automatiskt
Ange ett nytt lösenord manuellt
The radio buttons are showing the checked state when clicked upon. But if I try...
1
votes
2
answer
32
Views
Positioning image relative to the background
I want the image to be positioned such that its center is always placed on the bottom of the blue background.
It should look like this:
I can use top:37v; but resizing the window height will not let it retain its position relative to the background.
.background{
background-image: url('https://i.img...
1
votes
1
answer
26
Views
Responsively position upper edge of a div at the centre point of a circle which is in another div?
I have 2 stacked divs: div1 contains an circle image, div2 contains some text. I'd like div2 to move upwards and always cover half of the circle, i.e. upper edge of div2 should be positioned at the centre point of the circle. Here is my code:
.coverLower {
background: #e1ecf4;
margin-top: -235px;...
1
votes
1
answer
31
Views
Having trouble with including PHP file
I am trying to include header.php file inside my index.php file, both of them are in the same folder. However, it is not working.
Here's how I coded index.php file:
Bootstrap
the header file should be above this line
3
2
1
And here's how I coded my header.php file:
HEADER INCLUDED
HIP HIP HORRA...
1
votes
2
answer
32
Views
Using Bootstrap 4 To Change Color and Position in One Class
I am Using Bootstrap 4, and I want the text to be moved to the middle and the text color to be white in one class. For Example:
Center aligned text.
This doesn't seem to work. My website is https://beggweb.000webhostapp.com, and the text is still too dark to see underneath the Carousel, which I want...
1
votes
2
answer
30
Views
Ignoring CSS margins for embedded DIVs
I have a classic bootstrap template, like this:
...header...
...carousel...
...content...
and now my website looks like this (H - header, S - slider, C - content, F - footer, with margin: auto):
I want to (visually, using CSS) pull out slider from div.row and div.col-12, like this.
I have tried...
0
votes
2
answer
14
Views
Bootstrap 4 Video Embed won't Autoplay in iframe
Using Bootstrap 4 I need my embedded Youtube link to autoplay.
I haven't seen anything in the documentation on how to get it to autoplay. Everything I've read online has autoplay in a tag, but not in the tag the way Bootstrap has responsive embeds listed. I tried adding 'autoplay' in the iframe ta...
0
votes
1
answer
16
Views
How to Fix bootstrap navigation toggle button in center
I have a problem in bootstrap 4 navigation, I want to set left Logo/Brand and center Navigation button and right login/My Account button, I have tried to solve this, but when I click navigation button on mobile it suddenly goes to the right, Please look at codeplay http://codeply.com/go/8FOVzFRkfM
B...
0
votes
0
answer
13
Views
How to force responsive datatable to display more than 6 columns?
I'm using a responsive datatable with 7 columns. See it live within its template (it is the larger table): http://darasu.xyz/DatatableExample/datatable-ex.html
The one I'm using is from here:
https://datatables.net/extensions/fixedheader/examples/integration/responsive-bootstrap.html
I want all colu...
0
votes
0
answer
6
Views
Bootstrap tabs don't function properly inside a modal
I am using Django and Bootstrap to display nav-tabs inside a modal, shown when a button is clicked. The issue is that when a tab is clicked its content is not shown.
Below you can see a simple example:
{% load static %}
{% load rest_framework %}
Show modal
{% include 'myapp/modal_test.html' %}
0
votes
1
answer
8
Views
Rails prettify a collection of checkboxes
I am currently using collection_check_boxes
Color:
✓
That results in something like this
The number of checkboxes is dynamic. I tried some logic such as conditionally using content_tag :tr do, but with no luck.
1
votes
1
answer
17
Views
Why does my right hand flex column suddenly drop below a left column?
Why does my right hand flex column suddenly drop below a left column when (fluid) content is added?
I want a fixed width left column and a right hand column containing an image slider (Owl Carousel).
The column layout works fine when empty, but as soon as I add the image slider, the column jumps to...
-2
votes
3
answer
15
Views
How to fix problem with bootstrap 4 grid system?
I am facing a problem with Bootstrap-4 grid system. I know there are 12 columns. Whenever I want to use less than 12 columns, I am facing this problem. Suppose if I use 8 columns, it goes to automatically center and extra spaces. But I want a left alignment. How this can be fixed.
My code like this...
0
votes
2
answer
15
Views
Ruby on rails Issue using a function with bootstrap for a menu
I'm having some issues with my jquery in ruby on rails, I try to call my function for my navbar but in keeps sending a message 'toogleClass is not a function' I checked the code and I don't see the issue:
application.js
//= require rails-ujs
//= require jquery
//= require turbolinks
//= require acti...
0
votes
0
answer
5
Views
Why is my lightbox image not loading when clicked on?
When I click on the image itself, the lightbox loads but the image itself doesn't - instead, all I see is a white box. Basically, the lightbox shows up, but the image doesn't load. I'm not sure what I am doing wrong. I watched a youtube video on how to create a lightbox and followed the steps exactl...
0
votes
0
answer
3
Views
how to plit a div table into to page while printing
Good day,
I have pain to print a table into to page while printing.
I found some answer with
.div-table-body{
page-break-inside:auto !important;
border:1px solid #ff22ff;
}
.div-table-row{
page-break-inside:avoid;
page-break-before:auto;
}
But noe of them works. So what I did wrong?
Here is my code...
0
votes
0
answer
4
Views
Adding table gridlines to tables in django-tables2
Django-tables2 relies on bootstrap templates with no gridlines.
It relies on the django-tables2/boostrap4.html template.
I'd like to add lines in-between rows and categories like this style/design:
https://material.io/design/components/data-tables.html#anatomy
Is there an easy way to do this with...
0
votes
0
answer
15
Views
html ol tag showing too far left
My code is not lining up the way i would like
xxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxx
xxxxxxxx
Click Me
This is printing out like this (the _ is blank space)
__________________________________ xxxxxxxx
__________________________________ xxxxxxxx
__________________________________...
0
votes
0
answer
5
Views
Page contents grows both up and down in bootstrap page
I have a problem with Bootstrap and ASP.NET WebForms. I've built a basic site which outline is basically:
and then heaps of content in various containers and rows.
What I've noticed is that the page grows from the center and outwards on the vertical axis, so if the page grows to where I need to scro...
0
votes
0
answer
4
Views
How can i fix images carousel on Bootstrap 4 Collapse on Mobile?
i have set up Swiper Carousel images on bootstrap collapsible section.
my problem is when expanding the accordion on Mobile, the responsiveness get messed up - i'm thinking maybe because it can't calculate the height of the hidden section before expanding.
what can be the solution for this?
this is...
0
votes
0
answer
14
Views
Set maximum value in Bootstrap 4 script
function() {
var selr = jQuery('#spu_magazzino_parziale_01').jqGrid('getGridParam','selrow');
var vlMAGPROD_QTA = jQuery('#spu_magazzino_parziale_01').jqGrid('getCell',selr,'MAGPARZ_QTA');
jQuery('#MAGPROD_QTA').val(vlMAGPROD_QTA);
}
With this script the default value in the form is correct,...
0
votes
1
answer
5
Views
Facebook page iFrame display problem in Boostrap Template while using Laravel as backend to send iframe code
I am using a bootstrap template. I want to display a Facebook page iFrame in sidebar. I am using following iFrame code which is generated by Facebook Page Plugin. Here is the code:
It works fine and display Page iFrame if I directly put this code in the template. However, If I upload this code from...
3
votes
3
answer
106
Views
Bootstrap 4 prevent clipping on overflowing row with horizontal scroll
I created a row with horizontal scrolling for all contained col.
I used an answer to this question: Bootstrap 4 horizontal scroller div
However, I found that the elements inside the container are clipped. Now on some OS-Browser combinations (e.g. MacOS+Chrome) the scrollbar is hidden unless it is ho...
1
votes
1
answer
2.4k
Views
Add Boostrap 4 Alpha to Yii 2 advanced template with composer?
How to add the Boostrap 4 alpha's into a yii2-app-advanced app, using composer and making it a dependancy?
I've tried editing vendor/yiisoft/yii2-bootstrap, and adding 4.* in it's composer.json on line 22, but no avail:
'bower-asset/bootstrap': '3.3.* | 3.2.* | 3.1.* | 4.*'
It being an asset bundle...
1
votes
0
answer
7
Views
Are Bootstrap navbar dropdown menu's compatible with html preview in github?
I'm trying to host a simple html page using github (html preview) and the bootstrap dropdown menu inside the navbar won't respond (i.e. toggle). Everything else works fine using github except the dropdown menu.
Please note, the bootstrap dropdown menu code works perfectly when using my local host...
1
votes
2
answer
8.1k
Views
How to use Bootstrap Navbar in Angular
I am using the navbar example in bootstrap in my Angular app but the nav bar doesn't come up at all.
Here is the navbar html
Navbar
Home (current)
Features
Pricing
Dropdown link
Action
Another action
Something else here
I have installed bootstrap npm install bootstrap --save
and in styles.css import...
0
votes
0
answer
9
Views
I can't get my Nav Toggle button to work in Bootstrap 4
i'm not sure why my navbar toggle button isnt working. Am I missing a class? Any help is much appreciated. I did some research but couldn't find a solution.
Thanks
Wonder Stories Records
Home
Artists
Releases
Contact
1
votes
2
answer
1.3k
Views
Image fluid not working on Bootstrap 4
I am having trouble with making images responsive with Bootstrap 4? When the code below renders to the browser there are three images in the navbar (top left). I am having issues with these three images scaling down in size when viewed on mobile!
I would like the two colunms in the navbar to sit sid...
1
votes
1
answer
1.5k
Views
Bootstrap 4 navbar toggle button not working correctly
I have html code working with bootstrap 4. In my case when navbar toggle button clicked the navbar open and hidden automatically. How to manually open and hidden navbar when clicked? Thanks anyone.
SuperEvent
Super Event
Home (current)
About
Services
Portfolio
Contact Us
1
votes
4
answer
3.4k
Views
Boostrap 4 snackbar / toast [closed]
I'm triying to create a snackbar / toast version with Bootstrap 4. I start with this tutorial from w3schools.
Updated: I was triying to implement a custom snackbar or toast for Bootstrap 4 but, right now, it isn't necesary beacause BS4 include this option from version 4.2 as @Zim says.
0
votes
1
answer
12
Views
bootstrap for adding button
Select All
I have to convert the above code to bootstrap kind of syntax which is to be placed in haml file. Can someone please help me to do that as I am new to bootstrap and haml.
Thanks
1
votes
1
answer
68
Views
Bootstrap 4 modal with scrollable body and non-fixed header height
I've seen several solutions on SO and a few blogs on how to make the body of a Bootstrap modal scrollable. The problem is that these solutions require the modal header to be a fixed height.
In my case, I have text that displays in the modal header that varies in length depending on what the user cli...
1
votes
2
answer
34
Views
Bootstrap modal load entire HTML from external file
Using: Bootstrap 4.1.3
Here is one solution but this is not exactly what i am looking for:
Bootstrap Modal Dynamic Content
I am getting the content (the entire modal html) from an external file and then i need to show it as a modal.
How to display data in the modal
$.get('test.html', function(data)...
1
votes
2
answer
56
Views
How to prevent screenshot of webpage in mobile view?
I just want to know is there any option to stop taking the screenshot from a mobile view of any web page which is designed using HTML CSS of with a framework like bootstrap?