I designed a page. Everything was working fine, and then I was going to add a carousel into a mobile media query in lieu of what I had already had, and noticed that just by loading in Bootstrap all my page got messed up.
What is bootstrap changing, or overriding? Or what does Bootrstrap override by default that I don't know about. I tried googling for an answer for a few hours but couldn't find anything. I even checked an article top 10 common mistakes with bootstrap.
you could potentially have class names that are also bootstrap class names, which would override whichever styles you had on those classes. If you look at the bootstrap documentation you can compare your class names to bootstraps. whichever components of yours are effected, check for similar components from bootstrap and you may just have to change some of your class names.
Double check your media query. You might have set it wrong.
Also, which carousel are you using? Bootstrap carousel? Please upload some attachments for better understanding.
Related
good day guys, i am new to web development, so apperntly, i got a work to design an ecommerce site for a client. the client wants something similar to www.gallerydept.com . But when i used inspect, i noticed the cdn is shopify's and not bootstrap and i'm only familiar with bootstrap.
how can i convert or intergrate bootstrap?
or what is the best suggestion or advice you can give me?
(please remember i'm new to web dev)
A suggestion would be - Don't use bootstrap within shopify.
Reason - Bootstrap has their own set of customizations and shopify's depends upon the theme you are using. Let's consider two scenarios:
For example, you want to create a modal popup and you directly use the bootstrap's library for the same. The look and feel will be different and then you would add your own CSS to override that - problematic thing.
Second scenario, you integrate bootstrap's cdn into shopify then all the other components styling will get affected like buttons, navbar, hrefs etc. So the flow is bootstrap's css overrided your shopify theme css and then you will override both in order to get back to the original - shortly it will become unmanageable.
But after all this I am not saying don't go ahead with this, what I have seen some people doing is utilizing only bootstrap's flexbox system to manage responsiveness in custom shopify pages (which is a good technique because bootstrap's flexbox system is pretty great). So basically what they do is take bootstrap's CSS file and remove all CSS tags not pertaining to the flexbox system and use that leftover CSS file.
And answering your doubt, what you should do now is - go with native HTML/CSS. You get stuck somewhere, SO that doubt/get the code by inspecting the website you have.
Shopify is using themes so you can start looking into tutorials on how to create themes for Shopify. Bootstrap is only controlling the look and feel of the website which is what you do. Shoppify will control the entire ecommerce functionality. So you can use Bootstrap inside the Shopify theme.
You need to be using LIQUID to code anything in Shopify and be sure not to use SCSS only CSS
I started learning django a few weeks ago and the one thing i have noticed and causes me a lot of issues, is the clarification between HTML and Bootstrap classes. I know that when you are creating a tag in HTML, you can add a class in it that can be named anything and then we usually use the class to write CSS, right? But i finished some tutorials and realized that some people just wrote a class like btn btn-warning and a button with styling automatically came up even though they didn't write any CSS for it. And then i tested it with a random name and it was plain blank. Can someone please explain all of this that why when we use some specific names that already customized tag is shown on the website.
Thanks a lot!!
HTML and bootstrap are both somehow similar. Its just that with HTML you will have to manually write all codes to perform any action however Bootstrap saves your time as it has its inbuilt tags that work for specific action.
For example you can create your own navigation bar with HTML or use navbar tag of bootstrap. The navbar however has built in functions so there is less work. You can use in by including bootstrap link in your css like:
But it's kind of tedious to edit the bootstrap tags if you sometimes want to.
And,HTML is mainly used for the basic designs and bootstrap to make it more responsive.You can know about bootstrap more here:
https://www.w3schools.com/whatis/whatis_bootstrap.asp
Bootstrap is basically alot of premade css classes
so when you are using Bootstrap in your site you already have those classes and you can just use them
i recommend you to go to W3School and read about it in depth
Bootstrap is the most popular HTML, CSS, and JavaScript framework for
developing responsive, mobile-first websites.
Bootstrap is completely free to download and use!
Bootsrap in W3School
How exactly is one to know what all needs to be overridden with the bootstrap styles when customizing the look and feel?
Is there a trick to find out where exactly I need to set the style in order for it to take precedence over the bootstrap style?
For example, I've been battling two days making form fields look the way the customer wants them. The default of bootstrap when wrapped up in the form-group row and form-control nested layers comes in with a tall field with rounded edges. I've created my own class setting everything to 0 for the padding and margin. I have also set the height to just 18px. NOTHING gets picked up.
I had the look and feel almost perfect earlier but I was not using any bootstrap stuff just html and css. The lead developer said we need to use bootstrap styles and just tweak what needs tweaked to fit the look and feel. Well, that sure as heck is easier said than done.
I miss the days when a designer specified what the look and feel was and we just coded the style and were done with it. This library usage of the 80% solution and 100% effort on top of the 80% does not seem to be a great approach unless it's for maximizing what the client is shelling out.
Override the styles using your own file.
Don't update the Bootstrap SCSS files to fit your needs. This can lead to many unforeseen issues. Say you want to share or update to a new bootstrap version. Combining the files and/or rewriting your work will be a hassle.
'If you make changes directly to the default bootstrap.css stylesheet, it would become very difficult to maintain and keep track of changes.'
How to Customize Bootstrap – UX Planet
Don't edit the actual bootstrap file, if you are manually importing it to your project.
Just make your own stylesheet, and make sure to import it after the bootstrap import.
There are 2 ways to do it.
1) Edit Bootstrap SCSS to fit your needs. This way you can customize it quickly and by generating custom CSS, not just overriding it. This is probably the easiest way to do it.
2) Override CSS with custom style. This is easy if you know Bootstrap and what style each element have. Just open Boostrap CSS find what you need and override it. It may be tricky because sometimes Bootstrap uses !important. One last thing - place your CSS after Bootstrap!
It appears to me that the underlying issues (or you can say something I did not know) are that the defaults for Bootstrap have padding, margins and other settings greater than 0. So, any tag that I use of bootstrap I'll need to override to set the values to 0 in order to get things to layout as the client wants.
By overriding, I do not mean altering the Bootstrap actual css file but rather in your own css file specify the bootstrap style that you are overriding.
Thanks all for your links and suggestions. Greatly appreciate it.
Helpful tips on using debugging tool: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS
I'm new to Bootstraps. What does the bg-3 or bg-4 class do? I'm quite confused on this class.
Here is the code
bg-4
They're not Bootstrap classes. They are just normal classes, which appear i.e. in W3Schools tutorials, but like in this example, styles are defined in code and they're not from Bootstrap.
I don't know where you are using it but as far as I know it is in bootstrap 4 alpha versions. Hopefully they don't change it in the stable version.
I'd suggest you to go for the earlier stable version of bootstrap.
If you still want to know about it, I found a link. This may help you out.
I recently found out about twitter bootstrap and I have been diving deep into the most recent version, Bootstrap 3. On the website, there is an example for an "Off Canvas" template (here: http://getbootstrap.com/examples/offcanvas/ ) which I have been modifying. But there are several things in the example that do not make sense to me.
In the "Off Canvas" template example, there are div elements that reference classes such as "row-offcanvas", "row-offcanvas-right", and "sidebar-offcanvas". I cannot find these in the bootstrap.css, and neither do I see these in the Chrome DevTools. I also do not see any effect when I remove these classes. Do these classes have any purpose? Or was it a mistake in the example to include those seemingly non-existent classes?
As #mgttlinger mentioned the css is defined at offcanvas.css See http://getbootstrap.com/examples/offcanvas/offcanvas.css
If want to a walk through of how it works see http://www.kendoui.com/blogs/teamblog/posts/13-11-05/creating-a-rwd-off-canvas-layout-with-bootstrap-3.aspx. It uses http://getbootstrap.com/examples/offcanvas/ as the starting point and explains the css used to create off canvas.
http://bradfrost.github.io/this-is-responsive/patterns.html#off-canvas is an excellent resource for more background on off canvas and most other responsive design patterns.
If you look at the page source closely you will find that in the header there is
<!-- Custom styles for this template -->
<link href="offcanvas.css" rel="stylesheet">
These classes are defined in there. And at least for me it does make a clearly visible difference if I remove this.
i did experience the same dunno what i did wrong but js didnt seems to work i just remove all codes and link back all js and css not working. So i try other js on my other folders it work and copy them on my empty offcanvas page it works. Then put back all templates code and it works fine now i guess its my machine some components stop responding maybe just try restart.