HTML & CSS styling select with bootstrap

[220061]

Hello can someone help me I'm trying to create a select with bootstrap something like this:


but my select just won't stop being small on my edit page:


this is the code for the edit apparaten picture

<div class="form-group row">
            <label for="beschikbaar" class="col-sm-3 col-form-label">Beschikbaar </label><br>
        <div class="col-sm-7">
        <div class="fa">
        <select name="beschikbaar" class="form-select form-select-lg mb-3" value="true" required="required" aria-label=".form-select-lg example" >
            <?php
                if ($row["beschikbaar"] == 1) {
                    ?>
                    <option value="1" selected="selected" class="fa" style="color: green;">&#xf00c;</option>
                    <option value="0" class="fa" style="color: red;">&#xf00d;</option>
                    <?php
                }else{
                    ?>
                    <option value="1" class="fa" style="color: green;">&#xf00c;</option>
                    <option value="0" selected="selected" class="fa" style="color: red;">&#xf00d;</option>
                    <?php
                }
            ?> 
        </select>
        </div>
       </div>
        </div>

how do I fix this? I have been trying so many things like removing the div col-sm-7 or changing the number but I can't seem to get this to work

 

[simong1993]

So i cant test much as this is missing a lot of code 😀 BUT when i remove the PHP tags it works how it should so i tried this :-

<div class="form-group row">
    <label for="beschikbaar" class="col-sm-3 col-form-label">Beschikbaar </label><br>
    <div class="col-sm-7">
        <div class="fa">
            <select name="beschikbaar" class="form-select form-select-lg mb-3" value="true" required="required" aria-label=".form-select-lg example" >
                <?php
                    $Testing = 1;
                    if ($Testing == 1) {
                        ?>
                        <option value="1" selected="selected" class="fa" style="color: green;">&#xf00c;</option>
                        <option value="0" class="fa" style="color: red;">&#xf00d;</option>
                        <?php
                    }else{
                        ?>
                        <option value="1" class="fa" style="color: green;">&#xf00c;</option>
                        <option value="0" selected="selected" class="fa" style="color: red;">&#xf00d;</option>
                        <?php
                    }
                ?> 
            </select>
        </div>
   </div>
</div>

and it works how it should so i am taking a stab in the dark here and wondering if the issue is from outside of this code, maybe something not ended correctly

 

[Krygore]

I just recently started learning about Bootstrap, but I think what you are looking for can be found here: https://getbootstrap.com/docs/5.1/components/navbar/
Scroll down a bit and look at the dropdown menu section. Hope this helps!

 

[OldMan]

@Krygore Since you just started to learn bootcrap Stay Away! Learn to do things the correct way. Number one reason; like all frameworks it adds bulk to your code.

 

[simong1993]

@OldMan I would argue this advice untill the cows come home 😀 The size of the files and speed increase if any is nothing compared to the ease that it gives you codeing. I used to code without bootstrap and its a hell of alot longer and more diffcult without it 🙂

 

[Krygore]

I have noticed that bootstrap is essentially tailwind css. Like I said, I'm only just learning it, but it seems to be a worth while study at the least to view as an option.

 

[Krygore]

Since you just started to learn bootcrap Stay Away!

Haha I appreciate your concern, but it's part of a course that I paid for, so I'm gonna see it through

 

[OldMan]

@simong1993 It's about the user and not the coder's comfort. Try going through bootcrap code that another coder has done and you'll find no comfort there.
@Krygore Sorry, you paid for that when there are so many places to learn for free on the web. I personally find that it's harder to learn and use frameworks than to learn what they are based on. I will admit I have taken some of their CSS and HTML and made them coding segments that I have used, but having four or five classes in an object is just crazy.

 

[simong1993]

@OldMan I have done, I was IT manager for many years and run my own website design company. I have dealt with many many shoddy code jobs over the years 😀 At the same time i have worked with developers where we use only bootstrap and because of this the project goes a lot more smoothly. Lets take a Nav bar for example, with one class we have an amazing nav bar with bootstrap, This nav bar is responsive off the bat and just amazing. Doing this by hand would take triple the time and take a bit more for another dev to work out. Bootstrap allows your code to be a lot less and shorter, also it takes a bit of the design work out of the job. I would argue that in 2021 to not use bootstrap is sabotage for a simple site.

 

[Krygore]

I only paid for it because it was 90% off. Was $20 and covers front end and back end development. I don't think education is a waste at all, no matter what form it comes in. Do what works best for you.