Questions tagged [bootstrap-4]
3945 questions
0
votes
0
answer
3
Views
How do I increase the target size of a custom-checkbox in bootstrap 4?
I'm using forms inside list items in bootstrap 4 and have been using and a small event handler inside my form controls to make the entire clickable, instead of just the small label and checkbox. stretched-link increases the target to the nearest relatively positioned item.
Unfortunately compared t...
1
votes
2
answer
860
Views
How to show something only on a certain screen size in bootstrap 4?
So i wanted to be able to show a image on a html on only md screens. I was thinking to hide the image from sm and down, and hide from lg and up.
Anyway i can do this?
1
votes
1
answer
3.3k
Views
Bootstrap 4 Carousel columns instead of carousel-item
Does Bootstrap support displaying grid columns or rows in Carousel instead of carousel-item -s? The idea is to have a complex grid column structures that interchange with each other just like carousel-items. For example if we have the following grid:
I would like to be able to represent row1, row2 a...
1
votes
1
answer
250
Views
Using input groups (with addons) together with help-text in Bootstrap 4
I'm having a hard time getting Help-texts showing up properly (i.e. at the bottom of the field) with Bootstrap 4's input-groups with add-ons. Here's my code:
Title
Some .
Here is what it looks like:
Am I missing something obvious?
1
votes
2
answer
2.5k
Views
bootstrap 4 container-fluid is not full width after removing the default padding
I want to make a full width web page by Bootstrap 4.
I try to remove the original 15px padding of container-fluid, but it is still not working.
Details on jsfiddle. I marked the whole background as purple but u can see the jumbotron is not fully cover on the purple background.
.container-fluid {
pad...
1
votes
1
answer
676
Views
pull/float right not working in Bootstrap 4
I have an angular app and I am using bootstrap and angular material to design it. I want to create a header to the app and I have 2 buttons in the header, one on the left and the other suppose to be on the right.
here is my component
Note: I've tried both pull-right and float-right.
to add bootstra...
1
votes
1
answer
551
Views
Custom Boootstrap 4.1 Toggler Animation
I'm trying to add a custom menu toggle to Bootstrap 4.0's Navbar menu. The code I am using is from Codeply HERE. I am trying to apply the X toggle style to my website's bootstrap navbar. Here is what I currently have now.
Title
Link
Link
.navbar-collapse
InfoInformation Section
ServicesServices Sec...
1
votes
2
answer
209
Views
Second bootstrap navbar overlapping a dropdown-menu from the first navbar?
I have two fixed-top navbars, the dropdown-menu from the first one gets overlapped by the second navbar. Tried messing around with z-index, positioning and overflow.. Also found a couple somewhat related questions but nothing seems to be helping. Any ideas what could be causing this?
Link to
FIDDLE...
1
votes
2
answer
535
Views
How can we make list-group horizontal with Bootstrap 4
With Bootstrap 4, the list-group component is very rich with design aesthetics, such as with borders, background colors, rounded corners, etc..
With my following list...
item 1
item 2
item 3
item 4
...how can I make it look fancy like the following....
item 1
item 2
item 3
item 4
...and still keep...
0
votes
0
answer
3
Views
customizing images sizes in bootstrap carousel
I am trying to make simple carousel using bootstrap and im having a problem with image sizes, i want it to be full screen images. I tried adding margins and paddings but it doesnt work.
any help ? here is my code
-1
votes
0
answer
20
Views
Why bootstrap spinner not work for me in react?
I use 'react-bootstrap': '^1.0.0-beta.6'
I successfully use buttons, forms, allert, cards, navbar, but can't use spinners.
I can import spinner, but spinner no rendering
// THIS NOT WORK FOR ME
import Spinner from 'react-bootstrap/Spinner'
0
votes
0
answer
6
Views
Editing the bootstrap classes
I am a beginner at Bootstrap, and now I'm learning Bootstrap
and I have a question about editing the bootstrap classes
I want edit the bootstrap classes For example I want change the border size and color ,
I create the file (main.css) and call class For example :table
and define the new border an...
0
votes
2
answer
24
Views
Close bootstrap modal after ajax call
I want to close bootstrap-modal after ajax call. For, this purpose i call '$(myid).modal('close')'. This event is called but not in a proper way. Likewise, the modal box is gone but an overlay of grey colour is not fade out some reason. Below I put my some stuff for look up and help me.
Thanks a loa...
1
votes
2
answer
24
Views
How to remove the error message after successful login
I have a login page where i can fetch the username and password through api. After successful login also an error message is displaying how to remove. Here is my fiddle. Help me how to remove the error message after success. If the password is wrong then the error message should display.
HTML
Please...
0
votes
2
answer
18
Views
How can we hide background content of div?
Hello everyone I am learning HTML and CSS I have question regarding hiding div background content or background view. want to show only current div content.
I have div in that I am showing some content.But facing some problem while its displaying.I am showing this div but its also showing background...
1
votes
2
answer
1.2k
Views
ng bootstrap 4 - typeahead open on focus
I use ng-bootstrap 4 (beta 8). At the moment i have this:
{{ r.label }}
Now, I want to open typeahead, if the user click in the input element. How can I do this?
this.search = (text$) =>
text$
.map(term => (term === '' ? this.items : this.items.filter(v => v.label.toLowerCase().indexOf(term.toLowerC...
0
votes
0
answer
17
Views
bootstrap 4 col-sm issue with flex-direction column
A section on the site for col-sm needs to display as columns. In my case for 577767, both the divs are showing as rows and are not taking the full width as well. When i disable the flex-direction: column, only then the two divs show as columns for col-sm.
When i change the same to col-med, above be...
0
votes
0
answer
5
Views
NGX-DATATABLE RowClass select particular column or cell within row
Instead of selecting the entire row like this
I just want to select 2 cells like this using data from rows, is there a way I could achieve this?
1
votes
2
answer
893
Views
CSS use color from another class?
Is it possible to import a color from one CSS class to another? Or create some sort of global color define and then use it in multiple classes so that doesn't have to be updated in multiple places if you want to change a color?
For example say I have a CSS class that I want to use for specific eleme...
1
votes
1
answer
49
Views
Link_to using on div instead of text
Can I use the link_to clickable for the whole div instead of only clicking on ¨Boeken naar afas¨?
Like at this moment if you click on ¨boeken naar afas¨ then the link_to does something.
I want to have it on the div instead of the text. So when you click on the div then it will be triggerd the ¨...
1
votes
2
answer
664
Views
ng-bootstrap dependancies and warning
I wish to use ng-bootstrap.
The documentation ask to install bootstrap CSS as dependency, but do not include jQuery
if I install bootstrap with npm I get warning that it need jquery and popper.
$ npm i -S bootstrap
npm WARN [email protected] requires a peer of [email protected] - 3 but none is installed. Y...
1
votes
1
answer
70
Views
Bootstrap 4 Grid - 3 Columns - 5.5 - 1 - 5.5
Looks like half column sizing is doable in Boostrap 4.
I'm trying to do a basic responsive layout like the following. I realize they have to add to 12.
Column 1 (5.5) - Column 2 (1) - Column 3 (5.5)
This article seems to suggest it's possible? I want to ensure it keeps base gutters and spacing.
http...
1
votes
3
answer
515
Views
How to implement RTL bootstrap 4 navbar?
I'd like to make my bootstrap navbar RTL. That is the logo in the right and the links flow from right to left. I have tried different tricks but none of they works. Here is the code I have right now:
Logo
Link 1
Link 2
Link 3
How can I fix this code to implement RTL navbar?
1
votes
1
answer
69
Views
CSS - Change Div background color depending on an image color inside the same Div
I want to change the background color of a div when hover over it, depending on an icon inside the same div.
Do someone know what to use (CSS, Bootstrap ...) to do it in easy way, and how?
That is an example link:
https://appsource.microsoft.com/en-us/marketplace/apps
And that is a picture if you do...
1
votes
4
answer
1.1k
Views
How to use bootstrap navbar and dropdown (with angular 7)?
I try this but when i click to Dropdown link nemu, nothing happens.
dashboard
calendar
manager
Dropdown link
Link 1
Link 2
Link 3
EDIT:
I use https://ng-bootstrap.github.io/#/components/datepicker/overview and navbar do not present.
1
votes
3
answer
48
Views
Bootstrap 4 component with same padding like card and without custom css
I am placing elements on top of my card like so (run snippet):
right
left
right
left
Sequi ad provident non. Et ea beatae ipsum sint. Quas omnis libero similique maxime perferendis pariatur aut ut. Alias quo et modi eaque. Et doloremque minima adipisci error quia rem.
Minima quibusdam sunt sint...
1
votes
3
answer
34
Views
creating responsive grid sytem and ordering
I have a simple section which I am creating for my app, this section contains one row with 3 columns each column have 3 divs.
JSFIDDLE: demo
Here is what it should look in desktop view
Here is how it should look in small device
so far here is my solution I tried, but am not getting what I want .
HTM...
1
votes
2
answer
77
Views
Move checkbox label to left on bootstrap custom checkbox
I have a checkbox
Option 1
How do I move the label to display on the left? I have tried changing the order but it just breaks the checkbox functionlity.
Option 2
CODEPEN Link to show both examples
1
votes
4
answer
87
Views
Booststrap 4 Grid System , I'm not able to achieve this layout
I can do this layout in normal CSS using flex and grid, But I need to know how to do this using bootstrap 4, There is nothing left to try .
d
d
d
z
This is what I need to get
1
votes
2
answer
51
Views
How do I align elements horizontally?
I have three elements (DIVs) and I need to align them horizontally. I'm following Bootstrap's guides and it won't work.
This is what I need it to look like:
This is what it looks now, it's aligned to the left:
Here's my code:
.price-selection {
border: 1px solid #8ABE57;
display: inline-block;...
1
votes
7
answer
97
Views
How to make <tr> clickable as a link instead of cell?
This must be a very easy and simple but i'm finding it hard to get it done.
I have a list of rows with 6 Column which shows data from mysql. I would like to make each row clickable instead of cell which opens a new url in new tab.
Here is the structure.
Above Method Don't work.
Any Help is appreciat...
1
votes
2
answer
71
Views
Unable to align div content
I am developing an application using Vue.js and Bootstrap. I am looking to develop a folder to look like this:
But, I am unable to align the contents to make sure that it looks like in the above picture.
The picture currently looks like this:
Here is the code:
folder
Folder Name
20 files
What wro...
1
votes
3
answer
84
Views
Scroll to the top of bootstrap accordion when opened
I've recently been working on a small blog, and would like consecutive blog posts to be accessible from within an accordion (example below). This way, you can quickly skim over post titles, select one which is interesting, and read it. When finished, you can seamlessly go back to skimming without un...
1
votes
2
answer
26
Views
Stripped rows with no table - children divs inside divs
I would like to have stripped rows with 'complex' children. I can't figure out how to do this.
I use bootstrap, not sure if it makes any difference, i guess no ;)
Here is what I do:
https://jsfiddle.net/1w9tv4ce/2/
I want all test-01 to be green for exemple, then test-02 black, test-03 green, test-...
0
votes
0
answer
28
Views
Fixed-top navbar hiding content under it
I have a fixed-top navbar created with bootstrap library. I have padded the body from top to avoid hiding the content under it. But when i click on a link 'about us' for example, the top of that will hide under the navbar. Is there anyway to fix it so that the content of about us is just below the...
0
votes
0
answer
3
Views
jquery mmenu 8.0.4 integrate with bootstrap 4.0.3
I am setting up mmenu 8.0.4 with bootstrap 4.0.3 but its not working if i remove bootstrap and its wrapper it works but stops working when bootstrap is added i use all the resources from cdnjs.com
Navbar
Home (current)
Link
Dropdown
Action
Another action
Something else here
The title
Some content
Fo...
0
votes
1
answer
19
Views
How to make margin more that mt-5 or mb-5 in bootstrap4?
I have a form that I need it's margin-top to be 100px.
Can I have this margin with bootstrap classes or I need to define a custom class for it?
Maximum margin-top that I can achieve here is 48px
0
votes
1
answer
22
Views
Is it okay to have more than one “:root” selector?
In TWBS 4, bootstrap.css has a :root selector with color variables.
Can my child stylesheet also have a :root selector, for my own variables?
I'm guessing :root {} can be overridden and added to like any other selector, but I haven't been able to find any discussion or example of it.
So far, I've pu...
0
votes
0
answer
15
Views
How to check if user input is valid?
How would I be able to check if a user's input (email address and password) are valid within a database? I need to be able to get the user's credentials from my website and validate it with my 'testlog' database. I am new to web development and I have looked everywhere, but most of the forums do not...
1
votes
1
answer
233
Views
How to install bootstrap 4 version beta.2 in an angular 4 application?
I tried installing bootstrap 4 version beta.2 and its dependencies (jquery and popper.js). but there is something very weird going on. for some reason, I keep getting an error message in the console, saying 'SyntaxError: export declarations may only appear at top level of a module'. when I click to...