CODEWITHSUNDEEP
htmlcssbootstrap-4
onit
onit

Reputation: 2372

How to get these Bootstrap 4 row elements separated?

I can't get this button not to be overlapping? enter image description here

This is the piece beating me:

<div class="row">
  <div class="col-md-3 form-group">
    <label for="agencySelect">Choose an Option</label>
    <select id="agencySelect" onchange="loadClientsFromSS(selectedAgency())">
      <option value=""></option>
    </select>
  </div>
  <div class="col-md-3 form-group">
    <label for="clientSelect">Choose Another option</label>
    <select id="clientSelect" onchange="loadClientTasks(selectedClient())">
      <option value="">dlfajgflksahgldsjngsglsgbçdjhlkhbfsçd</option>
    </select>
  </div>
  <div class="col-md-3 form-group">
    <div id="addTaskBtnSpot"><button id="addTaskBtn" type="submit" class="btn btn-primary mb-2" onclick="saveData()">Add</button></div>
  </div>
</div>

Here is the Fiddle

Appreciate your help!

Upvotes: 1

Views: 40

Answers (1)

bharti parmar
bharti parmar

Reputation: 434

Can you check this and let me know is it what you want or something else..?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <div class="row">
    <div class="col-4" style="background-color:lavender;">
        <div>
            <label for="agencySelect">Choose an Option</label>
        </div>
        <div>
          <select id="agencySelect" onchange="loadClientsFromSS(selectedAgency())">
            <option value="">jkesndfkjnwejkfnd</option>
          </select>
         </div>
    </div>
    <div class="col-4" style="background-color:orange;">
        <div>
            <label for="clientSelect">Choose Another option</label>
        </div>
        <div>
            <select id="clientSelect" onchange="loadClientTasks(selectedClient())">
                <option value="">dlfajgflksahgldsjngsglsgbçdjhlkhbfsçd</option>
            </select>
        </div>
    </div>
    <div class="col-4" style="background-color:lavender;">
        <div id="addTaskBtnSpot">
            <button id="addTaskBtn" type="submit" class="btn btn-primary my-2" onclick="saveData()">Add
            </button>
        </div>
    </div>
  </div>
</div>

</body>
</html>

Upvotes: 1

Related Questions