How to set all bootstrap columns within all containers with a border for visual planning purposes only

Question

I want to simply turn on all borders for all my different columns just during development so I can the cells for visual design purposes only. Is there an easy way to do this

Or is there a better way where I can my container grid's cells layout ?

Is the question how to apply css styles only in development environment or how to apply style to all bootstrap columns? If it's the second you can find the answer [here](https://stackoverflow.com/questions/25954181/bootstrap-css-classes-wildcard). — Dimitris Maragkos, Oct 23 '22 at 14:06

Md Farid Uddin Kiron · Answer 1 · 2022-10-26T06:15:59.697

I want to simply turn on all borders for all my different columns just during development so I can the cells for visual design purposes only. Is there an easy way to do this?

Well, based on your question, its appeard that, we know the container column class nameand the Environment if this is the scenario then there is an easiest way to achieve your expectations.

Retrive Environment Variable:

Firstly, we would check the Environment Variable by simply following code snippet

 var env = Environment.GetEnvironmentVariable("ASPNETCORE_ENVIRONMENT");

Check The Environment:

Now we know the app environment therefore, we could check it by a simple conditionals as following

@{
    var env = Environment.GetEnvironmentVariable("ASPNETCORE_ENVIRONMENT");
    if (env == "Development")
    {

    }

}

Manipulateb Your DOM:

@{
    var env = Environment.GetEnvironmentVariable("ASPNETCORE_ENVIRONMENT");
    if (env == "Development")
    {

    @section Scripts{

    <script type="text/javascript">
                alert('@env')
                $(".col").css({ "border": "Solid red 2px" });
    </script>

    }
    }

}

HTML:

<div class="container">
    <div class="row">
        <div class="col">Left column</div>
        <div class="col">Middle column</div>
        <div class="col">Right column</div>
    </div>
</div>

Output:

Note: This is the most easy and simplest way to achieve that.Hope you will found it helpful

score 0 · Answer 2 · answered Mar 25 '23 at 22:58

You can use Environment Tag Helper to apply styles only in development environment.

_Layout.cshtml:

<head>
    ...
    ...
    <environment include="Development">
        <style>
            [class^="col"] {
                border: 1px solid black;
            }
        </style>
    </environment>
</head>

How to set all bootstrap columns within all containers with a border for visual planning purposes only

2 Answers2