I created a submit button using bootstrap but I want to place it where the arrow pointing but I no matter what I write the position doesn't change it's like the button stick to the position and I can't reposition it
how can I place it to be there?
.container {
position: absolute;
top: 30%;
left: 30%;
transform: translate(-50%, -50%);
text-align: center;
/*give the text bolder font*/
font-weight: bold;
}
/*set the input under the span element*/
input[type=text] {
text-align: center;
font-weight: bold;
font-size: 20px;
border: 2px solid #ccc;
border-radius: 4px;
padding: 12px 10px;
width: 100%;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
/*set the space from left to 30%*/
margin-left: 30%;
}
/* set the button under the input element*/
button {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
/*set the space from left to 30%*/
margin-left: 30%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>quiz</title>
<link rel="stylesheet" href="quiz2.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<span id="question">What type of file do you need to open javascript file ?</span>
<div class="input-group flex-nowrap">
<input type="text" id="answer" class="form-control" placeholder="Answer Here..." aria-label="Username" aria-describedby="addon-wrapping">
</div>
<button type="button" id="submit" class="btn btn-outline-success">Submit</button>
</div>
If you're able to change the HTML, here's a way:
Wrap your button inside another div:
<div class="button-wrapper">
<button type="button" id="submit" class="btn btn-outline-success">Submit</button>
</div>
Then set the margin-left on that wrapper:
.button-wrapper {
/*set the space from left to 30%*/
margin-left: 30%;
}
Check this snippet for the result.
.container {
position: absolute;
top: 30%;
left: 30%;
transform: translate(-50%, -50%);
/*give the text bolder font*/
font-weight: bold;
}
/*set the input under the span element*/
input[type=text] {
text-align: center;
font-weight: bold;
font-size: 20px;
border: 2px solid #ccc;
border-radius: 4px;
padding: 12px 10px;
width: 100%;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
/*set the space from left to 30%*/
margin-left: 30%;
}
/* set the button under the input element*/
button {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.button-wrapper {
/*set the space from left to 30%*/
margin-left: 30%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>quiz</title>
<link rel="stylesheet" href="quiz2.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<span id="question"></span>
<div class="input-group flex-nowrap">
<input type="text" id="answer" class="form-control" placeholder="Answer Here..." aria-label="Username" aria-describedby="addon-wrapping">
</div>
<div class="button-wrapper">
<button type="button" id="submit" class="btn btn-outline-success">Submit</button>
</div>
</div>
I just define a button-container class and use flex & justify:
.container {
position: absolute;
top: 30%;
left: 30%;
transform: translate(-50%, -50%);
text-align: center;
/*give the text bolder font*/
font-weight: bold;
}
/*set the input under the span element*/
input[type=text] {
text-align: center;
font-weight: bold;
font-size: 20px;
border: 2px solid #ccc;
border-radius: 4px;
padding: 12px 10px;
width: 100%;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
/*set the space from left to 30%*/
margin-left: 30%;
}
/* set the button under the input element*/
button {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
/*set the space from left to 30%*/
margin-left: 30%;
}
.button-container {
display: flex;
justify-content: start;
margin-left: 30%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>quiz</title>
<link rel="stylesheet" href="quiz2.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<span id="question">What type of file do you need to open javascript file ?</span>
<div class="input-group flex-nowrap">
<input type="text" id="answer" class="form-control" placeholder="Answer Here..." aria-label="Username" aria-describedby="addon-wrapping">
</div>
<div class="button-container">
<button type="button" id="submit" class="btn btn-outline-success">Submit</button>
</div>
</div>
Related
i am trying to have a dropdown box with a form so i can change any settings in case of a misspell and, after a few research i can't find the root of the problem. I need the icon to be on the navigation bar. I already tryed to change de z-index of the settings container with no success, change the display of the boxes, used flex containers and still with no results.
This is the HTML and CSS (scripts are running as intended)
.row::after{
content: "";
clear: both;
display: table;
}
#media screen and (max-width: 600px){
.navbar {position: relative;}
}
.navbar{
display: flex;
border-bottom: 1px solid black;
overflow: hidden;
}
.navbar a{
color: black;
text-align: left;
padding: 1.5% 4%;
text-decoration: none;
font-size: 18px;
border-right: 1px solid black;
cursor: pointer;
}
.buttonnav{
border: 1px solid black;
width: 10%;
background-color: lightgray;
text-align: center;
padding-top: 0.5%;
margin-left: 15%;
border-radius: 5px;
margin-top: 1%;
margin-bottom: 1%;
cursor: pointer;
}
.settingscontainer{
display: inline-block;
position: relative;
padding-left: 2.5%;
padding-top: 1%;
z-index: 99;
}
.settingscontainer-content{
display: none;
position: absolute;
width: 80%;
z-index: 99;
}
.settingscontainer:hover .settingscontainer-content{
display: block;
}
.settingscontainer-content input[type = "submit"]{
text-align: center;
border-radius: 5px;
background-color: lightgreen;
margin-top: 2.5%;
float: right;
margin-right: 15%;
}
.settingscontainer-content input[type = "text"]{
width: 80%;
}
.settingsicon{
width: 25px;
height: 25px;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styletest.css" type="text/css">
<title>Document</title>
</head>
<body>
<div class="row">
<div class="navbar" id="navbar">
<a class="w3-hover-shadow" onclick="navHome()">Home</a>
<a class="w3-hover-shadow" onclick="navBoard()" style="background-color: lightgrey;">Board</a>
<a class="w3-hover.shadow" onclick="navConf()">Configure</a>
<a class="w3-hover-shadow" onclick="navGraph()">Graphs</a>
<a class="w3-hover-shadow" onclick="navHist()">History</a>
<div class="buttonnav" id="btncon" onclick="altername()">Connect</div>
<div class="settingscontainer">
<img src="node_modules/#tabler/icons/icons-png/settings.png" alt="settings" class="settingsicon">
<div class="settingscontainer-content">
<form action="">
<label for="nameboardset">Name of the board:</label><br>
<input type="text" name="nameboardset" id="nameboardset" placeholder="Board 1"><br>
<label for="">IP address:</label><br>
<input type="text" name="ipaddset" id="ipaddset" placeholder="192.168.1.1"><br>
<label for="portset">Port:</label><br>
<input type="text" name="portset" id="portset" placeholder="8080"><br>
<label for="fileset">Image:</label><br>
<input type="file" name="fileset" id="fileset">
<input type="submit" value="Save Changes">
</form>
</div>
</div>
</div>
</div>
<!--Body Content-->
</body>
</html>
Removing overflow: hidden from your navbar should fix the issue.
.row::after{
content: "";
clear: both;
display: table;
}
#media screen and (max-width: 600px){
.navbar {position: relative;}
}
.navbar{
display: flex;
border-bottom: 1px solid black;
}
.navbar a{
color: black;
text-align: left;
padding: 1.5% 4%;
text-decoration: none;
font-size: 18px;
border-right: 1px solid black;
cursor: pointer;
}
.buttonnav{
border: 1px solid black;
width: 10%;
background-color: lightgray;
text-align: center;
padding-top: 0.5%;
margin-left: 15%;
border-radius: 5px;
margin-top: 1%;
margin-bottom: 1%;
cursor: pointer;
}
.settingscontainer{
display: inline-block;
position: relative;
padding-left: 2.5%;
padding-top: 1%;
z-index: 99;
}
.settingscontainer-content{
display: none;
position: absolute;
width: 80%;
z-index: 99;
}
.settingscontainer:hover .settingscontainer-content{
display: block;
}
.settingscontainer-content input[type = "submit"]{
text-align: center;
border-radius: 5px;
background-color: lightgreen;
margin-top: 2.5%;
float: right;
margin-right: 15%;
}
.settingscontainer-content input[type = "text"]{
width: 80%;
}
.settingsicon{
width: 25px;
height: 25px;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styletest.css" type="text/css">
<title>Document</title>
</head>
<body>
<div class="row">
<div class="navbar" id="navbar">
<a class="w3-hover-shadow" onclick="navHome()">Home</a>
<a class="w3-hover-shadow" onclick="navBoard()" style="background-color: lightgrey;">Board</a>
<a class="w3-hover.shadow" onclick="navConf()">Configure</a>
<a class="w3-hover-shadow" onclick="navGraph()">Graphs</a>
<a class="w3-hover-shadow" onclick="navHist()">History</a>
<div class="buttonnav" id="btncon" onclick="altername()">Connect</div>
<div class="settingscontainer">
<img src="node_modules/#tabler/icons/icons-png/settings.png" alt="settings" class="settingsicon">
<div class="settingscontainer-content">
<form action="">
<label for="nameboardset">Name of the board:</label><br>
<input type="text" name="nameboardset" id="nameboardset" placeholder="Board 1"><br>
<label for="">IP address:</label><br>
<input type="text" name="ipaddset" id="ipaddset" placeholder="192.168.1.1"><br>
<label for="portset">Port:</label><br>
<input type="text" name="portset" id="portset" placeholder="8080"><br>
<label for="fileset">Image:</label><br>
<input type="file" name="fileset" id="fileset">
<input type="submit" value="Save Changes">
</form>
</div>
</div>
</div>
</div>
<!--Body Content-->
</body>
</html>
CSS File:-
.row::after{
content: "";
clear: both;
display: table;
}
#media screen and (max-width: 600px){
.navbar {position: relative;}
}
.navbar{
display: flex;
border-bottom: 1px solid black;
}
.navbar a{
color: black;
text-align: left;
padding: 1.5% 4%;
text-decoration: none;
font-size: 18px;
border-right: 1px solid black;
cursor: pointer;
}
.buttonnav{
border: 1px solid black;
width: 10%;
background-color: lightgray;
text-align: center;
padding-top: 0.5%;
margin-left: 15%;
border-radius: 5px;
margin-top: 1%;
margin-bottom: 1%;
cursor: pointer;
}
.settingscontainer{
display: inline-block;
position: relative;
padding-left: 2.5%;
padding-top: 1%;
z-index: 99;
}
.settingscontainer-content{
display: none;
position: absolute;
width: 80%;
z-index: 99;
}
.settingscontainer:hover .settingscontainer-content{
display: block;
}
.settingscontainer-content input[type = "submit"]{
text-align: center;
border-radius: 5px;
background-color: lightgreen;
margin-top: 2.5%;
float: right;
margin-right: 15%;
}
.settingscontainer-content input[type = "text"]{
width: 80%;
}
.settingsicon{
width: 25px;
height: 25px;
cursor: pointer;
}
HTML File:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styletest.css" type="text/css">
<title>Document</title>
</head>
<body>
<div class="row">
<div class="navbar" id="navbar">
<a class="w3-hover-shadow" onclick="navHome()">Home</a>
<a class="w3-hover-shadow" onclick="navBoard()" style="background-color: lightgrey;">Board</a>
<a class="w3-hover.shadow" onclick="navConf()">Configure</a>
<a class="w3-hover-shadow" onclick="navGraph()">Graphs</a>
<a class="w3-hover-shadow" onclick="navHist()">History</a>
<div class="buttonnav" id="btncon" onclick="altername()">Connect</div>
<div class="settingscontainer">
<img src="node_modules/#tabler/icons/icons-png/settings.png" alt="settings" class="settingsicon">
<div class="settingscontainer-content">
<form action="">
<label for="nameboardset">Name of the board:</label><br>
<input type="text" name="nameboardset" id="nameboardset" placeholder="Board 1"><br>
<label for="">IP address:</label><br>
<input type="text" name="ipaddset" id="ipaddset" placeholder="192.168.1.1"><br>
<label for="portset">Port:</label><br>
<input type="text" name="portset" id="portset" placeholder="8080"><br>
<label for="fileset">Image:</label><br>
<input type="file" name="fileset" id="fileset">
<input type="submit" value="Save Changes">
</form>
</div>
</div>
</div>
</div>
</body>
</html>
My button is in line with the flex-box,
Elements should be stacked on top of one another in a column, right?
I am making a timer, so there is a row, in which there are two columns.
In one column there is an image and in the other, there is a heading, a flexbox(which contains four rectangles), and a button.
Now, I want my button to be below my timer, but it is in line with it.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stiks</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="../css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container hero">
<div class="row">
<div class="portal col-md-12 col-lg-5">
<img class="img-fluid" src="../assets/download (10).jpg">
</div>
<div class="col-md-12 col-lg-7 align-self-center">
<h2><b>Timer</b></h2>
<div class="d-inline-flex flex-nowrap">
<div class="rect">
<span class="days"></span>
<p>Days</p>
</div>
<div class="rect">
<span class="hours"></span>
<p>Hours</p>
</div>
<div class="rect">
<span class="minutes"></span>
<p>Minutes</p>
</div>
<div class="rect">
<span class="seconds"></span>
<p>Seconds</p>
</div>
</div>
<button class="btn-main" type="button">Start</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
CSS
:root{
--yellow: #fff189;
--grey: #444444;
--off-white: #e6e6e6;
--blue: #047db1;
--pink: #6b093d;
--green: #ccf0a9;
--black: #000000;
}
h1{
font-size: 4.2em;
}
h2{
font-size: 1.75em;
}
*{
font-family: 'Poppins', sans-serif;
}
.section{
padding-right: 5vw;
padding-left: 5vw;
padding-bottom: 3em;
padding-top: 3em;
}
/*------------------------------------hero section------------------------------------*/
.hero{
min-height: 100vh;
background-color: var(--yellow);
}
.timer{
margin-bottom: 1em;
}
.rect{
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-right: 0.5em;
padding: 0.2em;
border-radius: 0.5em;
text-align: center;
color: var(--off-white);
background-color: var(--blue);
height: 6.5em;
width: 8em;
min-width: 0;
}
.rect h1{
font-size: 2.25em;
font-weight: 700;
}
.btn-main{
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.25);
border-style: none;
font-size: 1.1em;
border-radius: 00.5em;
background-color: var(--pink);
color: var(--off-white);
padding-top: 0.6em;
padding-bottom: 0.6em;
padding-right: 1.8em;
padding-left: 1.8em;
}
.btn-main:hover{
background-color: var(--grey);
}
Add display: block; css in .btn-main class.
visit : https://jsfiddle.net/ktv1frwu/
I tested your code according to browser's width it changes to inline and sometime below those boxes.
Fix it by adding
display : block in your .btn-main class
.btn-main{
display:block;
}
I have built a standard footer, emulating the tourlife.com footer. However my link next to the instagram image isn't centered with the image, also the links "terms" and "help" are also out of alignment with the form. This is my second attempt using w3school's 'css grid of boxes/ equal width boxes'.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<footer class="clearfix">
<div class="box">
<img class="ig_logo" src="images/instagramicon.jpg">
#TOURLIFE
</div>
<div class="box">
<a class="biggertext" href="#">TERMS</a>
<a class="biggertext" href="#">HELP</a>
<form class="form">
<input class="enter" type="email" placeholder="email">
<button type="submit" class="button_1">SUBSCRIBE</button>
</form>
</div>
<div class="box">
<p>© Copyright Ben Cotta 2020</p>
</div>
</footer>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
text-decoration: none;
}
/* Main Footer */
.box {
float: left;
width: 33.33%;
padding: 20px 0px;
box-sizing: border-box;
text-align: center;
color: black;
font-size: 13px;
border-top: 1px solid black;
}
.clearfix::after {
content: " ";
clear: both;
display: table;
}
.box .biggertext {
font-size: 16px;
padding: 0px 4px;
margin-left: 6px;
}
.box a:visited {
color: black;
}
.ig_logo {
height: 100%;
width: 20px;
}
/* Middle Box */
.form {
float: right;
}
.enter {
width: 10vw;
margin-right: 10px;
padding: 6px 10px;
}
.button_1 {
background-color: black;
color: white;
padding: 6px 10px;
width: 8vw;
font-size: 12px;
text-align: center;
}
/* Right Box */
This is way easier to do with flexbox.
When you set your box width to 33.33% it doesn't know what to refer to. If you set the height of your body it will automatically give 100% width of your screen and the child to your body has a reference.
By typing "display: flexbox" your items under that class will align in a row. Voila!
By using "justify-content", you can decide how you want to spread your items and with "align-items" you can center your items vertically. You must give them space to do this though.
Your Instagram-pic didn't work, so I added a new link. I think it should work.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Main Footer */
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, Helvetica, sans-serif;
}
.clearfix {
border-top: 1px solid black;
width: 80%;
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
}
.box {
display: flex;
align-items: center;
}
.box a {
text-decoration: none;
padding-right: 10px;
color: #000;
}
.button_1 {
background-color: black;
color: #fff;
border: none;
outline: none;
padding: 10px;
}
.enter {
padding: 8px 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<footer class="clearfix">
<div class="box">
<img src="https://img.icons8.com/fluent/48/000000/instagram-new.png" />
#TOURLIFE
</div>
<div class="box">
<a class="biggertext" href="#">TERMS</a>
<a class="biggertext" href="#">HELP</a>
<form class="form">
<input class="enter" type="email" placeholder="email" />
<button type="submit" class="button_1">SUBSCRIBE</button>
</form>
</div>
<div class="box">
<p>© Copyright Ben Cotta 2020</p>
</div>
</footer>
</body>
</html>
https://jsfiddle.net/battleaxe/5rc9asn0/
I have a mini project here. When I try to text-align: center; in body, the icons don't follow. If I remove the left: 0; in .content-label i in css, it stays on the right and I have no clue how to put it on the left side.
For more info, please check my code.
https://jsfiddle.net/Foxseiz/zse8tuL9/2/
There you go.
Try not to use position absolute as first priority as its the last option to style and element :)
/* CSS files add styling rules to your content */
body {
font-family: verdana, arial, sans-serif !important;
margin: auto;
max-width: 800px;
margin-top: 50px;
text-align: center;
}
input[type="text"] {
width: 180px;
border: 2px solid #aaa;
border-radius: 4px;
margin: 8px 0;
outline: none;
padding: 8px;
box-sizing: border-box;
transition: 0.3s;
}
input[type="text"]:focus {
border-color: dodgerBlue;
box-shadow: 0 0 8px 0 dodgerBlue;
}
.content-label input[type="text"] {
padding-left: 50px;
}
.content-label {
position: relative;
}
.content-label i {
left: 0;
top: 8px;
padding: 9px 8px;
color: #aaa;
transition: 0.3s;
}
.content-label input[type="text"]:focus + i {
color: dodgerBlue;
}
.content-label.inputIconBg i {
background-color: #aaa;
color: #fff;
padding: 9px 8px;
border-radius: 4px 0 0 4px;
line-height: inherit !important;
width: 40px;
text-align: center;
}
.content-label.inputIconBg input[type="text"]:focus + i {
color: #fff;
background-color: dodgerBlue;
}
.content-label {
position: relative;
display: flex;
flex-direction: row-reverse;
margin: 0 auto;
text-align: center;
align-items: center;
justify-content: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet"/>
<link href="/your-path-to-fontawesome/css/brands.css" rel="stylesheet" />
<link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet" />
<script src="https://kit.fontawesome.com/ed2e310181.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="full-content">
<div id="content">
<form autocomplete="off">
<div class="content-label inputIconBg">
<input type="text" id="cost" placeholder="Cost"/>
<i class="fas fa-dollar-sign" data-toggle="tooltip" title="Cost" data-placement="left"></i>
</div>
<div class="content-label inputIconBg">
<input type="text" id="margin" value="1.4" placeholder="Margin"/>
<i class="fas fa-coins" data-toggle="tooltip" title="Margin" data-placement="left"></i>
</div>
<div class="content-label inputIconBg">
<input type="text" id="labor" value="35" placeholder="Labor"/>
<i class="fas fa-hammer" data-toggle="tooltip" title="Labor" data-placement="left"></i>
</div>
<div class="content-label inputIconBg">
<input type="text" id="shipping" value="15" placeholder="Shipping"/>
<i class="fas fa-truck" data-toggle="tooltip" title="Shipping" data-placement="left"></i>
</div>
</form>
<button id="calc" onclick="calculate()">Calculate</button>
</div>
<p id="result"></p>
</div>
</body>
</html>
Use
.content-label.inputIconBg i {
margin-right: -42px;
}
to align icon inside input
You can use Flexbox.
You can set your content-label as flex element and center with justify-content property.
N.B. i used order property because you set the i tag after the input, so i change the order.
/* CSS files add styling rules to your content */
body {
font-family: verdana, arial, sans-serif !important;
margin: auto;
max-width: 800px;
margin-top: 50px;
text-align: center;
}
input[type="text"] {
width: 180px;
border: 2px solid #aaa;
border-radius: 4px;
margin: 8px 0;
outline: none;
padding: 8px;
box-sizing: border-box;
transition: 0.3s;
}
input[type="text"]:focus {
border-color: dodgerBlue;
box-shadow: 0 0 8px 0 dodgerBlue;
}
.content-label input[type="text"] {
padding-left: 50px;
order:2;
}
.content-label {
position: relative;
display:flex; /* add this */
justify-content:center; /* add this */
}
.content-label i {
/*position: absolute;
left: 0;
top: 8px;*/ /* comment this */
margin: 9px 0 8px 8px;
color: #aaa;
transition: 0.3s;
order:1;
}
.content-label input[type="text"]:focus + i {
color: dodgerBlue;
}
.content-label.inputIconBg i {
background-color: #aaa;
color: #fff;
padding: 9px 8px;
border-radius: 4px 0 0 4px;
line-height: inherit !important;
width: 40px;
text-align: center;
}
.content-label.inputIconBg input[type="text"]:focus + i {
color: #fff;
background-color: dodgerBlue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet"/>
<link href="/your-path-to-fontawesome/css/brands.css" rel="stylesheet" />
<link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet" />
<script src="https://kit.fontawesome.com/ed2e310181.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="full-content">
<div id="content">
<form autocomplete="off">
<div class="content-label inputIconBg">
<input type="text" id="cost" placeholder="Cost"/>
<i class="fas fa-dollar-sign" data-toggle="tooltip" title="Cost" data-placement="left"></i>
</div>
<div class="content-label inputIconBg">
<input type="text" id="margin" value="1.4" placeholder="Margin"/>
<i class="fas fa-coins" data-toggle="tooltip" title="Margin" data-placement="left"></i>
</div>
<div class="content-label inputIconBg">
<input type="text" id="labor" value="35" placeholder="Labor"/>
<i class="fas fa-hammer" data-toggle="tooltip" title="Labor" data-placement="left"></i>
</div>
<div class="content-label inputIconBg">
<input type="text" id="shipping" value="15" placeholder="Shipping"/>
<i class="fas fa-truck" data-toggle="tooltip" title="Shipping" data-placement="left"></i>
</div>
</form>
<button id="calc" onclick="calculate()">Calculate</button>
</div>
<p id="result"></p>
</div>
</body>
</html>
I have written this code for creating a select box in bootstrap but the corners are coming rounded which i want to remove. How to do so? I tried a lot but could not find any solution for this. Please help me.
Here is the link of jsfiddle.net also
https://jsfiddle.net/ankitshri774/2redLfnc/7/
body {
background-color: #E8E8E8;
}
label {
float: left;
}
#main_container {
background-color: white;
margin-left: 10px;
padding-left: 13px;
margin-right: 10px;
padding-right: 13px;
padding-top: 13px;
margin-top: 10px;
box-sizing: border-box;
}
#container {
background-color: aqua;
}
.select-wrapper {
border: 1px solid black;
border-radius: 0px;
}
<!doctype html>
<html lang="en">
<head>
<title>Master Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="masterpage1.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="main_container">
<form>
<div id="partymaster">
<h3>Party Master</h3>
<hr/>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>Category
<span style="color:red">*</span>
</label>
<span class="select-wrapper"><select name="category" class="form-control no-radius">
<option>A</option>
</select>
</span>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
Add the below line to your CSS file:
.no-radius{
border-radius:0px !important;
}
Use code below(set !important to prevent override)
The border-radius is 4px because you set to select form-control class and it is bootstrap definition by default
.no-radius{
border-radius: unset!important;
}
See fiddle:https://jsfiddle.net/2redLfnc/29/
body{
background-color:#E8E8E8;
}
label{
float: left;
}
#main_container{
background-color: white;
margin-left: 10px;
padding-left:13px;
margin-right: 10px;
padding-right:13px;
padding-top: 13px;
margin-top: 10px;
box-sizing: border-box;
}
#container
{
background-color: aqua;
}
.select-wrapper{
border: 1px solid black;
border-radius: 0px;
}
.no-radius{
border-radius: unset!important;
}
<!doctype html>
<html lang="en">
<head>
<title>Master Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="masterpage1.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body >
<div id="main_container">
<form>
<div id="partymaster">
<h3>Party Master</h3>
<hr/>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>Category
<span style="color:red">*</span>
</label>
<span class="select-wrapper"><select name="category" class="form-control no-radius">
<option>A</option>
</select>
</span>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
The problem is that the form-control-class sets a radius of 4px. So you can't overwrite it with a different class on the same element (at least I would not know how to that).
So as a quick fix, I have defined a different class form-control-without-radiusand am using that in my updated fiddle.
.form-control-without-radius {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
}
However, this is a fundamental change of the entire layout, and I guess it would collide with many other UI-Components. So you may have to build your own custom Bootstrap. Some people find it easy to do with sass, I had more fun using the Bootstrap Theme Builder. And there are others as well. If you're not familiar enough with BT, this may sound like a scary idea - but my experience doing so has been only positive, so I'd go for it ;-)
Update: I saw the unset !important-idea in other posts, neat idea! That make the whole thing simpler, of course. Have updated my fiddle accordingly.
Use rounded-0 but in Bootstrap-4 only.
body {
background-color: #E8E8E8;
}
label {
float: left;
}
#main_container {
background-color: white;
margin-left: 10px;
padding-left: 13px;
margin-right: 10px;
padding-right: 13px;
padding-top: 13px;
margin-top: 10px;
box-sizing: border-box;
}
#container {
background-color: aqua;
}
.select-wrapper {
border: 1px solid black;
border-radius: 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="main_container">
<form>
<div id="partymaster">
<h3>Party Master</h3>
<hr/>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>Category
<span style="color:red">*</span>
</label>
<span class="select-wrapper">
<select name="category" class="form-control rounded-0">
<option>A</option>
</select>
</span>
</div>
</div>
</div>
</form>
</div>