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
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 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.
What is a difference between Bootstrap and CSS? I read the questions in stackoverflow saying that if you want responsive website and also, you are a newbie in Styling use bootstrap! ? Is Bootstrap something for beginners?
Bootstrap is essentially a front-end Framework that makes designing webpages and the general development easier. Bootstrap uses CSS, however it's different to writing your own CSS as it's all pre done so you just add a class to a HTML element and then it will use that CSS. So for example adding the class "img-responsive" to will use the pre made img-responsive class which is in the external Bootstrap CSS file.
Bootstrap is great because it allows you to easily create a responsive, cross browser compatible website really easily. For example making the site responsive without Bootstrap would require you using Media Queries etc, whereas with Bootstrap you can just give your divs class names to make it responsive.
Essentially Bootstrap uses CSS. But it's different to writing your own CSS as it's all pre made for you and you just need to import the external CSS file made by the people at Bootstrap, and you just need to know which classes to use etc.
Bootstrap is a "framework", that is: a pre-built set of files. Included in these files is CSS. Bootstrap uses, among other things, extensive CSS classes to style websites.
You can use Bootstrap without understanding CSS but if you are a beginner you should really learn HTML & CSS first.
W3Schools is a great resource to start learning about HTML & CSS
Bootstrap is a free and open-source front-end framework (library) for designing websites and web applications.
Other answers are good. In addition, some more key details:
Bootstrap 4 released in 2018, is a major rewrite from Bootstrap 3
Bootstrap 4 does not work with older browsers (IE8, IE9), some have concerns over this, if you have same concerns then learn the older Bootstrap 3
At a quick glance, Bootstrap 4 looks to have steep learning curve compared to CSS3. Needed a grid for a small project, for simplicity & for learning CSS3 fundamentals (as other answer pointed), chose CSS3 over bootstrap. (CSS3 Grid, looks simple to code, examples: link1, link2, link3, link4, link5. Detailed description is here)
On additional note
if you are using React.js
then you could use material ui, see below links:
https://material-ui.com/getting-started/installation/
https://material-ui.com/components/buttons/
I'm going to be making changes to Twitter Boostrap to generate my own theme and would like some kind of cheat sheet that shows the results from tweaking the styles and CSS.
Ideally maybe a single web page with all the Twitter Boostrap elements in it would be great instead of the Bootstrap documentation which has them spread out.
Even better would be a page with annotations on the various elements to show the result of your changes to the variables.less file.
Does anyone know of any resources that I should look at? Thanks in advance.
I created Bootply exactly for this purpose. Bootply is a "jsfiddle" style app that lets you edit Bootstrap friendly HTML, JS and CSS. It includes Bootstrap and jQuery for you, and there are also Bootstrap snippets that you can select from the toolbar and paste into the editor. Just click 'Run' to see your results.
Bootply features
Toolbar with all Bootstrap CSS, Components, and Javascript
Name, tag and share working Bootstrap examples
Preview in full screen or mobile/responsive
Include FontAwesome, jQueryUI and other Bootstrap-ready extensions
Test different Bootstrap versions
http://www.bootply.com
Also, this test page is useful for seeing all of the available elements at once.
Do you know a source for pure CSS Templates? After setting up a simple Web Project I always wish to have a CSS file to:
Set reasonable font settings for paragraphs and headers
Polish my anchor tags
Style my forms (if I have to touch the HTML for this one - no problem)
Style my tables (I use headers and footers etc) using even & odd
Maybe give me some handy classes for error boxes, etc.
So if I Google for a such CSS file I find CSS Homepage Templates with HTML Structure and massive CSS which I can't use without changing much. I find CSS examples for perfect tables, other examples for perfect forms but what I don't find is a single CSS File which when loaded in a properly formatted HTML website will make it look "okay" instead of the pure HTML look.
Do you get me?
Does anybody have a hint for me?
Twitter Bootstrap might interested you but I believe it has a bit of javascript in it as well.
Edit: As mentioned in comment you can use many of the Bootstrap features without using any javascript.
I've personally used bootstrap and I love it. I've also bookmarked few others to play with when bandwidth permits.
Bootstrap
Blueprint
960 Grid
Update: On related matter, I would also checkout CSS Preprocessors such as Sass and LESS that could help in writing better CSS and build up a custom library to use across projects.
Perhaps try the CSS off of Twitter Bootstrap. Provides all sorts of consistent styling that's simple but elegant, in addition to some fancier element behaviors.
Update:
Adding to Yonix's related list, the following are alternative CSS preprocessors, which makes working with CSS a little more digestible:
Compass
Stylus
There's a bit of a learning curve when teaching yourself CSS, but some basic CSS is easier than you think.
For quick prototyping/wireframing and pre-made HTML templates, I use Zurb Foundation, as compared to Twitter Bootstrap. My advice is to familiarize yourself with their online documentation and delve into the main CSS file (foundation.css). You can build on top of that CSS file with the provided app.css file.
It comes with a lot of pre-made styles (buttons, forms, etc) and everything is responsive (fits on any size screen). You can choose to include all the plugins, or just the HTML and CSS. It also has an option to download the HTML templates, which come with a variety a layouts, such as a blog or a basic structure. I absolutely love it!