Question

how to make like this one top and bottom with bootstrap

how to float text-center with background color with bootstrap

Answer 1

.div-container-section {
  height: 134px;
  background: blue;
}

.div-container {
  margin-top: 15px;
  margin-right: 20px;
  position: absolute;
  display: inline-block;
}

.thumbnail-last {
  margin-top: 15px;
}

.second-div {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  margin-top: 20px;
  position: absolute;
  z-index: 1;
  color: #ffffff;
  background-color: #000000;
  opacity: 0.8;
  padding: 2px 4px 2px 4px;
  display: inline;
  height: 100px;
  width: 200px;
  margin-left: 300px;
  background: black;
}

<!DOCTYPE html>
<html>

<body>

  <div class="container">
    <div class="div-container-section">
      <div class="div-container">
      </div>
      <div class="second-div">
        <div class="form-group">
          <label for="usr">Name:</label>
          <input type="text" class="form-control" id="usr">
        </div>
        <div class="form-group">
          <label for="pwd">Password:</label>
          <input type="password" class="form-control" id="pwd">
        </div>
      </div>

    </div>
  </div>

</body>

</html>

Answer 2

.div-container-section {
  height: 334px;
  background: blue;
}

.div-container {
  margin-top: 15px;
  margin-right: 20px;
  position: absolute;
  display: inline-block;
}

.thumbnail-last {
  margin-top: 15px;
}

.second-div {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  margin-top: 20px;
  position: absolute;
  z-index: 1;
  color: #ffffff;
  background-color: #000000;
  opacity: 0.8;
  padding: 2px 4px 2px 4px;
  display: inline;
  height: 300px;
  width: 200px;
  margin-left: 300px;
  background: black;
}

<!DOCTYPE html>
<html>



<body>

  <div class="container">
    <div class="div-container-section">
      <div class="div-container">
      </div>
      <div class="second-div">
        <div class="heading" align="center">
          <h2>Form</h2>
          <p>This is sample paragraph</p>
        </div>
        <div class="form-group">
          <label for="usr">Name:</label>
          <input type="text" class="form-control" id="usr">
        </div>
        <div class="form-group">
          <label for="pwd">Password:</label>
          <input type="password" class="form-control" id="pwd">
        </div>
      </div>

    </div>
  </div>

</body>

</html>

HTML＆amp;带有bootstrap布局的CSS需要帮助

2 个答案: