How can I use Bootstrap Sass at Visual Studio?

 There're many way to achieve this, but you can just use Nuget with visual
 studio to do this.

Nuget + Web Compiler
Use nuget to download the sass bootstrap to your web application.

 <a
 href="https://www.nuget.org/packages/Twitter.Bootstrap.Sass/"
 target="_blank"
 >Twitter.Bootstrap.Sass</a
 >

<code> PM&gt; Install-Package Twitter.Bootstrap.Sass</code>

 <img
 src="https://d1p0mp3f1fx0hz.cloudfront.net/_jzluib1ec.png"
 alt=""
 width="701"
 height="526"
 />


 Once you have installed bootstrap file to your application, you can install
 following visual studio plugin to compile the sass to css.


 &nbsp;<a
 href="https://visualstudiogallery.msdn.microsoft.com/3b329021-cd7a-4a01-86fc-714c2d05bb6c"
 target="_blank"
 >Web Compiler</a
 >

This web compiler will compile the sass into css file for you.

 <img
 src="https://d1p0mp3f1fx0hz.cloudfront.net/_662y1ulxw.png"
 alt=""
 width="603"
 height="325"
 />

How can I use Bootstrap Sass at Visual Studio?There're many way to achieve this, but you can just use Nuget with visual studio to do this.Nuget + Web Compiler

How to Use Bootstrap SCSS at Visual Studio 2015

<ol>
 <li>Find out what's font you'd like to use</li>
 <ul>
 <li>
 <a
 href="https://www.google.com/fonts#QuickUsePlace:quickUse"
 target="_blank"
 >google fonts page</a
 >
 </li>
 <li>Go to above link to check what's the font want to use.</li>
 <li>
 For instance, i'm using Light 300 for Open Sans<img
 src="https://d1p0mp3f1fx0hz.cloudfront.net/_xdmsaodzj.png"
 alt=""
 width="1018"
 height="429"
 />
 </li>
 </ul>
 <li>Add code to your Web Application</li>
 <ul>
 <li>Add google api link &amp; add font family to the css</li>
 <li>
 <img
 src="https://d1p0mp3f1fx0hz.cloudfront.net/_3pvffyv8f.png"
 alt=""
 width="559"
 height="369"
 />
 </li>
 <li>Code of link</li>
 <li>
 <code
 >&lt;link href='https://fonts.googleapis.com/css?family=Open+Sans:300'
 rel='stylesheet' type='text/css' /&gt;</code
 >
 </li>
 <li>Code example of add to the css, bootstrap SASS</li>
 <li>
 <pre><code>
$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;</code></pre>
 </li>
 </ul>
 <li>Example UI</li>
 <ol>
 <li>
 Following is the layout after I update the google font api.<img
 src="https://d1p0mp3f1fx0hz.cloudfront.net/_u8lpkc44y.png"
 alt=""
 width="1003"
 height="774"
 />
 </li>
 </ol>
</ol>
&nbsp;

 Furthermore, if you need more information about google fonts, see following
 links.


 <a
 href="https://developers.google.com/fonts/docs/getting_started?hl=en"
 target="_blank"
 >
 Getting Started Google Fonts</a
 >

How to add Google Fonts to Your WebSite

Default for boostrap nav to show is 760px, if you want to change it, following
 is the setting you could do to customize the bootstrap. Following screen
 example show how to show or hide the nav icon at 1024px.


 <img
 src="https://d1p0mp3f1fx0hz.cloudfront.net/_0f86i7ab8.png"
 alt=""
 width="323"
 height="266"
 />


 Just change the @screen-sm size. But if you want to customize bootstrap, most
 ealiest way I think is go to change at following
 site,&nbsp;http://bootstrap-live-customizer.com/ and get the variables.less
 and bootstrap.css.&nbsp;


 Because if you just get the customized bootstrap.min.css, it will be hard to
 maintain what had been customized.


 <img
 src="https://d1p0mp3f1fx0hz.cloudfront.net/_yebgxayux.png"
 alt=""
 width="324"
 height="232"
 />

Default for boostrap nav to show is 760px, if you want to change it, following is the setting you could do to customize thebootstrap. Following screen example show how to show or hide the nav icon at 1024px.

Customize Bootstrap Breakpoint for Show/Hide Nav Icon

sample code for apply style only for tablet, mobile, inserting cotent between
 links by css.


 a example code of adding content seperater '|' between links and use media
 query apply style for width less than 1024px;

<pre class="language-css"><code>
@media (max-width: 1024px){
 .my-footer ul li{
 display:inline;
 }

 .my-footer ul li a{
 margin-right:1px;
 }

 .my-footer ul &gt; li &gt; a::after{
 content: " | ";
 }

 .my-footer ul &gt; li:last-child a::after{
 content: "";
 }
} 
</code></pre>

 How it looks like <img
 src="https://d1p0mp3f1fx0hz.cloudfront.net/_7smptsa8y.png"
 alt=""
 />

sample code for apply style only for tablet, mobile, inserting cotent between links by css.

CSS Add Content Between Links

if you want to apply following media specific style to the site, you could use
 CSS3 media query.&nbsp;

<pre class="language-css">
/* apply these style when width is greater than 240px */ 
@media only screen and (min-width : 240px) 
{ 
}</pre
>

 Check the detail document from following url,&nbsp;<a
 href="https://developer.mozilla.org/en-US/docs/Zones"
 target="_blank"
 >CSS media queries</a
 >.


 Also,
 <a href="http://www.w3.org/TR/css3-mediaqueries/" target="_blank"
 >CSS3 media queries' specification</a
 >.


 In additional, probably should use modernizr at your site. see
 <a href="http://modernizr.com/docs/#installing" target="_blank"
 >modernizr.js</a
 >. Media Query is CSS3 features, but if the browser doesn't support it you
 might have to do something your own at your site.

Category SCSS

How to Use Bootstrap SCSS at Visual Studio 2015

How to add Google Fonts to Your WebSite

Customize Bootstrap Breakpoint for Show/Hide Nav Icon

CSS Add Content Between Links

How to Use CSS3 Media Query