I'am using Bootstrap 4 in React.js project.
I have two elements - navbar and alert implemented from Bootstrap4.
Since I've set position:fixed in both (overrided css) both of them become semi-transparent. I've never used transparency for neither of them and haven't use rgba color codes for them. It just happened by itself ... why and where I should seek ?
I found the answer by myself. Post it here in hope to be helpful for some other newbie :)
So:
When you're using Bootstrap4 read documentation carefully ;)
When you want fixed top/bottom navbar WITHOUT transparency instead of overriding .navbar class in your's csses by adding position:fixed apply ready-to-use Bootstrap class fixed-top/fixed-bottom/sticky-top applying them to your html/jsx Bootstrap element
Docs: https://getbootstrap.com/docs/4.0/components/navbar/#placement
Related
I have a rather specific issue. I am using the Chart.js library to create some charts within some div .carousel-item elements. I am also using a Bootstrap 4 template that comes with its own css and some js.
In this specific case I am creating the div .carousel-item and canvas elements dynamically. In the past these were not created dynamically and worked perfectly with the provided css. Now that I am creating these dynamically, the css is not able to properly render the canvas elements. I have attempted to isolate the cause but have been unsuccessful in doing so.
Here is a link to the JSFiddle that demonstrates the issue. If you delete the css the charts will appear how they should without the carousel.
This took me a bit longer to figure out than I am proud to admit but here it is.
The first div .carousel-item in a carousel needs to also have the active class. Otherwise the carousel has nowhere to start from.
CSS Blend mode is "deactivated" when used inside fullPage's default containers, section and slide.
Creator Alvaro Trigo instructed me to use option css3: false to solve the problem, but it only works with section and not with slide and besides, it makes page rolling animation quite choppy.
He also advised me that this is not a fullpage issue, but rather a css one.
Here is a codepen illustrating the issue:
https://codepen.io/zerino/pen/MXRvbb
And here is the topics in fullPage´s issue forum:
https://github.com/alvarotrigo/fullPage.js/issues/3288
Plugin is not the problem, you can delete all js from your example and blend mode still doesn't work.
According to the spec:
The mix-blend-mode CSS property describes how an element's content should blend with the content of the element's direct parent and the element's background.
Blend mode interacts with element's direct parent only. You can test it by setting a background color for .intermediary like I did in this example.
#import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
I have a an 'overwrite' problem (similar to how bootstrap forces link-style, but you can just use !important). In pure-css you can create responsive menus.
It has a small 'icon'-like thing (see here: http://purecss.io/layouts/side-menu/# resize to small screen first).
I Installed bootstrap, and now simply, the 3-line 'icon' doesn't appear anymore... What could be the problem? Removing the bootstrap link makes it work again... I can't find any style responsible for the 'icon'...
Should i post a jsfiddle? You can simply add bootstrap css with Chrome 'sources' into the css file and save it here: http://purecss.io/layouts/side-menu/#...
Thanks in advance
I fixed it! In the end all i had to do was set the property box-sizing to content-box for .menu-link using CSS. Bootstrap automatically sets it to border-box.
box-sizing: content-box;
Some Context
I am playing around with Angular-material and trying to see how well it plays with bootstrap. The Angular-material start project shows off some of the cool things it can do, but it seems like it seems like Angular Material still requires a lot of custom CSS for my non-designer skills. Ergo, why I'm trying to see if it's a good idea to try to use bootstrap and angular-material together.
If this is a terrible idea, please let me know.
My Problem
The icons in the side panel of this codepen should be circles, but they are squares! I can see the border-radius property with Chrome debugger tools but I cannot figure out why it is not being honored.
To add to the mystery, when you click one of the items then all of the icons below that do in fact become circles for a moment.
Can someone with more CSS experience than myself tell me what's going on or how I might debug this more completely?
And any feedback about using angular-material + bootstrap together is also much appreciated.
I also experienced this problem using angular, where the border-radius is not honored, when trying to style an element that is part of a ng-repeat. I found that if you apply the style to the child element of the ng-repeat instead it will honor the border-radius property. This is more of a workaround than a solution, as I also don't understand why this happens.
So in your case you could do:
.avatar svg {
border-radius: 50%;
}
I'm developing a Meteor app with Bootstrap 3 package already installed and trying in making a buttons navigation.
I've noticed that buttons have space in between but, even if i've inspected, i was not able to discover any margin style property to make it possible.
How is that possible? Where did these margins come from?
You can see and inspect the buttons even in the official Bootstrap 3 Doc http://getbootstrap.com/css/#buttons
The issue comes from the CSS property display:inline block which forces white-space between inline elements. It is not an HTML specific issue. See this post from CSS-Tricks for more information: http://css-tricks.com/fighting-the-space-between-inline-block-elements/.
A workaround fix is to modify the HTML, which #Dan posted, but this forces you to break standard HTML formatting and a developer down the road could space things out and break your solution.
A few CSS fixes are to use floats instead of display:inline-block. You can also add negative margins on your buttons to remove that space.
It's not margin, it's actual spaces in the HTML.
If you place the buttons on a single line in your code there won't be any spacing.
See this bootply demo for an example of buttons with no spacing. Also refer to this question How to remove the space between inline-block elements? for more information.