Front-End Bootstrap Development Notes Tips and Tricks in MVC Asp.Net Core 7

  1. How to remove borders from a Boostrap 5 Table: Do you find yourself adding "border-0" to every Table Row and Table Column like below?

    //Wrong way to remove borders from bootstrap 5 table
    <table class="table">
    <body class="border-0>
    <tr class="border-0">
    <td class="border-0">Some Content</td>

    [Note]: Clean HTML5, if you add redundant CSS or Bootstrap 5 classes to your #HTML5 Element you might be slowing down the Rendering of the DOM tree by the browser. Modern #Browsers like Chrome might not have problems because over there on the #Chrome team they are innovating every day, but some old Browsers might be forced to pass that extra redundant CSS or Boostrap 5 Class you just added.

    - Don't even try adding extra JavaScript that your page doesn't need, this will slow down the performance of the Web page when rendering.

    If you do have extra lines of #JavaScript or files, make sure that you send sufficient #Caching Period to the Browser and append a File Version to notify the Browser when the File/Content ever changes.

    Going back to the #Boostrap 5 #Border problem, instead, make use of a class called table-borderless in Bootstrap 5 to remove borders from the whole Table. See the code below:

    //the right way to remove borders from bootstrap 5 table
    <table class="table table-borderless">
    <td>Some Content</td>
  2. Why is the image URL not working in HTML? when I code the image URL in the Asp.Net Core 7 #MVC #Razor View using a string like below:
    "<img src='~/img/myImage.extention'/>" this works on some pages but does not work on others. 

    Solution: Use string interpolation instead and explicitly let the Razor Engine in Asp.Net Core 7 MVC know to look into the Content Folder like below:
    $"<img src='{Url.Content("~/img/myImage.extention")}'/>", I hope this helps you.
    read top Annoying Errors in Core and understand how to handle the low-hanging fruit, the common error, and be productive.

  3. When working with Images make sure you include width and height on the img element itself. This has more precedence than that defined in the CSS Class.
        - The other advantage of defining an explicit width and height on the Image element is that the Web Browser has the idea of the space to reserve for an image when it first renders the HTML on the page.

  4.  It is always good to work from a Design, this way you can have a clear vision of where elements should be positioned. This has a good advantage and helps you plan in advance.

    - One important trait that cannot be overlooked is positioning. Pay attention to how the elements are positioned, the space in between, the margins, and the padding. All these are critical to having the UI development look like the design.

  5. If you are looking to use loyalty-free icons look at the website below

© 2023 - ErnesTech - Privacy