Questions tagged [bootstrap-4]

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...
joeforker
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?
Leed
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...
astralmaster
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?
Rodolphe
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...
asservir
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...
Yedidya kfir
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...
Haxz4Lyfe
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...
Jonathan Laliberte
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...
klewis
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
Nor Elhouda Gribi
-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...
Mahdi Adeli
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...
Bhavin Patel
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...
lakshmi priya
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...
Kanekar
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...
rn16
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...
learning...
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?
Jin
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...
Dan
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 ¨...
akin
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...
Maxime Hebrard
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...
aherrick
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?
Babr
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...
Ebraheem Alrabee'
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.
sgrillon
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...
Jankapunkt
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...
user9964622
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
JaChNo
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
Thanveer Shah
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;...
Paula
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...
redface
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...
CoderPJ
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...
TimD1
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-...
gertrude
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...
Talha Munir
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...
Zain Ul Abideen
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
Ahmad Mobaraki
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...
Genki
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...
legendaryspartan98
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...
Kenchi

View additional questions