"Utilize Bootstrap 4 to align text in the center and expand the text area for a

Currently experiencing some challenges with Bootstrap 4:

  1. Need to center the inline input fields
  2. Insert space between the inputs
  3. Add a large textarea below the input fields

This is the current layout:

Here is the HTML code:

body {
  background: url(https://images.pexels.com/photos/50631/pexels-photo-50631.jpeg?cs=srgb&dl=aerial-bridge-buildings-50631.jpg&fm=jpg);
  background-size: cover;
  background-position: center;
  font-family: Lato;
  color: white;
}

html {
  height: 100%;
}

#content {
  text-align: center;
  padding-top: 25%;
  text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}

h1 {
  font-weight: 700;
  font-size: 5em;
}

hr {
  width: 400px;
  border-top: 1px solid #f8f8f8;
  border-bottom: 1px solidrgba(0, 0, 0, 0.2);
}

input.transparent-input {
  background-color: transparent;
  border: 2px solid white;
}

.form-control::placeholder {
  color: white;
}


/* Chrome, Firefox, Opera*/

:-ms-input-placeholder.form-control {
  color: white;
}


/* Internet Explorer*/

.form-control::-ms-input-placeholder {
  color: white;
}


/* Microsoft Edge */

.no-padding {
  padding-right: 50px;
  padding-bottom: 10px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <title>Zenuni Company</title>
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
  <link rel="stylesheet" href="bootstrap.css">
  <link rel="stylesheet" href="app.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>

<body>

  <div class="container h-100">
    <div class="row h-100 justify-content-center align-items-center">
      <div class="col-12">
        <div id="content">
          <h1>Contact Page</h1>
          <h3>Contact Us</h3>
          <hr>
            <form class="form-inline">
              <div class="form-group">
                <input class="form-control transparent-input" type="text" name="name" placeholder="Name" required>
              </div>
              <div class="form-group">
                <input class="form-control transparent-input" type="text" name="surname" placeholder="Vorname" required>
              </div>
            </form>
        <button type="submit" class="btn btn-default">Send invitation</button>
        </div>
      </div>
    </div>
  </div>

Please provide assistance!

htmlcsswebbootstrap-4

Answer №1

If you're wondering how to achieve this, there are two methods you can use.

The first option involves utilizing the grid system, which functions as follows:

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

The second approach, which I believe is more suitable, is particularly effective for achieving a responsive center layout:

<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

I hope this explanation proves helpful for you :)

Answer №2

I just made some updates to your code and uploaded it to jsfiddle

To center the inputs with margins in your form, you should structure it like this:

     <form class="form-inline justify-content-center"> 
      <div class="form-group space-right">
       <input class="form-control transparent-input" type="text" name="name" placeholder="Name"  required>
      </div>
      <div class="form-group space-right">
       <input class="form-control transparent-input" type="text" name="surname" placeholder="Surname" required>                   
      </div>         
        <button type="submit" class="btn btn-default  my-2 my-sm-0">Send invitation</button>             
     </form>

You can use this line of CSS to create the spacing on the right:

    .space-right {margin-right:10px;}

Answer №3

To achieve a full row width, there's no need to use the justify-content-center class for the row, as col-12 already occupies the entire row.

Instead of using form-inline, opt for two form-row classes within the form - one for the two inputs and the other for the button. Assign a col to each input to keep them side by side consistently across different devices. You can also use col-* with classes like col-12 col-sm-6 to adjust the width based on the device screen size. For the button, apply a col class.

You can replace .row with .form-row, a modified grid row from Bootstrap that reduces column gutters for a more compressed layout. - Bootstrap-4

Limit the form width using custom CSS. Utilize mx-auto to center the form horizontally within its container.

If you wish to center the button within its parent, apply the text-center class to the parent element.

https://codepen.io/anon/pen/KBWXME

Regarding vertical alignment of content using align-items-center, ensure to apply h-100 to all parent elements of the container for it to work properly.

body {
  background: url(https://images.pexels.com/photos/50631/pexels-photo-50631.jpeg?cs=srgb&dl=aerial-bridge-buildings-50631.jpg&fm=jpg);
  background-size: cover;
  background-position: center;
  font-family: Lato;
  color: white;
}

html,
body {
  height: 100%;
}

#content {
  text-align: center;
  text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}

h1 {
  font-weight: 700;
  font-size: 5em;
}

hr {
  width: 400px;
  border-top: 1px solid #f8f8f8;
  border-bottom: 1px solidrgba(0, 0, 0, 0.2);
}

input.transparent-input {
  background-color: transparent;
  border: 2px solid white;
}

.form-control::placeholder {
  color: white;
}


/* Chrome, Firefox, Opera*/

:-ms-input-placeholder.form-control {
  color: white;
}


/* Internet Explorer*/

.form-control::-ms-input-placeholder {
  color: white;
}



.mw-500px {
  max-width: 500px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.css" rel="stylesheet" />
<div class="container h-100">
  <div class="row h-100 align-items-center">
    <div class="col">
      <div id="content">
        <h1>Contact Page</h1>
        <h3>Contact Us</h3>
        <hr>
      </div>
      <form class="mw-500px mx-auto">
        <div class="form-row">
          <div class="col-12 col-sm-6 form-group">
            <input class="form-control transparent-input" type="text" name="name" placeholder="Name" required>
          </div>
          <div class="col form-group">
            <input class="form-control transparent-input" type="text" name="surname" placeholder="Vorname" required>
          </div>
        </div>
        <div class="form-row ">
          <div class="col-12 col-sm-6 form-group">
            <button type="submit" class="btn btn-default">
              Send invitation</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

Answer №4

  1. Your input fields are not aligned because they are outside the #content element. To fix this, try moving the closing </div> tag after the <div id="content"> tag, positioned below your submit button.

  2. If you need spacing between your input fields, avoid using the </br> tag as it may look unappealing. Instead, adjust the padding within the .form-inline selector in your CSS until you achieve the desired look.

  3. If you can provide a visual mock-up of your goal, I may be able to assist you better with your objective.

Hope this guidance helps!

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

Discovering MaterialUI breakpoints within CSS styling

Working on a create-react-app project, I have incorporated material-ui 1.x and customized the theme with unique breakpoints... import { createMuiTheme } from '@material-ui/core/styles'; let customTheme = createMuiTheme({ breakpoints:{ val ...

cssmedia-queriesmaterial-uicreate-react-app

Vertical text frozen at the top of a table

My goal is to design a table with frozen threads and vertically oriented labels in the header. I have made an attempt at implementing this below, but as a newcomer to CSS, I am facing several challenges. One issue I've encountered with my solution ...

jquerycsshtmlhtml-table

Craft an engaging and dynamic Image map with SVG technology to elevate responsiveness and interactivity

I'm currently working on a website and I need to create two clickable sections on the home page. Each section will lead to a different specialization of the company. To achieve this, I decided to use a square image split into two right-angled triangle ...

javascripthtmlcsssvgresponsive

Processing made easy with jQuery

In my HTML page, I have multiple rows that represent records from a database. Each row contains input fields and a link at the end. When I click on the link, I need to capture the values of the input fields within the same row. Here is an example of the H ...

javascriptjqueryhtml

A guide on converting array values to objects in AngularJS HTML

Here is my collection of objects: MyCart = { cartID: "cart101", listProducts : [ {pid:101, pname:"apple", price: 200, qty:3}, {pid:102, pname:"banana", price: 100, qty:12} ] } I have incorporated a form in ...

javascripthtmlangulartypescript

Simplify webpage to display only text content using iOS (Objective C)

My main objective is to replicate the functionality of Readability or Safari's Reader service, where the primary content of a webpage is converted to text. I do not intend to display any images, only to extract the important text from the webpage. Cur ...

htmliosobjective-ccocoa-touch

Exploring the art of CSS box-shadow and playing with margins

In one of my blog posts, I've applied CSS box-shadow to the <img> elements. To ensure that they adjust their size along with the column, I have set max-width:100%. However, the box-shadow spills over into the margins due to its rendering outsid ...

layoutmargincss

Positioning the label for a Material-UI text field with an icon adornment when the shrink property is set

https://i.stack.imgur.com/E85yj.png Utilizing Material-UI's TextField, I have an Icon embedded within. The issue arises when the label "Your good name here" overlaps the icon instead of being placed beside it. This problem emerged after I included ...

javascriptcssreactjsmaterial-ui

After following the official guide, I successfully installed Tailwind CSS. However, I am facing issues with utilizing the `bg-black` className for styling the background,

Following the installation guide for Tailwind CSS, I ran the command npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p. Despite this, the background className (bg-black) is not working as expected. Here are the file paths: Directory ...

javascripthtmlcsstailwind-css

What is the process for extracting data from a canvas tag and why does it appear invisible on my browser?

The highlighted area in this image contains the HTML content and the red circle marks the section to be scraped The phone number can be found within the canvas tag. However, when trying to scrape the tag, it shows "Your browser does not support the HTML5 c ...

pythonhtmlseleniumweb-scraping

Is it possible to transform all scripts into a React component? (LuckyOrange)

I am currently working on converting the script for a specific service (http://luckyorange.com/) into a component. The instructions say to place it in index.html within the public folder, but that appears to be insecure. I'm uncertain whether this tas ...

javascripthtmlreactjs

Exploring the world of jQuery sliders and dynamically updating div container content

Alright, here's what I have come up with so far: First, take a look at this website to see the idea I am trying to explain: What I am aiming for is this concept: A visitor goes to the provided website and wants to know what type of sandwich they can ...

javascriptjqueryhtml

Visual feedback: screen flashes upon clicking to add a class with jQuery

I have successfully added a click event to my pricing tables in order to apply an animation class on mobile devices. However, I am facing an issue where every time I click on a pricing option on my iPhone, the screen flashes before the class is applied. Is ...

javascriptjquerycssiphone

Is it possible to automatically move text to the next line once it reaches a specific character limit using HTML/CSS/PHP?

Is there a way to handle text when it reaches the ceiling or exceeds a certain number of characters so that it goes to the next line instead of showing a scrollbar? I have a div element where I display text retrieved from a MySQL database, and sometimes th ...

phphtmlcsstext

Utilizing AngularJS to include information into JSON-LD

As a newcomer to AngularJS, I find myself stuck in one of my projects. My goal is to convert the user-entered data in a form into the format: << "schema:data" >> and then push and display it within the @graph of the json-ld. Here are my HTML an ...

javascriptjsonangularjshtmlweb

Inconsistency with Mobile Viewport Problem

Apologies for the chaos below, but I've spent quite some time attempting to fix this on my own. It's time to surrender and seek assistance! Here are some screenshots to illustrate the issue: The problem is that sometimes the webpage functions c ...

javascriptjqueryhtmlcssmobile

I'm only seeing output on two of my input boxes - what's going on?

Currently in the process of learning JQUERY/HTML, I decided to create a shopping cart. My goal is to display the subtotal, tax, shipping costs, and total cost in input boxes. While I successfully displayed the sub total and shipping cost, I encountered an ...

javascriptjqueryhtml

I am looking to transfer an image stored in a database onto a card

One issue I am facing is that when trying to display an image from a database, uploaded by a user and showing on a card with additional information like name and price, an icon resembling a paper with green appears in the output. Here's my code snippe ...

javascriptphphtmlmysqlajax

Ways to position a dropdown submenu on the left-hand side in Bootstrap 4

I'm currently utilizing Bootstrap 4 with a multilevel dropdown feature as shown in the image below: https://i.sstatic.net/xgVLp.png My goal is to shift the submenus to the left side, in the opposite direction from how they are currently displayed. De ...

htmlcsstwitter-bootstrapbootstrap-4drop-down-menu

The inline HTML script was unable to execute the function as intended by Jquery

Attempting to remove the element using a custom function called within inline html on my script tag, below is the code: HTML <div id="form"> <input type="text" name="name", id="name"><br> <input type="text" name="address", id="ad ...

javascriptjqueryhtml