Posts

Showing posts with the label CSS

Bootstrap: Setting Up Bootstrap Using The Bootstrap CDN

"Bootstrap is the most popular HTML, CSS, and JS Framework for developing responsive, mobile first projects on the web."  - getbootstrap.com Brief Introduction: Bootstrap is a front-end framework using HTML, CSS and JavaScript to build menus, navigations, layouts, forms, tables, and etc.  What is special about Bootstrap is that mobile-first, and responsive design is it's default behavior.  Okay, hold on, let me put my professor's glasses on! Okay class here goes: Mobile-First Design :  You design your site for mobile devices first so the desktop version is second class citizen. Responsive Design: A design that makes your site look good on all screen sizes, and does not need to degrade gracefully.  Meaning you can resize, stretch, maximize, do yoga with your site and it will still look good.  Well up to a certain threshold. So to setup Bootstrap, you will do the following: 1. Create an HTML5 page <!DOCTYPE html> <html lang="en"> <head...
Post a Comment
Read more

CSS: Padding Properties

padding: top right bottom left padding:100px 75px 50px 25px; Long hand version padding-top:100px; padding-right:75px; padding-bottom:50px; padding-left:25px; All four sides 100px padding:100px;
Post a Comment
Read more

ASP.NET MVC 5 From Scratch : Add Bootstrap Library Using NuGet

Image
In the previous blog we've created added the JQuery library to an empty ASP.NET MVC 5 project. In this blog we will add the Bootstrap to the empty ASP.NET MVC 5 project that we've just created. Step by Step Instructions: 1. Open the empty ASP.NET MVC 5 project that you've just created 2.  Right click on the the "References" node in the "Solution Explorer", then select "Manage NuGet Packages" 3.  In the search box on the right of NuGet window type "bootstrap", the search result will be displayed 4. Click on the "Install" button next to the "Bootstrap" result, it should be at the top of the list 5.  Once the Bootstrap library has been installed a green check mark is displayed, click on the "Close" button 6.  Now you should see the Bootstrap scripts in the "Scripts" folder 7.  You will also noticed that the "Contents" folder has been created, this folder was created when NuGet installed...
1 comment
Read more

ASP.NET MVC 5 From Scratch : Create A Responsive Layout With Bootstrap

Image
In our previous blog we created a simple _Layout.cshtml file that does not have any markup just to make things simple.  In this blog we will use Bootstrap to make the layout look more professional and responsive, so that it can be viewed in any screen size.  The previous layout looks like screenshot below. The Bootstrap version will look like the screenshot below. Step-By-Step Instructions: 1.  Open the MvcApp project 2. Open the BundleConfig.cs file in the App_Start folder and type in the following code using System.Web; using System.Web.Optimization; namespace MvcApp { public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/bundles/jquery", "https://ajax.googleapis.com/ajax/libs/jquery/ 2.1.4/jquery.min.js").Include("~/Scripts/jquery-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/bootstrap","https://maxcdn.bootstrap...
2 comments
Read more

Using Bootstrap To Make Your Form Fields Look More Professional

Image
In this blog we will turn ordinary form fields to a more modernized and professional looking form fields by using the bootstrap library.  Let's say we have the following form fields with no formatting, or layouts applied to it with the following markup. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> <title></title> </head> <body> ...
Post a Comment
Read more