I has problem with bootstrap css file in php mvc everything work fine but the direction not go to right to left and bootstrap css work fine but when i delete the bootstrap css direction go to right to left because i want to let page go to right to left or left to right depend on language
You probably see this effect because Bootstrap is applying styles that only work in a LTR context. It looks like there is currently no support for RTL in Bootstrap, though it sounds like it is planned for Bootstrap 4. There are a handful of 3rd party support tools for this, but I cannot recommend any as I have not tried them.
Related
I'm working on a web in Wordpress and I have some trouble with the footer. I have three widgets and in the middle one I want to put some social icons. I have tried with different plugins and the problem is the same: first icon shows great but next are showing a weird border and I have no idea how to modify.
Could someone pitch in?
Thank you!
It might be a css style issue. If the first icon looks right, maybe the styles only apply to the first because the icon html elements aren't having the same class or the css selector is wrong (something like icon-class:first-child).
I would check your Browser Dev Tools:
Check if the icon html elements are all having the same class.
If they do, maybe the icon file itself is just ugly. You can check the file in the dev tools by hovering the file URL. If that is the case, the plugin provider should updates the icons.
If the don't have the same css class, you should customize your css, maybe there is a way in the widget plugin.
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 am trying to make a website with Bootstrap with a vertical sticky navigation. Now, when my website is viewed on mobile devices, I wanna add a toggle push effect to it like shown in this pen: http://codepen.io/mathelme/full/dHIah
I just wanna know if it's possible to achieve with Bootstrap 3, if not I'll just make my own script. I am really new at Bootstrap and also kinda new to JS.
Any help is very much appreciated! :)
Well, you have absolutely nothing of your own and this is not a coding service either, so I'll give you the tools to do it: you can use (for example) Google Nexus Website Menu from Codrops tutorial and easily adapt it to Bootstrap or Foundation, I have done it for both, so I can promise you it's incredibly easy. As a tip, you'll see that <div class="container"> which is like any <div class="container"> in Bootstrap, and from there just change the content and menu width to col-md-3 and col-md-9 or whatever you need.
You could also use this tutorial from the same site, which is equally easy, you just need to pay attention where you place the menu part, and eventually change the targeted div in your Jquery, but it's really easy, basically replacing those non-Bootstrap divs for Bootstrap divs and that's it.
Of course, these are just some suggestions, you could also use your own example as well, and there are thousands of way to do this, but if you don't know much about JQuery, guess these 2 tutorials will really help you since they work equally well for the experienced coder as for the novice
I just started with ROR and I'm following the One Month Rails tutorial. This includes the Bootstrap responsive navbar. I now added some pins to my pinterest clone. I noticed that the scrolling does not work when the navbar is in full size. when i make the browserwindow smaller so the navigation gets into the small navigation symbol i can scroll the page. You can probably see best on my heroku link: morning-shore-7790.herokuapp.com
It would be great to get a hint on how to solve this.
Thanks a lot
Looks like you've nested the container class inside the navbar, which will always cause this behavior.
If you're using ERB it means you didn't close a div where you should have, if you're using haml or slim it's most likely an indentation oops. If you use chrome, safari or firefox you can see this clearly, just inspect the element and collapse the navbar, if all other content is contained within that, you still haven't fixed it.
If you still have questions post your layout and your index.
I have a strange behaviour in screen layout, I do not understand the possible cause:(
I have a vertical grey line on the left and the right of the screen,
See screenshot here:
BTW, I developed using Rails 3 and using Twitter Bootstrap 2.3.2
In facts I do not foresee / I do not want these lines ... I presume it could be some CSS setting (on my one customization css code...), sorry for my ignorance there,
watching the shot here do suggest you something about why the grey vertical line on the left marging and the right margin of the screen layout ?
thanks a lot
giorgio
scss customization file used: http://solyaris4.altervista.org/custom.css.scss
Without looking at any CSS and HTML code it is pretty difficult to tell.
But since it looks like you are using the Google Chrome browser, hover over the grey stripe with your mouse, right-click and select Inspect Element. You can then review the html and css code related to what you are looking at. You can also open the Chrome dev console at any time by hitting the CTRL-SHIFT-i keys.