Example : Different formats of html Radio Buttons in bootstrap4.
<!DOCTYPE html>
<html lang="en">
  
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>A typical Bootstrap Form Template</title>

        <!-- Bootstrap CSS 4.5.2 -->        
        <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> -->
        
        <link
        rel="stylesheet"
        href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        />

        <style>

            label{
                color:blue;
            }

            .gender{
                color:red; 
            }

        </style>
        
    </head>

    <body>
        <section>
            <div class="container text-center">
                <h1>Format of Radio Button Html Fields on a Form in Bootstrap</h1>
            </div>
        </section>

        <!-- Normal Input Fields -->
        <section>
            <div class="container my-4">
                <div class="card">
                    
                    <div class="card-header">
                        <h2>Radio Button Input Fields</h2>
                    </div>

                    <div class="card-body">
                        <form action="" method="post" name="form1" id="form2">

                            <div class="gender">Gender</div>

                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="inlineRadioGender" id="RdbGenMale" value="Male" checked>
                                    <label class="form-check-label" for="inlineRadio1">Male</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="inlineRadioGender" id="RdbGenFemale" value="Female">
                                    <label class="form-check-label" for="inlineRadio2">Female</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="inlineRadioGender" id="RdbGenOther" value="Other">
                                    <label class="form-check-label" for="inlineRadio3">Other</label>
                                </div>
                            
                            <hr/>
                            
                            <div class="gender">Gender</div>    

                                <div class="form-check form-check-inline">
                                    <label class="form-check-label" for="RdbGenMale">
                                        <input type="radio" class="form-check-input" name="RdbGen" id="RdbGenMale2"  value="Male">Male
                                    </label>
                                </div>

                                <div class="form-check form-check-inline">
                                    <label class="form-check-label" for="RdbGenFem">
                                        <input type="radio" class="form-check-input" name="RdbGen" id="RdbGenFem2"  value="Female">Female
                                    </label>
                                </div>

                                <div class="form-check form-check-inline">
                                    <label class="form-check-label" for="RdbGenOther">
                                        <input type="radio" class="form-check-input" name="RdbGen" id="RdbGenOther2"  value="Ohter" disabled>Other
                                    </label>
                                </div>                               

                            <hr/>

                            <div class="gender">Gender</div>

                                <div class="form-check">
                                    <input type="radio" class="form-check-input"  name="RdbGen" id="RdbGenMale2" value="Male">
                                    <label class="form-check-label" for="RdbGenMale">Male</label>
                                </div>

                                <div class="form-check">
                                    <input type="radio" class="form-check-input"  name="RdbGen" id="RdbGenFem2" value="Female">
                                    <label class="form-check-label" for="RdbGenFem">Female</label>
                                </div>

                                <div class="form-check">
                                    <input type="radio" class="form-check-input"  name="RdbGen" id="RdbGenOther2" value="Other">
                                    <label class="form-check-label" for="RdbGenOther">Other</label>
                                </div>                                
                        </form>
                    </div>

                    <div class="card-footer text-center">
                        Copyright 2020
                    </div>

                </div>
            </div>
        </section>
            
        <!-- Bootstrap JS, Popper.js, and jQuery -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

        <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> -->

    </body>
</html>

Output:

 1,743 total views,  3 views today

Categories: Bootstrap

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.