Building a rectangular shape with the help of bootstrap framework

I'm just starting out with HTML, CSS, and bootstrap and I'm attempting to create a page that looks like this.

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

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

Following the header, I want a rectangular section on my page with some text and a button.

The specifications for this rectangle are as follows:

Here is the code I have so far:

.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 positioned 250px from the top and 196px from the side. How can I achieve this? Currently, the rectangle appears slightly off to the left of the page.

Additionally, the text inside the rectangle doesn't seem to adhere to the specified font size and alignment in the CSS. How can I fix this?

htmlcssbootstrap-4

Answer №1

Whether or not you use pingendo.com, give this a try (on 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>

Answer №2

To achieve the desired layout from the shared image, you have the option of doing it manually with pure CSS or using bootstrap. I personally prefer the pure CSS method, which involves utilizing properties like flexbox, align-items, and justify-contents set to center for center alignment. Other approaches include using table along with vertical-align among others.

.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, all you need to do is go to the bootstrap website, add the necessary CDNs to your project, and then apply d-flex, align-items-center, and justify-content-center to the main container in your page structure.

.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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can we save individual words from a sentence in PHP without using the explode function?

I have created a PHP tag script for my website, but I feel like the code is too long. Is there a way to simplify and shorten it? <?php include("admin/apps/site-settings.php"); // establish database connection $albumq = mysql_query("select * fro ...

phphtmlarraysstringexplode

Extract the HTML content from a file stored on the computer

Currently, I am utilizing Google App Engine alongside Python. My goal is to retrieve the tree structure of an HTML file located within the same project as my Python script. Despite attempting numerous approaches, such as using absolute URLs (for example ht ...

pythonhtmlgoogle-app-enginelxml

Set a class for the nth table row

I'm trying to find a solution using jQuery where I can assign different classes to each <tr> in a table. For the first row, I want to add class='alt', for the second row class='alt-2', and for the third row class='alt-3& ...

jqueryhtml

My elements are overlapping one another

I've encountered an issue with my website layout - the left-menu div goes through the footer instead of pushing it down. I've tried using clear:both; and overflow:auto, but nothing seems to work. Can anyone help me figure out what's wrong he ...

htmlcss

Utilizing JSON AJAX and JQUERY for Autocomplete in C# MVC

Model-View-Controller Example public class HomeController : Controller { public JsonResult UniversalSearch() { List<UniversalSearchBar> EmployeeDetails = new List<UniversalSearchBar>(); EmployeeDetai ...

c#htmljsonajaxmodel-view-controller

Change the size of the image to use as a background

I have an image that is 2000x2000 pixels in size. I originally believed that more pixels equated to better quality with less loss. Now, I am looking to display it on my browser at a resolution of 500x500. To achieve this, I attempted to set the image as t ...

jqueryhtmlcssimage

How can I stack Twitter Bootstrap thumbnails perfectly?

Update: To see a demonstration, visit: http://plnkr.co/edit/i6ngfaMgSE0XGZq3VuBW?p=preview. Please ensure the "preview" window is wide enough to avoid responsive layout issues. I am currently working with Twitter Bootstrap's thumbnails and thumbnail ...

htmlcsstwitter-bootstrapvertical-alignment

`Background color for the dropdown menu`

I've been attempting to change the background-color of the dropdown menu to red, but my code doesn't seem to be working properly. Here is the current code that I am using: HTML <div class="divMenu"> <ul class="menu"> < ...

htmlcss

Tips for ensuring a modal stays fixed while scrolling

I need help with a pop up modal on my website. I want the modal to stay in place even when scrolling down the page. Here is the code for my modal: <div class="modale" id="ouibounce-modal" style="display:none"> <button type="button" i ...

htmlcssbootstrap-4

What is the proper method for navigating down a webpage after clicking a hyperlink?

I'm currently developing this webpage. When I click on the "state" (e.g. CA), I expect the page to slide down and display the results. Currently, the results are showing up but without any sliding effect. ...

jqueryhtmlcss

Utilize the text for creating a smooth and seamless background for clips

Is it possible to achieve this through code for dynamic content purposes? My only option right now is to use an image, but that won't provide the same level of dynamism. In the example below, you can see how the word "LARIVIÈRE" clips a white backg ...

jquerycss

Guide on showcasing an icon adjacent to the input fields once they have been validated successfully with the help of jquery plugins

I am struggling with the code below which is supposed to validate the SubmitForm when the button is clicked. It successfully changes the textboxes to red and displays an error message with a symbol if validation fails. However, I am wondering how I can sho ...

jqueryhtmlcssjquery-validate

What are some effective strategies for preventing CSS duplication?

What is the best way to prevent repeating CSS code like this: div#logo div:nth-child(1) div { width: 30%; height: 30%; background-color: white; } div#logo div:nth-child(3) div { width: 30%; height: 30%; background-color: white; ...

htmlcss

Div that dynamically adjusts its size to fit the content before switching to a fixed size

Apologies for the confusing title - finding it difficult to summarize in just one line! I have dynamic content loading into divs and a smooth resizing function that animates the height of these divs to auto. function adjustHeight(div) { var $selector = ...

jquerycss

What method can I use to enlarge the carousel component from the flowbit-svelte library?

I have been working on a project that requires a Carousel, and I decided to incorporate the flowbit-svelte carousel into my svelte project. While the carousel is functioning well, I am facing an issue with the component size. It seems to be cutting off my ...

csstailwind-csssvelteresponsivesveltekit

Use CSS to create boxes of a specific size within a table cell that spans the entire height

I'm having trouble using CSS to create two boxes (one red and one green) inside a table cell. I can't seem to make them fill the entire height of the cell. Here is what I have tried so far: td { background-color: lightblue; padding: 5px; ...

css

Issue with data encoding in React Form

In my React application, I created a stateless component that contains a form. <form action="http://externalsite.com/?param1=value1" method="get" target="_blank" > <input type="text" name="address" id="address" /> <input class ...

htmlformsreactjs

Is there a method to utilize a require()-esque function within an HTML document to display a nested HTML file?

I am currently exploring the use of an HTML template as a frame, with the goal of loading content dynamically based on the route. Coming from a PHP background, I am familiar with the require($file) function which embeds the necessary file inside the templa ...

htmlnode.js

javascript alter css property display to either visible or hidden

I am struggling with a CSS id that hides visibility and uses display: none. The issue arises when I want the element to be visible upon clicking a button, but removing the display:none property is causing design problems due to it being an invisible elemen ...

javascripthtmlcss

Disabling the final grid cell(s)

I am currently working on a 4 column grid in ReactJS. The grid includes various elements with images and text. I want to ensure that if there are five elements filled, the last three should be inactive so that each row always has four columns without any e ...

cssreactjs