I'm using Bootstrap and Bootstrap Live Customizer to build a theme for a new site. One feature seems like it may be missing. I'm not sure how change the border width on any elements. Is there a way to change this globally, with or without Bootstrap Live Customizer? Or do I have to append my own CSS for this? Fairly new to Bootstrap, BTW.
I have a really big web project based on Twitter Bootstrap.
I need to totally disable responsive features.
But Bootstrap page instruction for disabling responsive features (see this http://getbootstrap.com/getting-started/#disable-responsive ) includes a really hard step to do : For grid layouts, use .col-xs-* classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.
But I don't want to modify hundreds of .php and .html files and change all col-md-* styles to col-xs-*, what can I do?
As steps provided by bootstrap, its really hard to do change in hundred of files to achieve this. But CSS is the thing that could not get change easily by any function or script. You will need to put manual efforts.
One way is that instead changing class names in huge number of files, do edit css file of bootstrap and set common changes for classes of different resolution. Like if you have width 1200px to class ".col-xs-12" and it is working for you then reflect this change to other classes like ".col-sm-12" etc.
I am a newbie in UX/UI. I see that html5 also says responsive design and Bootstrap also telling the same. So which1 do i use for my layout. What is beneficial over the other. I want to get my basics right.
HTML5 and Bootstrap are totally different entities, only when you use them together in conjunction that you get a responsive site. Bootstrap is a CSS framework that allows you to build up a responsive site using predefined css classes and some javascript.
It depends on what you want.
If you want everything to write youself, then plain HTML5. On the other hand there a Bootstrap - CSS framework which does most of boring stuff and also uses HTML5.
Basically, you can use Bootstrap with HTML5. If you want to do everything by your own while keeping the site light-weight, then you can do plain HTML5-CSS. But Bootstrap handles almost all of UI responsiveness, at the expense of weight.
In the end, it's your call if you want to create a light-weight and self-written design(which is going to be harder) or add a little more weight, for a great number of functionalities you can just basically apply in ease.
Html5 isn't responsive but bootstrap is. Responsive isn't a HTML thing but a CSS thing. Usually you want users to be able to view your apps from different devices without any problems (such as cluttering) and for that porpouse we've got responsive and adaptative (both of which are CSS related).
Let's say you've got a div tag and you give it width and height propperties, such as 500x500. In large desktop's screens it could seem to be normal size, but on mobile phones it could take the entire screen or even more. So if you give it its size as a percentage such as width: 10%; and height: 10%; it would be a responsive-like solution.
Then it is bootstrap as a responsive framework with has its grid layout system that allows you to give different porcentages to the same HTML tag in different devices, using class="col-<device>-<columns>" (of course you could use more than 1 class for the same HTML tag). Bootstrap has 4 devices:
xs: mobiles
sm: tablets
md: desktops
lg: TVs
And it also has 12 colums for each row (it doesn't handle height manually, height increases as needed unless you manually define it in your css). So , our previous example could end being something like:
<div class="row">
<div class="col-xs-10 col-sm-8 col-md-9 col-lg-5"></div>
</div>
Here you've got a codepen example. (Try resizing its width)
And it would take different sizes for different devices. So at this point you could notice 2 things, there is something more (beyond of porcentages/responsiveness) going on here, and I still haven't mention what adaptative is. Ok, adaptative is just conditionally using some CSS rules for different screen sizes (not neccesarely as porcentages) by using media queries an example of adaptative layout would be Youtube and an example of responsive layout would be Twitter.
In addition bootstrap also provides you with some js functionality, some default css components (such as navigator, tables, and much more), and also a set of font-icons.
Functionally the answer is that Bootstrap is more complete, it has more buttons, menus, slide shows, etc. that you can quickly pick up and use. The downside is that the result will look like a Bootstrap site (just as you can usually tell a WordPress site).
HTML5 (I presume you mean HTML5 Boilerplate otherwise you are comparing apples to oranges), is more basic, and you will need to edit the HTML and CSS more. On the other hand, because it is more basic, you can have more flexibility with it.
I have designed 3 versions of a web page - desktop, tablet and mobile.
Content is same but layout is different.
Which approach is best to convert the page to responsive html:
a) Separate html files
b) Separate CSS files
c) Single CSS file
You can view jpegs of the 3 versions here:
Desktop:
shrineweb.in/other-files/clients/showyourskills/test/Home.jpg
Tablet:
shrineweb.in/other-files/clients/showyourskills/test/Home-tablet.jpg
Mobile:
shrineweb.in/other-files/clients/showyourskills/test/Home-mobile.jpg
How can i do this ?
Note : Mobile version's navigation (top-right) is different from Tablet and Desktop version.
The best approach is to use separate css files with media queries. But there are ready made solutions available, so it is more convenient to use them rather than inventing the wheel from scratch. You can use Twitter Bootstrap or Foundation for responsive web designs.
Separate CSS files would be clearer and easier.
Maybe you can click here to read more about responsive design and how to begin writing the different CSS media queries for each responsive layout.
You can use a single css file and add the layout for different versions using mediaquery and bootstrap...
I am developed a site using twitter bootstrap(2.3.2) fixed grid system. This is 960px website. I am not added responsive code in bootstrap.css file. But now i want to responsive it not fluid. I already download responsive code from http://getbootstrap.com/2.3.2/customize.html site and past that code in a responsive.css file.When i add this file to my website it become 1170px.but i don't want this.i want my website default value 960px but in tablet and mobile it must responsive view.How can i do this?Please help me i am new in bootstrap.
Thanks
Before downloading the customized code from http://getbootstrap.com/2.3.2/customize.html untick the 'Large desktops (>1200px)' option below the Responsive title.
I'm just guessing but that ought do it because it doesn't generate the CSS on the responsive file for over 979px then.
create your own less file as a main less file ( like bootstrap.less ).
Here is a link to a similar question answered very correctly.
Accordingly any property of bootstrap you can overwrite as per you wish.
Cheers!!!