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
2answers
14 views

Right aligned Bootstrap container which also aligns with default container

I've been trying to make a Bootstrap container which "spills out" onto the right hand side of the page but also aligns well with the standard Bootstrap container. So far I have tried duplicating the ...
0
votes
0answers
8 views

Make Bootstrap Columns NOT equal height [duplicate]

Using Bootstrap 4, I am trying to emulate to make the height of the columns NOT be equal. I can add a style attribute to the col and edit the column height that way, but i would like for the height ...
0
votes
0answers
14 views

resize parent/sibling height based on second sibling's height [duplicate]

To start off, here is a JsFiddle of what I currently have for code. What I am attempting to do is make it where the height of parent-wrapper (red) and left-wrapper (green) are both dependant on the ...
1
vote
2answers
21 views

Select doesn't show options

I'm trying to load the options of a select dynamically so I create an array of options which is passed to the select. The code of the constructor, handle and get data is next: constructor(){ ...
0
votes
2answers
25 views

active button should not change color on hover

I have separately set the hover and active function wherein the color will change when when i hover over menus in navigation /* Change the color of links on hover */ nav .nav > li > a:...
0
votes
0answers
18 views

How to process HTTP Get request and populate into ng-bootstrap table?

Following the complete example here:https://ng-bootstrap.github.io/#/components/table/examples, I am implementing a table with sorting, searching, and pagination. I am using Angular 7 and the latest ...
0
votes
2answers
18 views

How to fix a responsive image that works on Firefox but not on Chrome and Safari?

I have a row with a bunch of img whose size are capped by their height, and these are displayed properly on Firefox, but stretch on Chrome and Safari. Firefox Chrome Safari HTML: <div class="...
-4
votes
0answers
17 views

How to fix Toolbar and Sidebar without fixing top value?

I have a Top Toolbar which is fixed and a Sidebar which is also fixed. I want to put Sidebar just under the Toolbar but don't want to put any top value or margin-top. Is it possible? With top value I ...
-1
votes
0answers
11 views

Lazy loading table in bootstrap tabs?

I would love to use several tables in bootstrap tab, but I would also like to load only the table that is present in the tab I clicked and reload each time the same tab becomes active again. I tried ...
-1
votes
0answers
6 views

table tbody overflowy scroll with thead and tfoot fixed

Bootstrap table body need to be scrolled when the content get overflowed. while applying d-block the table get collapsed. the table head and table footer should be fixed and the content must be ...
0
votes
0answers
20 views

How to get text in selenium when value is empty in bootstrap [on hold]

In Bootstrap,while loading the text-field that value in html is empty, <input class="form-control datRang rmveEmpty" id="chargeDate" required="" type="text" value="" style="pointer-events: auto;"&...
1
vote
2answers
46 views

How do I position a div in a row into a bootstrap container correctly while maintaining responsive web design?

I am trying to align the content to the existing container above, however I am unable to successfully commit this as the container is located in a row because I wanted the file directory div on the ...
0
votes
0answers
7 views

how can I override bootstrap classes by using BEM methodology?

since I am using BEM methodology I don't know how can I override bootstrap classes in my custom CSS file, please anybody can help?
0
votes
1answer
53 views

Collapse menu doesn't close when I click on toggler button

I build a responsive menu with Bootstrap 4.0.0, the collapse menu opens when I click on it, but it doesn't close when I click on it again. The code is: html: <nav class="navbar navbar-expand-lg ...
-1
votes
1answer
41 views

Column with push/pull and col [duplicate]

In desktop view they should display like: col 1 col 2 |3 In Mobi row col 1 row col 2 col 3 i want in the mobile view the should display like this: row col 2 row col 1|3 My current code: ...
0
votes
1answer
18 views

Bootstrap 4.3 Tab not switching from the first tab

I've incorporated bootstrap tabs into my web app following the documentation on the bootstrap website. I've so far managed to get the first tab fade animation to play and show the the other two tabs ...
0
votes
8answers
57 views

Add cards in html via javascript

I've added 3 cards through a loop. My problem here is that I want to put these 3 cards together, not below each other. I want them to be ordered horizontally. arr = [{ "Name": "Peter", "...
-1
votes
4answers
41 views

How can I add a picture inside a card in HTML?

Please bear with me as I am new in learning PHP. I am trying to make a registration form that will look exactly like this picture below: And the one that I have made so far is this: I have no idea ...
-1
votes
1answer
34 views

Delete and Edit buttons won't function [on hold]

I am creating a crud application with a list of students an their grades I am trying to do a delete and edit method on the front end and also when I click edit their should be a pop up form that comes ...
0
votes
1answer
25 views

Navbar sticky top not working when inside an angular app

Im building a web application with a sticky navbar on top. The navbar is in such a way that there exists a brand logo above the navbar. So when the page loads initially, the user sees a brand logo, ...
-2
votes
0answers
20 views

Adding a non rectangular header with a image over the background

I designed a website on Photoshop and I would like to implement it using BOOTSTRAP. When I use other methods, I found that not half of the hoodie will have the backdrop, but all of the hoodies will ...
0
votes
1answer
14 views

how can I update progress bar when json data change using vue.js without refresh

I try to make a boostrap dashboard page for tracing status of my python aplication running on server. On server side, python app update data.json file when reach certain status. On client side, vue....
0
votes
2answers
47 views

Bootstrap 4 Tooltip Persists, Looks Terrible

Could you please run the following html test case, to help figure out how to make bootstrap 4 tooltip go away when a button is disabled while the tooltip is over the button? The details concerning my ...
0
votes
4answers
27 views

Extra white space is showing at the bottom of my card title using Bootstrap 4

I am new to PHP and bootstrap. I am making a login form which was perfectly fine when I do not put <link rel="stylesheet" type="text/css" href="styles.css"> in my header. But I can't just ...
0
votes
2answers
22 views

How to get horizontal scroll to navbar in bootstrap 4 when there is lots of nav item

How to scroll navbar items in bootstrap menu when there is lot of items. my code is <nav class="navbar navbar-expand-lg navbar-dark bg-info fixed-top"> <a class="navbar-brand" href="/"...
0
votes
1answer
18 views

How do I use bootstrap theme in my mvc project?

I am beginner in mvc. I want to create the admin site. I love this theme: enter link description here but I confused to use this them. No HTML file and any doc help for using in my site for ...
-1
votes
2answers
39 views

How to can I right align bootstrap nav item [duplicate]

Hi is there any way that I can have my nav at the left side and the login and sign up at the right side? Here is my html nav code: <div class="container-fluid"> <nav class="navbar ...
-2
votes
1answer
32 views

Formatting a specific section according to screen size

So I am creating a personal website and I am almost done except for one thing that is bugging me out. So , whenever I reduce the size of the screen to less than 992px , the formatting of the skills ...
-1
votes
0answers
13 views

Drag and Drop cell data from one table to another and keep the dragged element in the table

I have to implement a drag and drop functionality from table 1 to table 2. Each cell data in table 1 is draggable to any table2(row,column). Also, table 1 data should be retained. I'm new to front ...
0
votes
1answer
19 views

Remove extra right margin when using alert-dismissible

Adding alert-dismissible adds a margin to the whole alert box, which I don't like: <div class="alert alert-dark mb-5 alert-dismissible fade show" role="alert"> <div class="media">...
0
votes
3answers
28 views

How can CSS transition be used to increase Bootstrap card font size on hover?

I simply want to increase the size of the text inside a bootstrap card class and change its color on hover action but my code only changes the color and does not increase the font size neither does ...
-1
votes
0answers
13 views

Bootstrap 4: d-none overriding d-md-flex

I use "d-none d-md-flex" to hide some elements on mobile but it's not working because d-none seems to have priority over the other one. https://imgur.com/7QttaY3.png => dev tools showing the issue ...
-2
votes
1answer
50 views

How to add content to div

I have to set up a menu website for an assignment and want to make a floating side div for the order summary Figma reference : https://images2.imgbox.com/59/9f/qikiR5qq_o.jpg Note: This is the first ...
0
votes
1answer
22 views

Bootstrap datepicker dynamically update multiple rows

I have table which contains multiple rows from database, within that table we have column for date which selects the date today for only one row. Since we have multiple rows i need to update the ...
0
votes
1answer
43 views

Codepen vs Bootstrap: CSS behaves differently

I'm trying to fit texts to divs of various size that are themselves responsive thanks to viewport units. Here is the problem: the code below is working fine in one codepen, at least for the four ...
0
votes
0answers
37 views

how to fix app html page start with broken css and after refresh is fixed

I try to run an application with Angular 7 - Bootstrap 4 and a jhipster platform so when I open the HTML page it shows a broken CSS but after refresh the broken CSS is fixed. This is jhipster ...
-1
votes
0answers
24 views

Bootstrap slow to fit breakpoints

I'm using bootstrap 4 with Angular app, when change screen width, it's moving slowly to fit breakpoints, What am I doing wrong here to get overlapped icon? What should I edit in Grid system? I think ...
0
votes
2answers
45 views

Create the links using javascript

I have a implemented boostrap 4 navbar, and have a function that creates links. It works and is there any efficient method to do in javascript. I have three function that creates link for each ...
0
votes
1answer
15 views

Button for update a blog post

I've a trouble to create correctly a button based on Bootstrap 4.3 with wich activate the update of a post. I've created this view: def updatePost(request, slug_post=None): update_post = ...
3
votes
2answers
72 views

Is there a way to make navbar logo responsive?

So, here is the website I've built using bootstrap 4. I have a big issue with the logo, as it keeps the same size on all devices. I've tried adding img-fluid, but if I add this class, the logo ...
-1
votes
0answers
15 views

Why doesn't webpack see changes in bootstrap file (node_modules)

I create new React project with npm install -g create-react-app create-react-app my-app --scripts-version=react-scripts-ts and after that I install bootstrap4 and also use npm. Now I try to change ...
2
votes
1answer
51 views

Collapsible nav within three column layout

I have a header that is split into three columns, these are logo, searchbar and nav. I followed this for the nav section: https://codepen.io/macsupport/pen/bKFzD as I'm new to bootstrap and am still ...
0
votes
2answers
35 views

Vertical center align for a button in panel header with Bootstrap

I'm working on a Bootstrap 4 HTML page. I put a button in a panel header: I need to put the button (and the title) in the middle of the panel header. How can I achieve this goal? <link href="...
0
votes
1answer
21 views

How to make clickable cards using Bootstrap 4

I'm using bootstrap-4 and I want to make clickable cards, but for some reason when I do: <div class="col-12 col-md-6 col-lg-6 mx-lg-auto col-xl-6"> <div class="card card--industry mb-4"&...
0
votes
1answer
20 views

How to pop up external link in bootstrap modal

Suppose I have an external link https://example.com for my site https://my site.com. How to pop up the external link in bootstrap modal?
0
votes
3answers
46 views

Make column height fill row bootstrap 4

I have a row with some columns, on my page. These contain cards, which have a slight difference in the amount of content. But I want these to all be the same height. <link rel="stylesheet" ...
0
votes
0answers
13 views

How to set footer at bottom of the page, (not fixed) , and remain at bottom just after loading also

I want a footer at the bottom of the page, but its position should not be fixed. Whenever I load the page, footer comes upwards, and when data loads completely from server, footer resides at the ...
0
votes
1answer
35 views

Bootstrap 4 Responsiveness is not working properly

CSS Framework: Bootstrap 4 JQUERY, JS MASK for validation and input masking Custom CSS for coloring and margins/padding/font sizing Works good on: Desktop/Laptop Screen\ Works Bad on: Mobile/...
-1
votes
0answers
16 views

What is Major difference or minor difference between Material Design Bootstrap (MD Bootstrap) and Chart.js?

Starting to use MD Bootstrap, I made a Pie chart in MD Bootstrap with the help of Chart.js library. However my senior told me not to use chart.js because our project is based on MD Bootstrap. I'm ...
0
votes
1answer
39 views

Bootstrap 4 Responsive Center Logo Between Navbar Links

i need boostrap 4 navbar with 4 links and centered logo. 2 links on left side and 2 links on right side responsive /*------------- navigation -------------*/ .site-logo { width: 100px; ...