Rectangle using bootstrap

问题

I am new to HTML, CSS and bootstrap and trying to make a page something like this.

..............................................................................................................................................................

                                     Header
..............................................................................................................................................................

And after this Header I need a rectangle in my page with some text and a button.

Specification I need to follow for this rectangle are as follows:

Here is my code:

.rectangle {
  width: 632px;
  height: 269px;
  border-radius: 4px;
  border: solid 1px #e0e0e0;
  background-color: #ffffff;
  text-align: center;
}

.Find-your-number {
  width: 468px;
  height: 23px;
  font-size: 18px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.28;
  letter-spacing: -0.03px;
  text-align: center;
  color: #333333;
}

.btn-bg {
  width: 303px;
  height: 48px;
  border-radius: 4px;
  background-color: #f9c940;
}

.open {
  width: 291px;
  height: 54px;
  font-size: 49px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.1;
  letter-spacing: -0.8px;
  text-align: center;
  color: #333333;
  padding-top: 5%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-12 pt-md-5 text-center">
      <div class="rectangle">
        <p class="open">Open here</p>
        <p class="find-your-number">Find your number</p>
        <button class="btn-bg">Start</button>
      </div>
    </div>
  </div>
</div>

This rectangle should be at 250px from top and 196px from side. How can I get it? As of now I am getting rectangle towards a bit left side of page.

Also, text inside rectangle also not taking proper font size and alignment as mentioned in CSS. How can I correct it?

回答1:

with or without pingendo.com you should try this (to all devices)

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <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" type="text/css">
  <link rel="stylesheet" href="theme.css" type="text/css">
</head>

<body>
  <div class="py-5">
    <div class="container m-0 px-0 col-12" style="border-top: 3px dotted blue;border-bottom: 3px dotted blue;">
      <div class="row px-0 py-5 border-top border-bottom shadow-sm">
        <div class="col-md-12 text-center col-12 col-xs-12 col-sm-12 col-lg-12 col xl-12">generic header for : xs sm md lg and xl</div>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

回答2:

To achieve what from the picture that you shared, you can do it manually with pure CSS or by using bootstrap. I chose the pure CSS approach, so for this cause you will need to use flexbox and the related attributes with it such align-items and justify-contents and set them to center to achieve the center align. There are some other approaches to achieve this like using table and vertical-align and some other.

.container{
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box {
  width: 632px;
  height: 269px;
  padding: 30px 20px;
  border-radius: 4px;
  border: solid 1px #e0e0e0;
  background-color: #ffffff;
  text-align: center;
  display: flex;
  display: ms-flexbox;
  align-items: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.box > .box-title {
  font-size: 49px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.1;
  letter-spacing: -0.8px;
  text-align: center;
  color: #333333;
  padding-top: 5%;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

.box > .box-description {
  font-size: 18px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.28;
  letter-spacing: -0.03px;
  color: #333333;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

.box > .box-action > button {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
  width: 303px;
  height: 48px;
  font-size: 20px;
  border-radius: 4px;
  background-color: #f9c940;
}

<!DOCTYPE html>
<html lang="en">
  <body>
    <div class="container">
      <div class="box">
        <div class="box-title">
          Check-in here
        </div>
        <div class="box-description">
          <p>Find your reservation and collect your room keys</p>
        </div>
        <div class="box-action">
          <button>start</button>
        </div>
      </div>
    </div>
  </body>
</html>

EDIT:

Implementation with bootstrap

In this approach, you just need to visit bootstrap website and then add the related CDNs to your project, then you have to just add d-flex, align-items-center, and justify-content-center to the main container of your page.

.box > .box-title {
  font-size: 49px;
}

.box > .box-description {
  font-size: 18px;
}

.box > .box-action > button {
  width: 303px;
  height: 48px;
  font-size: 20px;
  background-color: #f9c940;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
  <body>
    <div class="container my-5 d-flex align-items-center justify-content-center">
      <div class="box border rounded p-5 text-center">
        <div class="box-title">
          Check-in here
        </div>
        <div class="box-description">
          <p>Find your reservation and collect your room keys</p>
        </div>
        <div class="box-action">
          <button>start</button>
        </div>
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

来源：https://stackoverflow.com/questions/57646517/rectangle-using-bootstrap

标签

html

css

bootstrap-4