Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
This is just a basic question, in what events do you use a jumbotron? Do you always need to include a jumbotron when writing in the Bootstrap Framework? Examples of when to use the jumbotron is appreciated.
No, jumbotron is just a component, like a big banner usually on the top of your home page. Think of it like a big hoarding a visitor would see when they visit your site. When you are using bootstrap, I think the components that you might need 99% of the times is the grid. Rest depends on your website's requirements.
The grid is useful for making a row/column style layout of your webpage that's responsive (flows depending on the size of the device).
In the page below, you can get rid of the grey box (Jumbotron heading container) if you don't need it.
Jumbotron is simply a styled element. Bootstrap has some default properties applied to that element, making it a very good 'eye catcher'.
You don't need to include it, but you can if you like it. I'd use it to display the main business concepts, to display commercial items or discounts.
A nice example of use-cases is to look at commercial websites. here you can see how they used a slideshow for promotion, inside a jumbotron-like element for the eye catcher.
Using it is simply a matter of personal preference.
Jumbotron is one of Bootstrap helpers utility when developing sites. It is not necessary to have it in your project, it all depends how your design is structured. Basically with this component you can optionally increase the size of headings and add a lot of margin for landing page content. Another definition from w3 would say that jumbotron indicates a big box for calling extra attention to some special content or information. With this said it is place where you want to point out something, maybe some title, company quote of some nice graphics.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Currently, I am working on my first web page using HTML and CSS. I want to use the same layout like background and header etc but I can't find a way. Today I found a couple of website telling about the template. Is this the related to what I want to do.
Thank you for helping a beginner.
Sam
I would recommend you a few things:
Find websites that make you feel as it is what you wanted to build.
Check their source code and try to find the semantics they have maintained.
Once you figured it out, you should try to create similar one.
You should follow HTML5 specifications , as it will help you build solid foundation. while doing this you will also understand best practices.
HTML or designing mostly depends on requirements. so you might not get one rule to follow, just invest time understanding some great works out there and practice alot.
In case you are very concern to layout, search for website layout images and you will get plenty of images having typical elements like header, navigation/menu, body (left/right sub menu + main content), footer.
You can consider templates for learning but it may lead you to trap of copying-pasting.
You can use Microsoft Expression Web application, which handles template. You make one page and save it as template and declare editable parts for sites. Then You can create multiple empty HTML pages. Finally you attach template, then it works.
Or if you can use PHP, you can create different parts of your Web Site, like: header.php, footer.php, banner.php and include them in every page where modifying the body and not writing the same footer, header, banner
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Here's the link to the page I made: https://thawing-savannah-89995.herokuapp.com/
This is my first webpage I've made without help using only a PSD.
Here's a SS of the area I'm having issues with and keeps breaking when I shrink the browser size. This layout was very difficult for me to think through and I don't think it should've been. How can I better design the html and CSS for that part?
I don't have enough rep at the time of this post to comment. Sorry, I would if I could.
I suggest using a thing in css called flexbox. It takes a little extra work instead of Bootstrap or 960 or something, but in combination with percentage units, and even maybe vh/vw if you want to be new age.
This guide explains it better than I could ever hope to; basically, it's a dynamic alignment system. Centering is made trivial, compared to the alternatives. Keep in mind, you might need some #media breakpoints, mostly to change the flex-direction.
It has recently gained almost (sorry IE) universal browser support. If you do care about IE, use a shim like flexibility.
If you do want to use bootstrap-like grid systems, there are better alternatives, if you want to look into them. Personally not a fan of bootstrap (anymore...) but whatever floats your boat I suppose.
The best lesson I learned with creating Responsive sites is to design how you want this to look on a mobile device and work your way up to the Desktop.
I can suggest that you use Twitter Bootstap or Foundation as well as downloading responsive templates. Read as many articles you can find about different techniques that you can find to help you best understand the concept of how do to this.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
This is a general question for you web-dev folks out there. I've seen lots of CSS out there that has a very specific pixel or percentage count for css elements like "padding" and "height", etc. Experienced web developers seem to really nail the positioning of their content. I find for doing something as simple as centring a element into the flat middle of my screen, it takes me lots of testing with different px or % values for "padding-left" or "height" in my styles before I get it right, and it just feels clumsy.
So I was wondering, is there some rule of thumb, or guideline, that you all follow for choosing px or % values when building your web pages?
Using percentages corresponds to fluid designs, the web page thus created will be responsive in nature. Using pixels is as if you are using fixed values, the web page won't be responsive. this design pattern will be suitable to web pages which are intended to be kept at a fixed size. For responsive design it's good to use bootstrap, as they have done most of the handling of css for you (indeed for different screen sizes and resolutions), we just need to use the appropriate css classes as per our need. Doing so, the web page will be responsive.
It's recommended to use responsive design, go for % values so that the web page doesn't break for different screen sizes and resolutions.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 10 years ago.
Improve this question
I am thinking on adding some elements from twitter bootstrap to my current web application. This would help me to be more effective in some parts of the web development process. I do consider my self good at css and I have always built my sites from the ground up.
Is it viable to use some parts of twitter bootstrap, like the grid system? And then use my own custom classes for styling etc? Or should you go all out and use every aspect of bootstrap, and customize the bootstrap classes?
Thanks,
James
In case, you want to have bare minimal code that's necessary for your styling and you are comfortable in extending/ re-integrating as and when need arises in future then can use those particular bootstrap parts which you want and can style them as you want and can leave the unwanted bootstrap features..
But if you don't mind some extra code, that may add to your page load time, then you can go for the whole of the bootstrap.
In either of the cases, it would be better to leave the core bootstrap code unaltered and write your own code for added/modified functionality. This will give you the option of using the bootstrap styling in case if need arises in future and also you can straight-away update bootstrap files when updated versions arrive..
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 11 years ago.
Improve this question
I have just started practicing converting PSD's to HTML/CSS. But sometimes you see PSD's and it just seems impossible to craft using html and css.
Like the one here :
http://i.stack.imgur.com/rx0dl.jpg
Thanks alot
The way you should approach this is the same as you would approach any other PSD to HTML, divide it in blocks in your head and start from the top.
Here I made a very rough example of how you could divide this:
http://i.imgur.com/glZJ5.jpg
Use grid lines in photoshop to divide your image in different sections and create slices from there. You can even export to html once you've done that and it will create the css styles required too.
You can find a video explaining how to it here:
http://www.youtube.com/watch?v=DVfxe4pqvo8
Well, start with the basics:
A central content container. Unfortunately, images only describe the layout with one particular screen resolution, but it looks like the designer wanted a centered element with fixed with, probably 960px.
In that container, two headers. You can use the border-radius CSS property to make borders round, but you'll probably need some background images for some icons.
Add the example text, unstyled so far.
Add the front image. You can probably crop it in Photoshop.