making the delete button appears only when hovering over the row. Using Bootstrap-CodePudding

I am trying to make the delete button only appears on the row that the user hover over it. I did it using CSS but I am trying to find a way to do it using Bootstrap. here is a snippet of the code.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></head>
<body>

<div class="container-fluid">
    <form id="search_form">
        <div id="search_row" class="search-details">
            <div class="search_data">
                    <section id="form_input_section" class="d-flex flex-column">

                    </section>
                    <section id="form_add_button_row" class="d-flex flex-row flex-fill justify-content-around align-items-center form-group">

                        <input type="text" class="form-control col-4" id="inlineFormInput" placeholder="Input...">
                        <button type="button" id="btn_remove_row" >Delete</button>
                    </section>
            </div>
        </div>
    </form>
</div>

</body>
</html>

CodePudding user response：

So here is your answer, as I put down in the comments earlier. You require a start state, which in your case will be the display: none on your id #btn_remove_row and as you hover over the #search_row you target the #btn_remove_row specific id again to chance it's perspective.

Working example here: https://www.codeply.com/p/HmGBqPCgnF

Or as your code supplies

#btn_remove_row{display: none} 
#search_row:hover #btn_remove_row{display: block}

I suggest making it a table and use classes, rather than ID's. This will give you more control and helps you align everything correctly.