CODEWITHSUNDEEP
jqueryhtmlcssbootstrap-4
Hamza
Hamza

Reputation: 45

Bootstrap 4 Responsiveness is not working properly

CSS Framework: Bootstrap 4

JQUERY, JS MASK for validation and input masking

Custom CSS for coloring and margins/padding/font sizing

Works good on: Desktop/Laptop Screen\

Works Bad on: Mobile/Tablet/Very Large Screen

I am designing a product add screen for my inventory software, fireworkstech.com, the issue precise is that I am unable to make it responsive for smaller and extra large screens. Elements distorted and it look like nothing is working at all.

Please help in this or spot my mistake which cause issue. HTML/CSS is embedded in question.

Thanks in advance

.top_navigation {
  background-color: #875a7b;
  height: 41px;
}

.button_color {
  background-color: #00a09d
}

.container {
  color: #9f7b95
}

.product_detail_nav nav li {
  color: #9f7b95
}

.product_new {
  margin-left: 115px;
}

.container_product_name {
  border-top: 1px #ddd;
  border-right: 1px #ddd;
  border-left: 1px #ddd;
  width: 800px;
  margin-left: 115px;
  height: 99px;
}

.li_data_new_pages li {
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  padding: 10px
}

.general_info {
  border-bottom: 2px solid #00A04A;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
}

.info_general {
  border-bottom: 2px solid #00A04A;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  margin-right: 8px;
}

.info {
  margin-left: 40px;
  border-bottom: 2px solid #00A04A;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
}

.weight_inventory {
  border-bottom: 2px solid #00A04A;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  margin-left: 4px;
}

.discription_inventory {
  border-top: 1px slategrey;
  border-left: 1px slategrey;
  border-right: 1px slategrey;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="file.css">
  <title>Assignment</title>

</head>

<body>
  <div>
    <nav class="top_navigation">
      <li class="nav-item d-inline-flex">
        <a class="nav-link  h4 text-light" href="#">Inventery</a>.
      </li>
      <li class="nav-item d-inline-flex">
        <a class="nav-link dropdown-item  text-light" href="#">Overview</a>
        <a class="nav-link text-light" href="#">Operation</a>
        <a class="nav-link text-light" href="#">Data</a>
        <a class="nav-link text-light" href="#">Reporting</a>
        <a class="nav-link text-light" href="#">Configration</a>
      </li>
    </nav>
  </div>
  <div class="container p-2">
    <a class="h6 mt-3 ">Product/New</a>
    <div class="button">
      <button type="button" class="btn btn-primary button_color">Save</button>
      <button type="button" class="btn btn-light">Discard</button>
    </div>
  </div>

  <div class="ml-3 mt-1 ">
    <button type="button" class="btn btn-light bg-light"><strong>Update Qty On Hand</strong></button>
    <button type="button" class="btn btn-light bg-light"><strong>Replinish</strong></button>
  </div>
  <div class="container mt-2 text-right">
    <a class="ml-3 fas fa-link h6 text-secondary" href="#">Archive</a>
  </div>
  <div>

    <a class="text-left font-weight-bold product_new">Product-Name</a>
    <div class="container_product_name">
      <div class="form-group">
        <input type="Product-Name" class="form-control" type="text" placeholder="Product Name">

      </div>
    </div>
  </div>
  <div class="container">
    <div class="form-check">
      <label class="form-check-label" for="Can be Sold">
                          <input type="checkbox" class="form-check-input" id="Can be Sold" name="Can be Sold" value="something">Can be Sold
                        </label>
    </div>
    <div class="form-check">
      <label class="form-check-label" for="Can be Sold">
                              <input type="checkbox" class="form-check-input" id="Can be Sold" name="Can be Purchased" value="something">Can be Purchased
                            </label>
    </div>
  </div>
  <div class="container mt-4 p-2">
    <ul class="nav nav-tabs li_data_new_pages">
      <li><a data-toggle="tab" href="#information">General Information</a></li>
      <li><a data-toggle="tab" href="#sales">Sales</a></li>
      <li><a data-toggle="tab" href="#inventory">Inventory</a></li>
    </ul>

    <div class="tab-content">
      <div id="information" class="container tab-pane active">
        <h3>General Information</h3>
        <a>
          <div>
            <div>
              <form class="form-inline general ">
                <div class="input-group mt-2 w-50 p-2 font-weight-bold">
                  <label for="sell">Product<br>Type</label>
                  <select class="form-control general_info" id="sell">
                    <option>consumable</option>
                    <option>service</option>
                    <option>storeable</option>
                  </select>
                </div>
                <div class="input-group mt-2 w-50 p-2 font-weight-bold">
                  <label for="information">Sale Prices</label>
                  <input class="form-control decimal general_info" id="information" type="text" placeholder="1.00">
                  </input>
                </div>

              </form>
            </div>
            <div class="align-left">
              <form class="form-inline">
                <div class="input-group mt-1 w-50 font-weight-bold">
                  <label for="sell">Product<br>Category</label>
                  <select class="form-control info_general" id="sell">
                    <option>All</option>
                    <option>Expenses</option>
                    <option>Saleable</option>
                  </select>
                </div>
                <div class="input-group mt-2 w-50 p-2 font-weight-bold">
                  <label for="information">Cost</label>
                  <input class="form-control decimal info" id="information" placeholder="0.00" data-inputmask="'mask':'9999999'">
                  </input>
                </div>
              </form>
            </div>
            <div class="input-group mt-2 w-50 p-2 font-weight-bold">
              <label for="information">Internal<br>refrence</label>
              <input class="form-control general_info" id="information" data-inputmask="'mask':'*AAAAAAAAAAAAAAAAAAAAAAAAAA*'">
              </input>
            </div>
            <div class="input-group mt-2 w-50 p-2 font-weight-bold">
              <label for="information">Barcode</label>
              <input class="form-control general_info" id="information">
              </input>
            </div>
            <div class="container">
              <form action="/action_page.php">
                <div class="form-group font-weight-bold">
                  <label for="comment">For Internal Notes</label>
                  <textarea class="form-control general_info" rows="5" id="comment" name="text" placeholder="This note is only for internal purpose"></textarea>
                </div>
              </form>
            </div>
          </div>
        </a>
      </div>
      <div id="sales" class="tab-pane fade">
        <h3>Sales</h3>
        <p>.......</p>
      </div>

      <div id="inventory" class="tab-pane fade">
        <form class="form-inline">
          <p class="h2 col-9">Operation</p>
          <div>
            <p class="h2 col-3">Logistics</p>
          </div>
          <div class="form-inline col-6">
            <strong>Route</strong>
            <div class="form-check">
              <label class="form-check-label" for="route">
                              <input type="checkbox" class="form-check-input" id="route" name="route" value="something" style="width:75px">Make to order
                            </label>
            </div>
          </div>
          <div class="input-group mt-2 w-50 p-2 font-weight-bold">
            <label for="inventory">Weight</label>
            <input class="form-control text-dark decimal weight_inventory" id="inventory" placeholder="00.0">
            </input>

            <label for="inventory" style="margin-left:6px">Volume</label>
            <input class="form-control text-dark decimal weight_inventory" id="inventory" placeholder="00.0"><i>m³</i></input>
          </div>
        </form>
        <div>
          <div class="input-group w-25">
            <label for="inventory"><strong>Custom Lead Time</strong></label>
            <input class=" form-control text-dark decimal weight_inventory" id="inventory" placeholder="Type here">days</input>
          </div>

        </div>
        <div class="container">
          <form action="/action_page.php">
            <div class="form-group font-weight-bold">
              <label for="comment">Discription for Delivery Orders</label>
              <textarea class="form-control discription_inventory" rows="3" id="comment" name="text" placeholder="This note will show up on delivery orders."></textarea>
            </div>
          </form>
        </div>
        <div class="container">
          <form action="/action_page.php">
            <div class="form-group font-weight-bold">
              <label for="comment">Discription for Delivery Receipts</label>
              <textarea class="form-control discription_inventory" rows="3" id="comment" name="text" placeholder="This note will show up on receipt orders (e.g. where to store the product in the warehouse)."></textarea>
            </div>
          </form>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://kit.fontawesome.com/01a5396e7a.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/jquery.inputmask.bundle.js"></script>
    <script>
      $(document).ready(function decimal() {
        $(".decimal").inputmask('decimal', {
          rightAlign: true
        });
      });
    </script>
    <script>
      $(":input").inputmask();
    </script>

</body>

</html>

Upvotes: 0

Views: 267

Answers (1)

Nandita Sharma
Nandita Sharma

Reputation: 13407

There are many core issues in your HTML design that conflict with the bootstrap standards.

I have tried to fix them and make it look reasonable with minimal changes.

Please compare my version with yours to know the changes.

The most important thing is we try to keep just one container in an HTML page and keep all data in it.

Also your navbar is not working properly. I have not fixed it. I recomment that you use the standard bootstrap navbar from its examples section. Navbar examples

.top_navigation {
  background-color: #875a7b;
  height: 41px;
}

.button_color {
  background-color: #00a09d
}

.container {
  color: #9f7b95
}

.product_detail_nav nav li {
  color: #9f7b95
}


/* 
.product_new {
  margin-left: 115px;
}
 */

.container_product_name {
  border-top: 1px #ddd;
  border-right: 1px #ddd;
  border-left: 1px #ddd;
  /* width: 800px;
  margin-left: 115px; */
  height: 99px;
}

.li_data_new_pages li {
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  padding: 10px
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div>
  <nav class="top_navigation">
    <li class="nav-item d-inline-flex">
      <a class="nav-link  h4 text-light" href="#">Inventery</a>.
    </li>
    <li class="nav-item d-inline-flex">
      <a class="nav-link dropdown-item  text-light" href="#">Overview</a>
      <a class="nav-link text-light" href="#">Operation</a>
      <a class="nav-link text-light" href="#">Data</a>
      <a class="nav-link text-light" href="#">Reporting</a>
      <a class="nav-link text-light" href="#">Configration</a>
    </li>
  </nav>
</div>
<div class="container p-2">
  <a class="h6 mt-3 ">Product/New</a>
  <div class="button">
    <button type="button" class="btn btn-primary button_color">Save</button>
    <button type="button" class="btn btn-light">Discard</button>
  </div>
  <div class="mt-1 ">
    <button type="button" class="btn btn-light bg-light"><strong>Update Qty On Hand</strong></button>
    <button type="button" class="btn btn-light bg-light"><strong>Replinish</strong></button>
  </div>
  <div class="mt-2 text-right">
    <a class="ml-3 fas fa-link h6 text-secondary" href="#">Archive</a>
  </div>
  <div>
    <a class="text-left font-weight-bold product_new">Product-Name</a>
    <div class="container_product_name">
      <div class="form-group">
        <input id="Product-Name" class="form-control" type="text" placeholder="Product Name">
      </div>
    </div>
  </div>
</div>


<div class="container">
  <div class="form-check">
    <label class="form-check-label" for="Can be Sold">
                          <input type="checkbox" class="form-check-input" id="Can be Sold" name="Can be Sold" value="something">Can be Sold
                        </label>
  </div>
  <div class="form-check">
    <label class="form-check-label" for="Can be Sold">
                              <input type="checkbox" class="form-check-input" id="Can be Sold" name="Can be Purchased" value="something">Can be Purchased
                            </label>
  </div>
</div>
<div class="container mt-4 p-2">
  <ul class="nav nav-tabs li_data_new_pages">
    <li><a data-toggle="tab" href="#information">General Information</a></li>
    <li><a data-toggle="tab" href="#sales">Sales</a></li>
    <li><a data-toggle="tab" href="#inventory">Inventory</a></li>
  </ul>

  <div class="tab-content">
    <div id="information" class="container tab-pane active">
      <h3>General Information</h3>
      <a>
        <div>
          <div>
            <form class="form-inline general ">
              <div class="input-group mt-2 w-50 p-2 font-weight-bold">
                <label for="sell">Product<br>Type</label>
                <select class="form-control general_info" id="sell">
                  <option>consumable</option>
                  <option>service</option>
                  <option>storeable</option>
                </select>
              </div>
              <div class="input-group mt-2 w-50 p-2 font-weight-bold">
                <label for="information">Sale Prices</label>
                <input class="form-control decimal general_info" id="information1" type="text" placeholder="1.00">
              </div>
            </form>
          </div>
          <div class="align-left">
            <form class="form-inline">
              <div class="input-group mt-1 w-50 font-weight-bold">
                <label for="sell">Product<br>Category</label>
                <select class="form-control info_general" id="sell1">
                  <option>All</option>
                  <option>Expenses</option>
                  <option>Saleable</option>
                </select>
              </div>
              <div class="input-group mt-2 w-50 p-2 font-weight-bold">
                <label for="information">Cost</label>
                <input class="form-control decimal info" id="information2" placeholder="0.00" data-inputmask="'mask':'9999999'">

              </div>
            </form>
          </div>
          <div class="input-group mt-2 w-50 p-2 font-weight-bold">
            <label for="information">Internal<br>refrence</label>
            <input class="form-control general_info" id="information" data-inputmask="'mask':'*AAAAAAAAAAAAAAAAAAAAAAAAAA*'">

          </div>
          <div class="input-group mt-2 w-50 p-2 font-weight-bold">
            <label for="information">Barcode</label>
            <input class="form-control general_info" id="information">
          </div>
          <div class="container">
            <form action="/action_page.php">
              <div class="form-group font-weight-bold">
                <label for="comment">For Internal Notes</label>
                <textarea class="form-control general_info" rows="5" id="comment" name="text" placeholder="This note is only for internal purpose"></textarea>
              </div>
            </form>
          </div>
        </div>
      </a>
    </div>
    <div id="sales" class="tab-pane fade">
      <h3>Sales</h3>
      <p>.......</p>
    </div>

    <div id="inventory" class="tab-pane fade">
      <form class="form-inline">
        <p class="h2 col-9">Operation</p>
        <div>
          <p class="h2 col-3">Logistics</p>
        </div>
        <div class="form-inline col-6">
          <strong>Route</strong>
          <div class="form-check">
            <label class="form-check-label" for="route">
                              <input type="checkbox" class="form-check-input" id="route" name="route" value="something" style="width:75px">Make to order
                            </label>
          </div>
        </div>
        <div class="input-group mt-2 w-50 p-2 font-weight-bold">
          <label for="inventory">Weight</label>
          <input class="form-control text-dark decimal weight_inventory" id="inventory" placeholder="00.0">


          <label for="inventory" style="margin-left:6px">Volume</label>
          <input class="form-control text-dark decimal weight_inventory" id="inventory" placeholder="00.0"><i>m³</i>
        </div>
      </form>
      <div>
        <div class="input-group w-25">
          <label for="inventory"><strong>Custom Lead Time</strong></label>
          <input class=" form-control text-dark decimal weight_inventory" id="inventory" placeholder="Type here">days
        </div>

      </div>
      <div class="container">
        <form action="/action_page.php">
          <div class="form-group font-weight-bold">
            <label for="comment">Discription for Delivery Orders</label>
            <textarea class="form-control discription_inventory" rows="3" id="comment" name="text" placeholder="This note will show up on delivery orders."></textarea>
          </div>
        </form>
      </div>
      <div class="container">
        <form action="/action_page.php">
          <div class="form-group font-weight-bold">
            <label for="comment">Discription for Delivery Receipts</label>
            <textarea class="form-control discription_inventory" rows="3" id="comment" name="text" placeholder="This note will show up on receipt orders (e.g. where to store the product in the warehouse)."></textarea>
          </div>
        </form>
      </div>
    </div>
  </div>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <script src="https://kit.fontawesome.com/01a5396e7a.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/jquery.inputmask.bundle.js"></script>
  <script>
    $(document).ready(function decimal() {
      $(".decimal").inputmask('decimal', {
        rightAlign: true
      });
    });
  </script>
  <script>
    $(":input").inputmask();
  </script>

Upvotes: 1

Related Questions