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.
28,122
questions
0
votes
0
answers
13
views
How to make aside collapse when mobile resolution using bootstrap?
Im trying to make my aside menu collapse when using mobile resolutions so its not shown at all, but .collapse class is making my aside collapse in all resolutions, big and small ones. How can i change ...
0
votes
0
answers
11
views
How to make text and icon on the same line Bootstrap
I have question. How to center icon and text on the same line with Bootstrap? I am beginner and I dont know how to do that. I think its easy but still dont know how to do that right way.
Example
0
votes
0
answers
18
views
Bootstrap form template is not working well
I have question about bootstrap form template. It isnt working for me. I added files to my website (not launched yet) and nothing happened. And I copied all files so I dont know what is wrong. Do I ...
0
votes
1
answer
16
views
Unable to use <canvas> element inside <div> element
I'm not able to add <canvas> animation inside <div> element. With the current code, animation takes full page and I want to encapsulate <canvas> inside <div> so that animation ...
0
votes
1
answer
21
views
Delete text style in input text
Hey how i can change input text style to delete style?
<input type="text" value=">Hello World!" />
i want change my input text style like this
Hello World!
-1
votes
0
answers
12
views
open a modal on a bottom of td
look at this picture below :
as u can see i have a table and imagine there is a button on a td, now all i want is that when a user click that botton i should display a modal like what u see on the ...
0
votes
0
answers
38
views
Bootstrap carousel next and previous button fail for some pop up modal in react
I have a Bootstrap Carousel to display groups of photos
There are groups of photos, each time I click on a photo in a group I display a Modal with all the photos in that particular group as a carousel ...
0
votes
1
answer
26
views
put input inside two labels. It just shows the menu but I want to make toggle which helps to hide it again
I am using label tags and put some input with radio types between them.
<label class="text-left text-uppercase mt-1 sidenav-text w-100" for="category" onclick="menuShow();&...
1
vote
0
answers
16
views
Bootstrap 5 how to override "mb-8" for specific element *by adding* "mb-0"?
I've got a quick and simple question.
I have created a form group component which renders,
<div class="form-group mb-8">...</div>
components for a project. As you can see, I give ...
0
votes
0
answers
5
views
Bootstrap 4 multi collapse is toggling to class="multi-collapse collapse in" and not displaying correctly
I want the 4 icons on this page https://communityloaves.org/donation-highlights/ to function similarly to the state boxes on the bottom of this page: https://communityloaves.org/food-banks/. I even ...
-1
votes
2
answers
27
views
Change Bootstrap Version In Big Laravel Project
Hey Guys I have A big Laravel Project And The project Bootstrap version Is 3
I Want To Change It . How I can do it?
0
votes
1
answer
22
views
The Toggle Button Is Not Showing Up
I am trying to fix the toggle button but it is not working I can't tell if this is from me changing a few attributes on my own css file I have look everywhere but can't find an answer
<!doctype ...
0
votes
1
answer
17
views
Custom Bootstrap 4 UI in scaffolded Identity pages broken after upgrading from .NET 5 to .NET 6
I upgraded a .NET 5 blazor server app to .NET 6 and while .NET 6 apps now use Bootstrap 5 by default, I wanted to continue using Bootstrap 4, so I did not update my css or js files under wwwroot.
Most ...
0
votes
0
answers
29
views
Can not scroll in div with fixed height (parent)
So I have got a chat div on the right side, I just want to make this scrollable because when I have more messages I can only see the last few ones.
I've got this code so far:
<div class="col-...
0
votes
1
answer
15
views
Admin LTE - "small-box" distribution
See Image
I want to distribute the "small-box" side by side. What is the correct approach?
Sorry, because I'm a newbie in this.
<div className="container-fluid">
<...
-1
votes
1
answer
22
views
How to enable touch slider options of ng-bootstrap carousel for Angular?
In my e-commerce website I have product images for which I have used ng-bootstrap carousel it works fine (besides the slow initial load issue) However does not support touch/swipe slide to right/left ...
1
vote
2
answers
34
views
How do I change <hr/> tags to vertical lines on larger screens?
How do I change these <hr/> tags to vertical lines automatically when page width increases to allow three columns? On small devices, they properly separate rows. I'm using Bootstrap v4.
<...
1
vote
0
answers
30
views
Accordion toggle on click inside accordion
bootstrap accordion in my application where the requirement is one form inside accordionand when i click search button in that form 3rd accordion must open for that i have written a function like ...
0
votes
0
answers
16
views
How to find which button was clicked on the Boostrap Modal hidden.bs.modal event?
I have some code running on the Bootstrap v4.6 hidden.bs.modal event. I would like to be able to tell which button was clicked on the modal during this event.
Is there any way to do it without coding ...
-2
votes
0
answers
16
views
Replacing jQuery Mobile with Bootstrap
I have been tasked to convert a jQuery Mobile web application to Bootstrap. Initially there is a 27 pages application. The next project has way more pages.
So, my question is what is the natural ...
0
votes
0
answers
19
views
reactstrap navbar shows in 2 rows
I have used the code below to have navbar with reactstrap but it shows in 2 rows and not inline.
I have installed react strap and imported the CSS in app.js
import React, { Component } from 'react';
...
0
votes
0
answers
13
views
Bootstrap tooltips conflicts with scrolling
Can you please tell me if there is a way around this problem? to make the tooltip ignore the scrollbar
new Vue({
el: "#app",
data: {
show: false
}
});
<script src="https://unpkg.com/...
0
votes
2
answers
62
views
Why editing bootstrap.css files don't have any effect on ASP.NET Core Web App?
I'm just learning ASP.NET and I created the default Web App template in Visual Studio. There are some bootstrap.css files under wwwroot folder but even if I comment everything out it doesn't have any ...
0
votes
1
answer
29
views
Angular mdbootstrap , mdb-tabs ngIf condation if true , tab will index at the end
Unfortunately stuck with lots of code here. its referenced like so
"ng-uikit-pro-standard": "file:ng-uikit-pro-standard-8.3.0.tgz",
I am just trying to get a tab to show in ...
-3
votes
0
answers
18
views
I am trying to make a burger-like navbar with Bootstrap but the display action (show-hide) doesn't work [closed]
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container">
<a href="#" class="navbar-brand">App&...
0
votes
1
answer
37
views
When exceeding the number of characters, mark with ... at the end
I would like to know if it would be possible when exceeding the number of characters to return ... at the end?
I have this code, but it always leaves the characters on the same line, I would like it ...
1
vote
1
answer
28
views
How do I align my label and input element contents on separate lines while maintaining centered alignments?
I am trying to align my form contents so that each label falls on a separate line and the input content within the label falls in separate lines after the label element. Please help. I included an ...
0
votes
0
answers
35
views
How to remove a CSS attribute from an SCSS file?
I have a CSS file that gets created from a custom SCSS that imports Bootstrap and AdminLte and does just a few changes. The transpiled file includes the following:
.card-header::after,
.card-body::...
1
vote
1
answer
28
views
Bootbox alert displaying at bottom of the screen
I have recently been tasked with updating my companies javascript alerts with the more customizable bootbox alerts. After messing around with it some, I have gotten an alert to appear on click of a ...
0
votes
1
answer
29
views
Bootstrap circle not round
I can't figure out what to do with the style, for it to display a really round circle instead of the elongated one.
Pretty new to HTML and bootstrap, don't rage at me.
Picture of the circle
<span ...
0
votes
2
answers
20
views
Bootstrap tooltip changes position on its own
im use bootstrap 4.3.1 version along with the vue.js version 2
my code
<div class="container">
<div class="row">
<div class="col-md-7">
...
0
votes
1
answer
31
views
Center section on navbar and collapse section on the right
I'm been stuck for longer than I'd like to admit on this issue. What I am trying to do is get the section which is displayed on the left to be displayed in the center(in a responsive manner).
<...
0
votes
1
answer
27
views
mui table is not responsive
I am using mui table. It is not responsive. I need to set the width in %.
The output is
I attach the screenshort from two different screen
-1
votes
0
answers
18
views
how to implement a mailto: link, and a link to the WhatsApp message send web dialog ...? (laravel Script)
I got the website ready on laravel. but I don't know how to add email and number on these buttons. Below is the Email and Whatsapp button code.
<button style="background-color:black ; color: ...
1
vote
0
answers
13
views
how to parse the bootstrap or tailwind css names into the non-bootstrap or non-tailwind css names
I made a web application based on bootstrap and tailwind, however I don't my web application UI to be visibly viewed in the browser tools. so I wonder if it is possible to parse the tailwind css names ...
0
votes
2
answers
25
views
Bootstrap Carousel not changing slides
I am trying to build a carousel using bootstrap and am using one of the templates. However, the slides don't change when I click the next and previous arrow buttons, and it will transition on it's own ...
0
votes
1
answer
26
views
Bootstrap tabs showing content below previous tab
I have a webform in which i am trying to implement tabs using bootstrap 4. The content for 1st tab is shown fine but when I switch tabs the content for the second tab is shown under the previous ...
1
vote
1
answer
17
views
Is there a way to work around the color restrictions in bootstrap5
I just started learning bootstrap and I am currently following a crash course video, and the developer did this
and I checked and there are like a finite set of colors like danger, warning, primary, ...
1
vote
1
answer
50
views
Don't let Bootstrap "row" content to jump in the new line
This is how my website looks like in desktop view,
And this is how it looks in mobile view,
The Tags looks perfect in Desktop view but in mobile view it is not able to fit all in a single line. That'...
0
votes
1
answer
50
views
bootstrap: highlight clicked navbar with active class
I wanted to highlight clicked navbar with active class.
The is code I have tried:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta ...
0
votes
2
answers
25
views
How to make an open file dialog show when user click on the icon image?
How can I make open file dialog show when user click on the icon image.
I've tried to put input "" but it add button by default any way to make this button invisible.
0
votes
0
answers
14
views
bootstrap 4: card text its not responsive in smaller devices
Bootstrap project
Hi, the text in the card which in my project doesnt look good on smaller devices like telephones.
I want the text to appear right under the photo
0
votes
0
answers
14
views
i am toggling a dynamic list but while un-toggling it is closing other lists and then toggling the current one
here I have a dynamic list which has items of each subareas and the item list may vary in size with respect to each subareas. I have to toggle the item list when respective subarea is clicked
there ...
0
votes
0
answers
40
views
how to make sidebar with a top navbar CSS
I have been trying to make a top navbar together with a side navbar like the one shown here.
The blue part is a responsive navbar, where its height will change according to different devices. ...
0
votes
0
answers
9
views
how to get a slight curve in a div [duplicate]
I am trying to get this curve
however when I apply the border-radius property, I get something like this
I'm trying the clip-path property, however I can only emulate it with the polygons property, ...
0
votes
1
answer
23
views
rendundant spacing between bootstrap buttons
I have two buttons side by side and for some reason, I have some spacing between them, it's spacing that I can't inspect.
this is the spacing: image
<div>
<button h class="btn btn-...
0
votes
2
answers
33
views
Why isn't my navbar toggling with bootstrap?
I looked over my code a few million times, comparing it to the example on the official docs page. Spell checked. Watched a tutorial. I also checked that I added the right JS files. Why isn't my nav ...
0
votes
0
answers
17
views
jQuery UI messes up Bootstrap Button toggle group
I have this element
<div id="someid" class="btn-group btn-group-toggle" data-toggle="buttons">
that get's messed up with jQuery UI as
<div id="someid" ...
-1
votes
1
answer
19
views
Bootstrap issues with margin in container
I have issues with container. I want to change margin of container but I dont know how to do that.
I have tried to change css file, margin-left and margin-right but it doesnt work good. Its not ...
0
votes
0
answers
10
views
Create a "Next-Next" webpage UI experience using bootstrap
steps to reproduce
go to microsoft edge learning page
https://microsoftedgewelcome.microsoft.com/en-us/mb02?form=MT004A&OCID=MT004A&slide=learn-more
click on the welcome link on the left ...