Coding With David

Convert Bootstrap template to Blazor => Part 3 This is part 3 in my 7-part series on how to move a free Bootstrap Template and make a Blazor application out of it.  You can read about the other post here: 1. Part 1 – Create project and Copy over assets 2. Part 2 - Navigation Since we are building a Blazor application and everything cool in Blazor is a component, we need to create some components.  It might seem like over kill, but I will be building header and footer components in this post. Header This is the Header: You should notice there are a couple of variable items in this section: 1. Avatar 2. Name 3. Summary I want to make this section configurable.  In order to do this we can either pass in parameters into the component or we can have some type of a configuration service.  I prefer the configuration service, it allows us to take the application in a few different areas with minimal work.  Configuration Service This will be a simp

This is part 2 in my 7-part series on how to move a free Bootstrap Template and make a Blazor application out of it.  You can see  part one  here. In this post we are going to take a look at what it takes to get the NAV to work with anchor tags and how to make it responsive.  Make a NAV component  This is a Blazor application so we need to componenetize our controls so we can reuse them going forward.  We will be building a horizontal NAV bar component.    To achieve this:     1. Add new Razor component to the part 2 project called Nav.razor     2. Remove the NAV HTML from the Index.razor and add it to the Nav page     3. Add the new Nav component to the Index page              <Nav/>     4. Run it and the nav should show, but still be non-functional Anchor Tags  Currently anchor tags, href="#portfolio">Portfolio</a> do not work in Blazor.  There are several articles explaining why this is so.  At first, I looked for a common C# component t

There are a lot of free Bootstrap them web sites available, just google: free bootstrap themes.  It got me thinking what would it take to convert a simple web site to Blazor?      I found a nice single page web site called Freelancer .   It is a personal web site that allows the author to display their portfolio of projects.  It contains information about the author and a contact me form.     I decided to do a little more than just convert it over.  I want to make it more dynamic and generic so I can use it on multiple web sites.  This is the part one of a set of 7 blog posts that cover what it took to get it all done. Download    I downloaded  the template and opened  it  in  Visual Code .  I reviewed the code and then I  ran it .  It is a cure little site.     Start the Blazor Application   Create a Server side Blazor application   Run the Blazor application and make sure everything is building and running correctly.   Remove un-needed template a