Most voted "bootstrap-4" questions
4th edition of the Bootstrap framework. Use this tag on issues related exclusively to this version.
Learn more…332 questions
Sort by count of
-
20
votes3
answers46967
viewsWhat is the difference between col-lg-* , col-Md-* and col-Sm-* in Bootstrap?
It’s been a long time since I’ve used the Bootstrap I have worked with almost all versions. Normally to structure my applications I use the grid bootstrap, row to create lines and col- for columns.…
-
10
votes1
answer1138
viewsWhy does Bootstrap 4 use "rem" and "em" instead of pixels?
As you can see here and here, Bootstrap 4 uses the drives rem and em instead of using in px. Code snippet using the unit rem: $display1-size: 6rem !default; $display2-size: 5.5rem !default;…
-
6
votes1
answer292
viewsWhat’s the use of padding Bootstrap’s container?
What’s the point of padding of container of Bootstrap if the row has a margin negative that cancels this padding? If I want my entire page to have one padding so it doesn’t stick to the edge like I…
-
6
votes2
answers73
viewsWhat makes a code have different visual representations in different browsers?
I have a website that I am developing on which I have a top set menu (a navbar). The problem is this navbar has different views on Chrome and Firefox. I’d like to know why this is happening. I use…
-
5
votes2
answers156
viewsPin tabs bar below navigation bar (navs x navbar)
Goal Create a tabs menu bar, below a menu bar, both fixed. Test scenario <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script…
-
3
votes3
answers1222
viewsBootstrap grid not working!
I am developing a site and the bootstrap grid is not working... MD and SM are working properly, but when I test the site responsiveness XL does not work.. the images are one below the other instead…
-
3
votes1
answer435
viewsWith flexbox, center list aligning items on the left
I’m using Bootstrap 4 as documentation (https://getbootstrap.com/docs/4.0/utilities/flex/). Using the class Justify-content-center I have the following result: My div is with the classes: d-flex…
-
3
votes4
answers2171
viewsCSS, Bootstrap4 Cards Side by Side
good morning! All right? I am having difficulties with bootstrap 4, when using cards I would like them to line up side by side, but they are below each other and I do not know how to leave them side…
-
3
votes1
answer37
viewsPosition of columns that need to be "collapsed"
I was hoping to put two columns of content on the same Row. However the two columns (col-6) can be shrunk (collapsed), but when I add the class "Collapse", they are displayed vertically. I…
-
3
votes1
answer320
viewsHow to align the content of a Nav Bar so that it is in the center of the screen?
I have a Nav bar that I need to put your content in the center of the screen, I’ve tried several codes but it always stays to the left, follow my current code <nav class="navbar navbar-inverse…
-
3
votes2
answers688
viewsCreation of buttons with bootstrap
I need to create buttons with the bootstrap style similar to the image below. You can find the buttons: https://fontawesome.com/ However I can arrive only in this result: I use the following code:…
-
3
votes2
answers90
viewsVertical alignment of a div
Hello, I’m mounting a screen that for now is as follows: However, for this "vertical alignment" this div is, I am using a margin-top with percentage to help, but I believe that is not the right way…
-
3
votes3
answers93
viewsAlignment of photons
I’m trying to align my form this way: But I can’t get the inputs Yes and No to line up on the right. I tried to use bootstrap and split it into cols but unsuccessfully as well. Follows html and css…
-
3
votes1
answer618
viewsBootstrap div navbar overlay image
I need to put the logo of a company on the navbar div of Bootstrap, making the half stay on this div and the other half off (gray part) and follow the top when the user descends the screen. Look at:…
-
3
votes1
answer282
viewsHow to leave bootstrap columns under each other’s collars
<style> #a1 { background-color:#05466f; height:120px; } #a2 { } #a3 { height:303px; background-color:red; margin-top:57px; } #a4 { width:100%; height:51px; background-color:pink;…
-
3
votes2
answers255
viewsHow to make a horizontal line between two <td>?
I have a <table> divided into two columns, and I need that in the vertical middle of each column have a line starting from the <td> from the left to the <td> right, in this format:…
-
3
votes2
answers57
viewsHow to add Hover to Bootstrap icons
I would like to know how to add Hover to Bootstrap icons. So far my code is like this: <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="rgba(194, 56, 58, 1)" class="bi bi-book…
-
2
votes1
answer12040
viewsWhy are the pull-left and pull-right classes no longer working in Bootstrap 4?
I’m updating the code to the current version Bootstrap 4 and was in Bootstrap version 3. I have updated the CSS, JS, and other files. It turns out that some parts are no longer working. These are…
-
2
votes1
answer3581
viewsHow to adjust the label size in bootstrap 4 to fit the small input?
I have the code below and I don’t know how to adjust the label to suit the same size set in the input element. As it is, Label has larger text than Input. I’ve tried using the . small class but it…
-
2
votes2
answers230
viewsHow to put the boostrap menu in the middle of the screen?
Look at the picture; Click here How do I get this menu to be in the middle of the screen? The difficulty is because I’m using Bootstrap 4, I’ve tried everything. I wanted it to look like this below;…
-
2
votes1
answer381
viewsCalculate horizontal distance of an element
I’m trying to customize a button submit using Bootstrap 4 Beta 3. The idea was to do something stylish "slide to Unlock"; however, it is only working in a resolution above 992px... I believe this is…
-
2
votes1
answer309
viewsWhat is it and how to use Sass and Npm in Bootstrap 4?
I’m learning to use bootstrap and these words came up and I’d like to understand what they are and how to use them.
-
2
votes2
answers1048
viewsChanging Width of a Modal
Hello, while trying to increase the width of a modal in bootstrap 4, I tried to change the width of the modal-lg through css as I saw in the English stack overflow. However, I’ve tried the same code…
-
2
votes1
answer109
viewsHow to disable Bootstrap 4 Popover on mobile only?
Today I use Popover in some places of my site, but I wish they did not appear in the mobile version. There is something in the call script that I can do so that it only appears in the desktop…
-
2
votes2
answers177
viewsSmooth height change
I’m making a Navbar where it will decrease the height and change the color in the scroll event. My problem is in making this transition smooth. I managed to do for the color, but not for the height.…
-
2
votes1
answer99
viewsHow to increase modal popup width in mobile
Good afternoon, I created a button that opens a modal in bostrap, inside it I inserted some tables. On the desktop works perfectly, but in mobile one of the tables "burst the modal". I wonder how to…
-
2
votes1
answer1400
viewsCarousel bootstrap 4 only in mobile mode
Given the image below that represents desktop mode, I would like to know how to turn a Carousel only in mobile mode. !--- Team -----> <div id="team" class="team"> <div…
-
2
votes2
answers171
viewsHow to change the type of an input through events?
I’m trying to use the input with type="date" as follows: When you’re in GRID XS.. MD will use the select native to the apparatus When you’re in GRID LG.. XL will use the input pattern I tried to do…
-
2
votes1
answer2534
viewsBackground with gradient and undulations
I wonder if it is possible to create the image effect below using CSS. Make the gradient is quiet, but I’m having trouble making the ripples. #teste { width: 100%; height: 300px; background-image:…
-
2
votes0
answers1105
viewsModal form validation with Vue and Vuelidate
I have a form inside a modal and I am doing the validation of fields (client side) using the plugin vuelidate. Use the plugin bootstrap-Vue to create the modal, however, when I implement the…
-
2
votes1
answer901
viewsMultiselect in dropdown format in Bootstrap 4
I’m having trouble finding a multiselect in bootstrap 4 with "dropdown" format. The only element it allows is this way: I’d like to leave it in this format: As I recall, this did not happen in the…
-
2
votes2
answers175
viewsInput does not track col-Md-8 size
I’m training in creating Forms, and I’m making use of bootstrap in it, mainly from <div class="row"> and <div class="col-md-4">. However, when I put only two elements on the same line,…
-
2
votes1
answer3203
viewsHow to put an Icone/Lookup Button inside an input with Bootstrap?
<form class="form-inline my-2 my-lg-0 pl-3-lg"> <input class="form-control" type="search" placeholder="Pesquisar" aria-label="Search"> <button class="btn btn-dark ml-1"…
-
2
votes3
answers650
viewsChange the CSS Display property to ALL elements of a page and leave Block only for some?
I’m trying to make the impression of a bootstrap-modal which is called within a form with includebut I want to print ONLY the modal, can I do it using only CSS? See: Modal: <div class="modal…
-
2
votes1
answer4844
viewsVertical Alignment Bootstrap
Hello, I’m creating a bootstrap 4 site. By trying to center a section of my site vertically, it just doesn’t work. I tried to use several ways to center the text (flexbox, custom css, ...), but…
-
2
votes3
answers358
viewsDo not close Bootstrap dropdown automatically
I have a Bootstrap dropdown where a dynamic list is loaded when the user opens it. The problem is that each time there is an iteration, for example when the user deletes an item from the list, the…
bootstrap-4asked 6 years, 1 month ago RRV 519 -
2
votes2
answers60
viewsproblem leaving a text on the left and 2 items on the right
.col-item { border: 1px solid #E1E1E1; border-radius: 5px; background: #000; } .col-item .photo img { margin: 0 auto; width: 100%; } .col-item .info { padding: 10px; border-radius: 0 0 5px 5px;…
-
2
votes1
answer316
viewsChange label color Bootstrap
How do I change the label color of my button depending on the value it has? On my form, in the field status, I need that when the value is in "open", green, when "finished" is in blue, and when…
-
2
votes1
answer786
viewsShow a Collapse and hide the other BOOTSTRAP 4
I found several answers here, but for bootstrap 3. I even tried to adapt to 4 but without success. I’m trying to make when I show one Ollapse hide the other and vice versa(I can’t use static "id"…
-
2
votes2
answers957
viewsCards with smaller content breaking
I’m using Bootstrap 4 to assemble a page, and at the time of making cards they are getting bigger or smaller than the others, even if they use the same class col-sm-4. It’s breaking because their…
-
2
votes1
answer218
viewsngx-bootstrap + angular 6 + datepicker
Hello, I am using ngx-bootstrap datepicker for the first time and am encountering some difficulties. One of them is that when selecting the desired date, my input is in the exact format I need, as…
-
2
votes1
answer169
viewsLeave images together and responsive
I need to let the images meet one under the other, occupying half of the container and next to you the description of this image. She needs to stay that way. At the moment she’s like this But there…
-
2
votes1
answer433
views1 item on the left and two items on the right good bootstrap
I’m trying to get 1 item lined up on the left and 2 items lined up on the right with Bootstrap 4, tried to use flexbox but since there are 3 items in the middle and one at each end, I tried to make…
-
2
votes1
answer2387
viewsprevent image from crossing div
Hello, I’m starting my learning with dimensions and scales in Bootstrap. I started making a container occupy the entire screen, and distributes 3 divs to occupy the container independent of its…
-
2
votes1
answer32
viewsVertical alignment of two elements within a column
I’m trying to make a layout as shown in the image. Two columns, the second being aligned with a text at the top, and another text below. So far, what I have achieved is to align the entire text…
-
2
votes2
answers2291
viewsHow to Decrease Card Size in Boostrap
Hello, I’m editing a boostrap template in race, but I’m not managing to organize a page with cards and columns. I would like to decrease the size of the cards so that they fit four per line. My…
-
2
votes1
answer631
viewsbootstrap line break does not occur
Good evening, I’m learning how to use bootstrap 4. I made a menu using navbar and nav-brand, everything works normal but when it comes to the sizes sm and md for some reason the background size gets…
-
2
votes2
answers3520
viewsResponsive bootstrap layout
I’m creating a system using bootstrap, to make it responsive I used the classes col-xs-12 col-md-2, when I resize the page the responsiveness works perfectly, but when I use the mobile mode of the…
-
2
votes3
answers397
viewsFooter does not remain at the bottom of the page
I have the following footer: <footer class="page-footer font-small footer-fundo-cinza"> <div class="container"> <div class="row pt-3"> <div class="col-md-4"> ... </div>…
-
2
votes2
answers148
viewsas leaves the dropdown background white
I’m having difficulty leaving the background of the dropdown white (I wish I could remove this transparent from it) <!DOCTYPE html> <html lang="en"> <head> <title>Brown…