CSS right align centered in <td>

How would I align the 3 input fields so that the right edges are all vertical? I would still like the text+Input to be in the middle of the column but aligned vertically...

How would I align the 3 input fields so that the right edges are all vertical? I would still like the text+Input to be in the middle of the column but aligned vertically...

Currently using Bootstrap 3.3.7

HTML:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="table-responsive col-lg-12 ">
<table class="table table-bordered text-center">
    <thead>
    </thead>
    <tbody>
        <tr>
            <th class="text-center" scope="row">Net. Config</th>
            <td>
                <form class="form-inline">
                    IP Address:
                    <input type="text" class="form-control txbIPsubmit" id="SYST_IPAD" placeholder="0.0.0.0">
                </form>
                <form class="form-inline">
                    NetMask :
                    <input type="text" class="form-control txbIPsubmit" id="SYST_NETM" placeholder="0.0.0.0">
                </form>
                <form class="form-inline">
                    Gateway :
                    <input type="text" class="form-control txbIPsubmit" id="SYST_GWAD" placeholder="0.0.0.0">
                </form>
                <div class="form-control-static">
                    <input type="checkbox" class="form-check-input" id="SYST_DHCP">
                    <label class="form-check-label" for="SYST_DHCP">DHCP</label>
                </div>
            &lt;form class="form-inline"&gt;
                &lt;button type="button" class="btn btn-light" id="btnNetConfig"&gt;Apply&lt;/button&gt;
            &lt;/form&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
&lt;/tbody&gt;

</table>

</div>

Learn the Bootstrap CSS framework with this full tutorial. In this intermediate course, you will learn Bootstrap by creating a custom bootstrap theme from scratch using webpack. We'll be making an admin theme.

First, we'll set up npm and webpack so we can configure Bootstrap's source files that are written in SASS. Next, we'll cover the basics of Bootstrap and create some basic Bootstrap templates that are common in admin forms. Finally, we'll customize the theme by writing custom styling and overwriting some of the Bootstrap JavaScript

💻 Code: https://github.com/wilsmex/hq-admin

⭐️ Course Contents ⭐️
Part 1
⌨️ (2:03) Initialize git
⌨️ (2:15) initialize npm
⌨️ (5:06) initialize web pack
⌨️ (6:58) initialize font awesome
⌨️ (7:44) web pack config file
⌨️ (9:04) initialize bootstrap sass and associated required files
⌨️ (15:10) set up project src directory and structure
⌨️ (22:40) configure webpack.config.js
⌨️ (39:00) set up index.html file
⌨️ (52:40) setup our Sass files and import Bootstrap Sass files

Part 2
⌨️ (1:04:35) Bootstrap grid basics
⌨️ (1:11:40) Bootstrap form basics
⌨️ (1:25:00) Bootstrap table basics
⌨️ (1:31:03) Bootstrap card basics
⌨️ (1:38:35) Bootstrap buttons, alerts, dialogs

Part 3
⌨️ (1:41:55) setup our App HTML structure
⌨️ (1:55:32) CSS for navigation header
⌨️ (2:09:00) CSS for sidebar
⌨️ (2:20:08) Override bootstrap defaults
⌨️ (2:26:25) Add responsiveness and sidebar auto-hide
⌨️ (2:39:16) Add mobile toggle via CSS
⌨️ (2:43:48) Add mobile toggle javascript

Bootstrap does not provide any circular buttons by default. If we want to include circular buttons in a web page then with the help of Bootstrap 4 and a little bit of CSS, you can create your own circular buttons for your web page or application.

Bootstrap does not provide any circular buttons by default. If we want to include circular buttons in a web page then with the help of Bootstrap 4 and a little bit of CSS, you can create your own circular buttons for your web page or application.

It is an open source toolkit for developing with the HTML, CSS, and JS. It includes several types of buttons, styles, fonts each of them serving its own semantic purpose which is predefined, with a few extras thrown for more control. You can use Bootstrap custom button styles to create your buttons and more with support for multiple sizes, states, and more.

Example:

<!DOCTYPE html> 
<html> 


<head> 
	<title> 
		How to get circular buttons 
		in bootstrap 4 ? 
	</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"> 
		
	<script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/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> 
	
	<style type="text/css"> 
		h1 { 
			color:green; 
		} 
		.xyz { 
			background-size: auto; 
			text-align: center; 
			padding-top: 100px; 
		} 
		.btn-circle.btn-sm { 
			width: 30px; 
			height: 30px; 
			padding: 6px 0px; 
			border-radius: 15px; 
			font-size: 8px; 
			text-align: center; 
		} 
		.btn-circle.btn-md { 
			width: 50px; 
			height: 50px; 
			padding: 7px 10px; 
			border-radius: 25px; 
			font-size: 10px; 
			text-align: center; 
		} 
		.btn-circle.btn-xl { 
			width: 70px; 
			height: 70px; 
			padding: 10px 16px; 
			border-radius: 35px; 
			font-size: 12px; 
			text-align: center; 
		} 
	</style> 
</head> 


<body class="xyz"> 
	<h1>GeeksforGeeks</h1> 
	
	<h4>Normal Circle Buttons</h4> 
	<button type="button" class="btn btn-primary btn-circle btn-sm">Blue</button> 
	<button type="button" class="btn btn-secondary btn-circle btn-sm">Gray</button> 
	<button type="button" class="btn btn-success btn-circle btn-sm">Green</button> 
	<button type="button" class="btn btn-danger btn-circle btn-sm">Red</button> 
	<button type="button" class="btn btn-warning btn-circle btn-sm">Yellow</button> 
	<button type="button" class="btn btn-light btn-circle btn-sm">White</button> 
	<button type="button" class="btn btn-dark btn-circle btn-sm">Black</button> 


	<h4>Large Circle Buttons</h4> 
	<button type="button" class="btn btn-primary btn-circle btn-xl">Blue</button> 
	<button type="button" class="btn btn-secondary btn-circle btn-xl">Gray</button> 
	<button type="button" class="btn btn-success btn-circle btn-xl">Green</button> 
	<button type="button" class="btn btn-danger btn-circle btn-xl">Red</button> 
	<button type="button" class="btn btn-warning btn-circle btn-xl">Yellow</button> 
	<button type="button" class="btn btn-light btn-circle btn-xl">White</button> 
	<button type="button" class="btn btn-dark btn-circle btn-xl">Black</button> 
</body> 


</html>				 

**Output:**With the help of the following code we can easily add circular buttons using Bootstrap 4. Following is an image of the various kinds of circular buttons obtained.