Questions tagged [bootstrap-4]

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?
DarkW1nter
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...
chell
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...
Akshat Shah
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.
Khalil
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); //
Subu Hunter
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...
user1219128
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...
TBJ
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...
Talha Munir
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;...
thinkvantagedu
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...
ganjaam
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...
Christian Begg
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...
TeslaX93
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...
thewly
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...
Abdulrauf
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...
leeopold
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' %}
GiannisIordanou
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.
user9281765
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...
NickG
-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...
Tahmid Nishat
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...
JULIO MACHAN
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...
Jenni
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...
martin10
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...
J R
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 __________________________________...
dustybusty12
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...
JaggenSWE
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...
dor meljon
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,...
L.BB
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...
Mosharof Zitu
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...
Jankapunkt
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...
omerowitz
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...
Frank Wylie
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...
INFOSYS
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
Aman Ellis
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...
giofus
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
Irsyad Nurilhaq
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.
mrroot5
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
snpd
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...
duncster94
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)...
learning...
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?

View additional questions