• Saturday , 19 January 2019

Setting up bootstrap

Code Canyon
https://i.ytimg.com/vi/6e9IlNJ6W38/hqdefault.jpg



setup bootstrap
using bootstrap with asp.net web forms
simple bootstrap web page
simple bootstrap page
bootstrap sample page code
bootstrap example page
bootstrap files list
bootstrap 3 folder structure
twitter bootstrap folder structure
how to use bootstrap in html step by step
how to include bootstrap in html
bootstrap first page template
first bootstrap page

In this video we will discuss how to download, set up and create our first bootstrap web page

To get started with Bootstrap the first step is to download Bootstrap from http://getbootstrap.com. This website also has all the documentaion you need to get started with bootstrap.

As of this recording the version is 3.3.6. With the download you get a single zip folder which contains all the required bootstrap components.

Unzip the ZIP folder and you should see the following folder structure. Notice there are 3 sub-folders (css, fonts & js). Let us understand the use of each file, folder by folder.

Files in “css” folder

bootstrap.css – This is the core css for BootStrap that defines all the style for various controls and components

bootstrap.css.map – When debugging the minified code, the line numbers do not refer to the orignal files. The file that has the .map extension which is also called as source map file fixes this problem by allowing the web debuggers to refer to the original context from where the code was generated. This file is useful during development.

bootstrap.min.css – This is the compressed version meaning all the whitespaces, line breaks and any other extra characters have been removed. As a result the size of the minified file is smaller than the non-minified file. Minified version is usually used on a production server for efficient download where as the non minified version is used in development environment as it is more readable and easy to debug if there are issues.

bootstrap.min.css.map – Source map file for bootstrap.min.css

bootstrap-theme.css – As the name suggests this is the theme for bootstrap. Adding the core bootstrap.css is enough for bootstrap to work. The theme file is optional and is usually used for a visually enhanced experience. For example if you want 3D effects, gradients, shadows etc.

bootstrap-theme.css.map – Source map file for bootstrap-theme.css

bootstrap-theme.min.css – Minified version of bootstrap-theme.css

bootstrap-theme.min.css.map – Source map file for bootstrap-theme.min.css

Files in “fonts” folder
There are 5 different font files from Glyphicons. These 5 different files are just different format of the Glyphicons font, to support different browsers.

Files in “js” folder : These JavaScript files are optional. These are required if you want to use bootstrap widgets like picture carousel, dropdown menus, collapsible accordian etc. One important thing to keep in mind is that boostrap JavaScript has a dependency on jQuery, so a reference to jQuery must also exist on the page where you want to use Bootstrap.

bootstrap.js – This is the non-minified readable version that is usually used during development.

bootstrap.min.js – Minified version of bootstrap.js optimised for faster download. This is the version that is usually used in a production environment.

npm.js – npm is a file from Node.js and is used for npm installing bootstrap. If you are new to Node.js, don’t worry, this is not going to come in the way to understand bootstrap.

For this course I am going to use Visual Studio 2013 as the editor. You can use any editor of your choice.

Here are the steps to create your first web page with Bootstrap

1. Create a new empty ASP.NET web application project. Name it BootstrapDemo
2. To use bootstrap in your website, copy the folder that contains 3 sub-folders (css, fonts, & js) in your website project folder.
3. Add a new HTML file to the project. Name it index.html.
3. There is a basic template available at the following link. Copy and paste the template code in index.html
http://getbootstrap.com/getting-started/#template

Please note : The viewport meta tag ensure proper rendering and touch zooming on a mobile device.

Link for all dot net and sql server video tutorial playlists
https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1

Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspot.com/2016/05/setting-up-bootstrap.html

Original source

3d Ocean

Related Posts

39 Comments

  1. Elrabie Elrehima
    January 3, 2019 at 13:22

    very nice … even your accent is so clear !

  2. mule divyaswapna1739
    January 3, 2019 at 13:22

    Sir please tell me how to used bootstrap in notepad++ pllllllllllllllllllllllllllllllz tell me sir

  3. Dev Singh
    January 3, 2019 at 13:22

    Could you tell me in HTML we have used CDN URL as well. May i know what it doing?.

  4. Alam Sayem
    January 3, 2019 at 13:22

    why you use this "https://www.w3.org/1999/xhtml/" in html opening tag…

  5. bharathkumar bm
    January 3, 2019 at 13:22

    nothing was changed sir. after insert the css and js files.

  6. iBoolGuy
    January 3, 2019 at 13:22

    Stupid question: can I use VS 2012 instead of 2013?
    Because if I go on with this tutorial and after 30 videos I face a problem because I have 2012 version I'll be pissed..
    Regardless tho, you're a great human being! A statue of you must be made and put in Taj Mahal!
    Respect! 🙂

  7. Rajkumar
    January 3, 2019 at 13:22

    i am not getting the font folder, only two folders are showing

  8. Abdul Roshan
    January 3, 2019 at 13:22

    Great teacher ,.. very clear vocals .. Thank you..

  9. Vikas Dubey
    January 3, 2019 at 13:22

    you are impressive 🙂 (y)

  10. Sneha Shanmugasundaram
    January 3, 2019 at 13:22

    Excellent !

  11. nikita moray
    January 3, 2019 at 13:22

    i did not found font folder only css and js are present

  12. kumhar prakash
    January 3, 2019 at 13:22

    how to attach bootstrap in subline editor???

  13. Saleem Javeed
    January 3, 2019 at 13:22

    sir, can you please explain how can we use visual studio as i am not familiar thanks a lot

  14. Prashant Nagpure
    January 3, 2019 at 13:22

    which project is required to open in visual studio..file- new project-nad which application is select

  15. Phu Tran
    January 3, 2019 at 13:22

    wow! You are amazing. Ur tutorials are way better than those of newboston

  16. Gennaro De Santis
    January 3, 2019 at 13:22

    Excellent explanation, thank you very much for this

  17. Nigel Pallatt
    January 3, 2019 at 13:22

    Create a new empty ASP.NET web application project, um How and ASP.net, um what!

  18. K V
    January 3, 2019 at 13:22

    Excellent video series! Other tutorial authors need to watch his videos first and learn how to present material.

  19. pallav learn
    January 3, 2019 at 13:22

    You are awesome! Open a Patreon page. People will happily support you for your content.

  20. Tarnue Pythagoras Brobor
    January 3, 2019 at 13:22

    thank you very much :() you just save my day…… I hate when developers get use to copying and pasting!

  21. Shanti Iyer
    January 3, 2019 at 13:22

    Thanks a lot Venkat. Very good teaching.

  22. ashwini m
    January 3, 2019 at 13:22

    Can i no in which website will get notes about this complete bootstrap

  23. Zakia Marshall
    January 3, 2019 at 13:22

    I downloaded the bootstrap but did not get the same info as what you are showing in your video. The download had 2 files only css & js nothing about fonts. The CSS folder contains files that were not included in in your video. Thanks again, Your video is very well done and I thank you for the time it took to have it available.

  24. Levi Farley
    January 3, 2019 at 13:22

    Thank you. Clear accent, detailed teaching but also to the point. Your videos are so much better than the content developer I tried to watch before I clicked your tutorials. Great work!

  25. Hassan Aarzoo
    January 3, 2019 at 13:22

    4.0 version is available now and it doesn't have the font file.kindly provide an alternative

  26. Kuntal Karmakar
    January 3, 2019 at 13:22

    Sir, I am using bootstrap 4. for me the offset is not working(tutorial 5). please help.

  27. Oana C
    January 3, 2019 at 13:22

    I really like the way you explain!!!
    very clear, detail and THE MOST IMPORTANT: NO Boring. you are great!!

  28. Burak İbrahim Ünal
    January 3, 2019 at 13:22

    Thanks…

  29. Porter Lyman
    January 3, 2019 at 13:22

    Never realized before what actually made minimized files different. Great demonstration, and great video.

  30. Ahmet Yaman
    January 3, 2019 at 13:22

    Thank you sir

  31. Megha Misra
    January 3, 2019 at 13:22

    how can I increase container or panel size? My table is wider than the panel and I need to add more columns in the table when I run the program table header is becoming wider but not rows. How can I fix this issue? I am using MVC5.

  32. Abdullah F
    January 3, 2019 at 13:22

    one of the most clear tutorials i have seen in youtube

  33. Rana Rohit
    January 3, 2019 at 13:22

    Which other Editors could be used for the bootstrap? As I'm not familiar with Visual Studio, Thanks in Advance.

  34. RAQIBUL ALAM RASHED
    January 3, 2019 at 13:22

    Thanks a Billions.

  35. Kelvin Otieno
    January 3, 2019 at 13:22

    Nice tutorials as always Venkat. I have watched your tutorials from Sql, Asp, ADO.NET and now bootstrap. God Bless.

  36. Abhishek Abhi
    January 3, 2019 at 13:22

    sir we r not getting intellisense on class.. how we will get intellisense

  37. saidul islam
    January 3, 2019 at 13:22

    which version of visual studio you use please suggest me and send me the link i cant setup bootstrap with visual studio.please help me

  38. Pratit Bangdiwala
    January 3, 2019 at 13:22

    nicely explained. well done man

  39. Siana Campbell
    January 3, 2019 at 13:22

    Fantastic.

Leave A Comment

You must be logged in to post a comment.