Questions tagged [bootstrap-4]

Bootstrap 4 is the fourth major version of the popular front-end component library. The Bootstrap framework aids in the creation of responsive, mobile-first websites and web apps.

0
votes
1answer
11 views

How to add svg icon in rounded bootstrap 4 form input / button ?

I'm using Bootstrap 4 for an Angular project, and i would like to add icon font wich i created using svg and iconmoon into buttons and forms input like in these images :
0
votes
2answers
27 views

Angular 6 How can i get another component onClick

I have 2 components(homepage, modal-form-login). Homepage components includes page with button (Log In). Modal-form-login component includes Log In form. How can i get this Log In component clicking ...
0
votes
0answers
5 views

Gulp-Sass problem with sourcemap and bootstrap 4

When run my task, in Chrome developers tool my sourcemap trigger is last selector in my css compiled. Boostrap selectors is ok, only my custom rules haven this problem. my scss file with all style ...
-1
votes
2answers
16 views

I can't get my ruby on the rails to properly import bootstrap-sprockets

I keep trying to @import "bootstrap-sprockets"; @import "bootstrap"; in app/assets/stylesheets/custom.scss, however, when I try to I get the error: File to import not found or unreadable: ...
1
vote
2answers
28 views

Why a button doesn't work in any layer of CSS?

I'm having a hard time understanding why a button doesn't work within the styles of a hero image. I've tried adding a z-index to bring it to the top, but nothing is making sense why this button is ...
0
votes
0answers
20 views

Single click on a button does not show dropdown in Bootstrap

I am using Bootstrap 4 table. The table shows records fetched from DB. The last column has a with with gear icon and upon clicking it a bootstrap dropdown menu is displayed. Each <tr> element ...
0
votes
1answer
23 views

prevent mega menu items from automatically be hidden on hover

So i'm making a web page and i have this mega menu that when i hover it opens it's items but when i hover on the items it will be hidden. anyways here's the HTML code: <li class="dropdown mega-...
-1
votes
1answer
24 views

Bootstrap Carousel image position center

I'm using the Bootstrap 4 Carousel for my website. Everything is working, but now i'm looking for a solution to align the slider image in the center of the carousel. Currently it's aligned to the ...
-1
votes
0answers
30 views

How can I convert this HTML snippet into bootstrap

How can this table get converted into bootstrap rows and cols? I am not too familiar with bootstrap but I'd like to try and convert it as best as possible but not sure where to begin. thanks you very ...
-1
votes
2answers
21 views

Bootstrap 4 - card group same height of card-body etc [duplicate]

I want to achieve the following result with Bootstrap 4's card-group: Same height of everything (card-header, card-title and small subtext if present, each first list item starts at the same vertical ...
0
votes
0answers
26 views

can't display photos in bootstrap slider from javascript

I have an api , and i create page to display all photos from the api using bootstrap slider and fetch data every 20 seconds .. i use the exact code from bootstrap website but when run my code only the ...
-1
votes
2answers
21 views

bootstrap4 DIV col-12 is mandatory for mobile device?

bootstrap4 DIV col-12 is mandatory for mobile device? Without col-12 in DIV it take full width on mobile then why it required?
0
votes
0answers
29 views

Django forms not displayed in bootstrap 4 modal

recently i'd try to migrate my todo-list app from bootstrap 3 to 4 (4.1.3 exactly) but all my forms disappeared from my modals (a form for create and another for edit). Here is one of my modal with ...
-1
votes
2answers
53 views

Bootstrap 4 responsive aside navbar

I am a student in woodworking and I would like to make a website that regroups everything I learned. So I would like to make a responsive vertical sidebar. For exemple like the documentation page of ...
1
vote
3answers
31 views

Wrap div inside bootstrap row - not grid item?

Is that possible to wrap div inside a row? I know it's possible but I just want to know it's a bad practice or not. I'm not using any col-md classes inside row. Please see the example below.. <...
1
vote
0answers
21 views

Angular 6 - Injector.get<service>(service as Type<service>) error: Type 'Type' is not Generic

Angular 6 Typescript 2.7 I am getting Renderer2 service to use in my component.spec.ts. See below code- renderer2 = fixture.componentRef.injector.get<Renderer2>(Renderer2 as Type< ...
0
votes
0answers
16 views

Pause Bootstrap carousel when playing Youtube video

I have made a carousel which has images and a Youtube video. Even when the video is playing the carousel slides and when returned to the video, the video is still playing. I want the carousel to ...
0
votes
0answers
15 views

Chang Modal option in active status Bootstrap( v4.1 )

I am facing a problem to change modal {option} after it executed(in show status) or if it executed once. It seems like {options} value is not affecting if the modal executed once or if the modal ...
0
votes
2answers
26 views

How to make the responsive textbox in popup window form

I need a popup window for Signup option. So I used following coding, <li onclick="document.getElementById('signUpId').style.display='block'" style="width:auto;"><a href="#"><span class=...
0
votes
2answers
58 views

What is best way to implement Bootstrap col-md-12 inside row? [duplicate]

Let's say I have to nest three bootstrap col classes and the last one will be col-md-12 so it goes 100%. My question is, Is that ok to nest col-md-12 in one row like first example or do I need to ...
0
votes
2answers
22 views

Angular Bootstrap button size

I'm using Angular 6 for my Project and it integrates with bootstrap. I'm using '<button class="btn btn-info">ADD</button>' but my button looks a bit bigger than usual when it comes to a ...
-1
votes
1answer
63 views

Center every item vertically in the div using bootstrap

I am trying to center everything within this div vertically. First I made that my background view extends my container nicely across the screen and now within that div I want to make columns. If I ...
1
vote
2answers
28 views

Bootstrap carousel last item will hide right control

I am using bootstrap 4.0 version. I want to hide left control on the first item, and hide the right control on the last item. I think using jQuery it can be solved. Left control will hide all the ...
0
votes
0answers
28 views

Two different tooltips in website with different colors

I've been stuck with this issue for the past 2 hours and I'm on the verge of tears. I have read many answers here and on other sites but I have no idea who to solve it. I have a site where I have a ...
0
votes
3answers
41 views

Bootstrap 4 - Grid 1 and 2 Change position

Example what i need: Image: My code is this: <div class="container"> <div class="row"> <div class="col-3"> <img src="image1.png" class="img-...
0
votes
1answer
25 views

Bootstrap fixed content in table

How I can fix content in table on bootstrap? My code: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/...
0
votes
1answer
16 views

Center current div on a bootstrap progress bar on mobile

I have a bootstrap progress bar on my site which "lights up" depending on what page we are on (filling out a multiple page form). It might be easier just to see an example so I made this: Example ...
1
vote
0answers
11 views

attributes in form that define in modal does not get dynamic value in laravel :(

I created a table for editing Movie Object. one of this table's column is a form that popup with modal class (bootstrap class):) this is my code: <div class="modal-body"> <form method="post" ...
0
votes
1answer
26 views

Boostrap 4 on mobile lets me scroll right to blank white screen (with footer)

On my homepage of the web app I'm making, I have photos that are scaled to 450px. In mobile, everything fits perfectly on the screen, but the web app lets me scroll right to nothing, with the footer ...
-1
votes
0answers
11 views

bootstrap 4 container-fluid

New to bootstrap, is it bad practice to put a div in the body with the class container/container-fluid and then everything else goes in that or should you give each each individual section (header, ...
0
votes
1answer
32 views

How to make images in carousel of the same size?

I have a carousel, and images have various sizes. I want that images displayed in the same size. The problem is solved by adding height, but carousel lose it responsivity(when you enter from mobile ...
0
votes
1answer
16 views

align-items-center while keeping the background full height

I have two columns inside a row in Bootstrap 4. If I try to align vertically the content using align-items-center on the row, or align-self-center on the col, the h4 is centered but the background is ...
-1
votes
2answers
23 views

Bootstrap sticky element not stick

I made a simple sticky element via css but I'm using Bootstrap, if I include BS, sticky not work but if remove, it work fine, why? any idea? .navbar { background: hotpink; width: 100%; height: ...
0
votes
1answer
18 views

bootstrap 4 navbar has padding on left and right side

I'm not sure what I'm missing here, I know I can add the CSS to take away the padding from the parent div but I thought that bootstrap would make the navbar the full width of the page? Here's my code:...
0
votes
2answers
30 views

why react-bootstrap is not adding styles to my grid layout

I am making promodoro clock .I wrote my code using react-bootstrap .it is working but the styles of default classes of bootstrap is not being added to the styles.it is just being stacked over one ...
0
votes
0answers
16 views

Locally-loaded bootstrap-min-js not working: Modal dialog not showing up

When trying to load bootstrap.js locally dynamics stops working. Modal dialog does not brings up. Other stuff seems to work just fine locally. Following is a working example: <head> <!--...
0
votes
1answer
17 views

Allow Bootstrap4's popover to overflow screen

I'm trying to use BS4's Popper.js-based popover feature. I'm adding content to it dynamically on shown event and I need it to stay anchored to the triggering button and let the body scroll instead of ...
0
votes
1answer
14 views

Toggle plus minus signs in BS 4.x Card Header

I am trying to learn Bootstrap. I have the code referenced below. The problems are: 1-When the card is expanded, I wanted the plus sign to change to a minus sign but this is not happening. How to fix ...
1
vote
2answers
27 views

Bootstrap columns doesn't behave properly in Google Chrome Inspector

It seems like when I'm trying to test it in Chrome inspector it's not responding as it should according to the code (the columns shrink) However, it works when I'm scaling the Chrome's window or in ...
0
votes
1answer
17 views

Position images on top of each other with some precision in Bootstrap

I'm trying to position two images on top of each other with some level of precison. The problem is, the top image (the circle) goes all over the place. Both images are in a responsive grid and the ...
-1
votes
0answers
13 views

WordPress Bootstrap Grid for Home

I want to add two columns on home page, as on the picture below. I am getting first half, not second. Please advise me how to add the second one. Here's index.php that I've tried: <?php /** * ...
-1
votes
3answers
26 views

Centering grid image content in bootstrap [duplicate]

I have a one-row grid that is supposed to place two images on top of each other once the screen gets small enough. It works ok, but, once the screen gets too small, the images don't get centered. In ...
0
votes
1answer
23 views

Bootstrap 4 center image but text left aligned

I am using Bootstrap 4 and I have row like this: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/...
0
votes
2answers
21 views

Bootstrap tooltip on Font Awsome icon in Modal

I have an input field with a Fontawesome icon that I added through content in my CSS file. This icon will only show on validation. I want to add bootstrap's tooltip to the icon, but I can't figure out ...
1
vote
1answer
22 views

How to align the cells of one column with other columns in a responsive table?

I am trying to create a responsive table. The first column is only text value but other columns have text value and a button. While using hr tag, the misalignment of cells is quite visible. Here's a ...
0
votes
0answers
12 views

How to use NavLink-activeStyle on React with a dropdown link

I am having a problem adjusting bootstrap 4 navbar to react. I have the following code: <li className="nav-item"> <NavLink className="nav-link" to="/home" activeStyle={{ color: 'black' }...
0
votes
2answers
25 views

Laravel 5.7 Bootstrap 4 button color is weird

I started new project in laravel 5.7 with bootstrap 4 but color of bootstrap buttons is weird Here is picture: And this is my code: <tr> <td> <a href="#" class="btn btn-warning ...
0
votes
0answers
12 views

Sizing form labels and inputs

I'm working on a horizontal form, but I can't get my labels and inputs the right size. I'm following the information give here. Here's my code: <div class="container"> <form> <div ...
0
votes
2answers
45 views

Bootstrap issues with responsive spacing

I have been working on this snippet of code for 3 days now trying to figure out what I am doing wrong and I have just given up. Currently I am trying to add a spacer between my images except for the ...
-1
votes
2answers
27 views

Why href doesn't work inside nav tabs in boostrap v4?

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="...