I have simple input group and works great.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<td class="form-group">
<div class="col-xs-7 input-group">
<span class="input-group-addon"><span><b>+49</b></span></span>
<input name="newMobileNumber" validator="/^(\d{11})$/" maxlength="11" id="newMobileNumber" validator-invoke="watch" validator-error="fehlerhafte Mobilfunknummer-Eingabe" ng-model="vm.MobileChangeData.NewMobileNumber" class="form-control" placeholder="Neue Mobilfunknummer"
required>
</div>
</td>
But I want a span in front of the +49 instead of the input.
I tried:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<td>
<div class="col-xs-7">
<span class="input-group-addon"><span><b>+49</b></span></span>
<span>3124214214125</span>
</div>
</td>
But everything is messed up.
Any idea?
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<td>
<div class="col-xs-7 input-group">
<span class="input-group-addon"><span><b>+49</b></span></span>
<span class="form-control">3124214214125</span>
</div>
</td>
because you have not added input-group in parent div
see bellow updated code :
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<td>
<div class="col-xs-7 input-group">
<span class="input-group-addon"><span><b>+49</b></span></span>
<span>3124214214125</span>
</div>
</td>
Related
I want to centre the input between the two buttons but I tried about everything I know and nothing works:(
Here's a picture of what it looks like right now, I want it to be smaller and inbetween (1 line).
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Body -->
<div class="card-footer">
<div class="container d-flex">
<div class="div mx-auto">
-
<input type="text" class="form-control" placeholder="0">
+
</div>
Perhaps you can use d-flex class in your div container to enable flex layout
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Body -->
<div class="card-footer">
<div class="container d-flex">
<div class="d-flex mx-auto">
-
<input type="text" class="form-control" placeholder="0" />
+
</div>
</div>
</div>
You can just use input-group class in your div container.
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Body -->
<div class="card-footer">
<div class="container d-flex">
<div class="input-group">
-
<input type="text" class="form-control" placeholder="0">
+
</div>
</div>
</div>
in your css file:
.
.div.mx-auto{
font-size:0;
}
.div.mx-auto a,
.div.mx-auto input{
display:inline-block;
vertical-align:middle;
font-size: 1rem;
}
I have tried to use a bootstrap search box in my code that is supposed to be rendered like this:
But for some reason it does not render correctly in my layout which is something like this:
Here is my html code for this basic layout. Is there anything I can do so the button renders corrctly on the search box?
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Weather Dashboard</title>
</head>
<body>
<div class="container">
<div class="row" id="firstRow">
<div class="col" id="top-bar">
1 of 2
</div>
</div>
<div class="row" id="secondRow">
<div class="col col-lg-3">
<h4>Search for a city:</h4>
<div class="input-group md-form form-sm form-2 pl-0">
<input class="form-control my-0 py-1 amber-border" type="text" placeholder="Search"
aria-label="Search">
<div class="input-group-append">
<span class="input-group-text amber lighten-3" id="basic-text1">
<i class="fas fa-search text-grey" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
<div class="col">
2 of 3
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
</body>
</html>
You can check the below code. or below youtube link for the better explanation:
https://youtu.be/34Ee-HLtMgU
Only fontawesome library was missing.
I have added one more search box. try to add submit button instead of adding span tag. This is the best practice.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Weather Dashboard</title>
</head>
<body>
<div class="container">
<div class="row" id="firstRow">
<div class="col" id="top-bar">
1 of 2
</div>
</div>
<div class="row" id="secondRow">
<div class="col col-lg-3">
<h4>Search for a city:</h4>
<div class="input-group md-form form-sm form-2 pl-0">
<input class="form-control my-0 py-1 amber-border" type="text" placeholder="Search"
aria-label="Search">
<div class="input-group-append">
<span class="input-group-text amber lighten-3" id="basic-text1">
<i class="fas fa-search text-grey" aria-hidden="true"></i>
</span>
</div>
</div>
<div class="input-group mt-3">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-append">
<button class="btn btn-secondary" type="submit">
<i class="fas fa-search text-grey" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
<div class="col">
2 of 3
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
</body>
</html>
I don't know if you missed this point, but you didn't include the "fontAwesome" CDN link. You need to use it to display the search icon. I also interpreted some of your code to create the image. You can check it.
And if you want search input to cover the entire line, you should use col-lg-12 instead of col-lg-3. The Bootstrap grid system uses a 12 column system. You must know that. https://getbootstrap.com/docs/4.4/layout/grid/
I used bootstrap's own classes to set border and icon background color. warning color for your situation
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/dc0c634418.js" crossorigin="anonymous"></script>
<div class="container">
<!-- <div class="row" id="firstRow">
<div class="col" id="top-bar">
1 of 2
</div>
</div> -->
<div class="row" id="secondRow">
<div class="col col-lg-12">
<h4>Search for a city:</h4>
<div class="input-group md-form form-sm form-2 pl-0">
<input class="form-control border border-warning my-0 py-1 amber-border" type="text" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<span class="input-group-text amber lighten-3 bg-warning" id="basic-text1">
<i class="fas fa-search text-grey" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
<!-- <div class="col">
2 of 3
</div> -->
</div>
</div>
First try changing fa fa-search in order to the icon display.
in this line => idk if u can use amber try using bg-warning (this is bootstrap), but if you want the exact color i would use css.
and maybe it is grey because the icon is not there.
I'm trying to make a select button with an input on the right.
I'm trying to use bootstrap but I can't seem to make the select fill the input-group-addon.
Any ideas?
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<td class="form-group">
<div class="col-xs-12 input-group">
<div class="input-group-addon">
<select>
<option>+351</option>
</select>
</div>
<input class="form-control">
</div>
</td>
There is no direct support from Bootstrap for this case, but there's a workaround for this problem. Just insert an empty .input-group-addon element between your form elements, e.g.:
<span class="input-group-addon" style="width:0px; padding-left:0px; padding-right:0px; border:none;"></span>
Here is a working example:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="input-group">
<select class="form-control input-group-addon">
<option>+351</option>
</select>
<span class="input-group-addon" style="width:0px; padding-left:0px; padding-right:0px; border:none;"></span>
<input class="form-control">
</div>
My only problem is that the button is not in the same line as the span.
How do I fix this?
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<td>
<span>Hello</span>
<div class="text-right">
<button class="btn btn-default">Test</button>
</div>
</td>
You could float the .text-right for example. See my example here.
.text-right {
float: right;
}
.text-right {
float: right;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<td>
<span>Hello</span>
<div class="text-right">
<button class="btn btn-default">Test</button>
</div>
</td>
You could use flexbox to easily achieve this:
.wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="wrapper">
<span>Hello</span>
<div class="text-right">
<button class="btn btn-default">Test</button>
</div>
</div>
im trying to use multiple layouts for each different page using ASP.NET MVC. Default connection of Routing config works fine as you can see Index Screenshot. If i make register page as default connection it also works without any problems.
However, when accessing register page from Index by clicking button above, CSS seems to be not readen as you can see Register Screenshot.
Kayit_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>kayitol :: #ViewBag.Title</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/ionicons.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu">
<link rel="stylesheet" href="assets/css/Brands.css">
<link rel="stylesheet" href="assets/css/Features-Boxed.css">
<link rel="stylesheet" href="assets/css/Footer-Clean.css">
<link rel="stylesheet" href="assets/css/Highlight-Blue.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css">
<link rel="stylesheet" href="assets/css/Map-Clean.css">
<link rel="stylesheet" href="assets/css/Navigation-Clean1.css">
<link rel="stylesheet" href="assets/css/Registration-Form-with-Photo.css">
<link rel="stylesheet" href="assets/css/Simple-Slider.css">
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="assets/css/Team-with-rotating-cards.css">
</head>
<body>
<nav class="navbar navbar-default navigation-clean" style="font-family:Ubuntu, sans-serif;font-size:18px;">
<div class="container">
<div class="navbar-header"><a class="navbar-brand" href="#"> <img class="img-responsive" src="assets/img/logo_resized.png" style="width:210px;height:61px;"></a><button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button></div>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav navbar-right" style="padding:34px;">
<li role="presentation">Aramıza katıl</li>
<li role="presentation">Giriş </li>
</ul>
</div>
</div>
</nav>
<div data-bs-parallax-bg="true" class="register-photo" style="background-image:url(assets/img/White-Background-647.jpg);background-position:center;background-size:cover;">
<div class="form-container">
<form method="post">
<h2 class="text-center"><strong>Hemen</strong> bir hesap yaratın.</h2>
<div class="form-group"><input class="form-control input-sm" type="email" name="kullanici_adi" required="" placeholder="Kullanıcı adı" autofocus=""></div>
<div class="form-group"><input class="form-control" type="email" name="kullanici_isim" placeholder="İsim"></div>
<div class="form-group"><input class="form-control" type="email" name="kullanici_soyad" placeholder="Soyad"></div>
<div class="form-group"><input class="form-control" type="date" name="kullanici_dogumtarihi"></div>
<div class="form-group"><input class="form-control" type="email" name="email" required="" placeholder="Email"></div>
<div class="form-group"><input class="form-control" type="password" name="password" required="" placeholder="Şifre"></div>
<div class="form-group"><input class="form-control" type="password" name="password-repeat" required="" placeholder="Şifre (tekrar)"></div>
<div class="form-group">
<div class="checkbox"><label class="control-label"><input type="checkbox">Kuralları okudum ve kabul ediyorum.</label></div>
</div>
<div class="form-group"><button class="btn btn-primary btn-block" type="submit" style="background-color:rgba(0,102,127,0.72);">Üye ol</button></div>Zaten hesabınız var mı? Hemen giriş yapın.
</form>
</div>
</div>
<div class="footer-clean">
<footer>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-4 item">
<h3>İletişim </h3>
<ul>
<li>E-mail: info#birsorumvar.com</li>
<li>Telefon: +90 232 224 40 08 </li>
<li>Online müşteri hizmetleri</li>
</ul>
</div>
<div class="col-md-3 col-sm-4 item">
<h3>Hakkımızda </h3>
<ul>
<li>birsorumvar.com </li>
<li>Takım </li>
<li>S.S.S </li>
</ul>
</div>
<div class="col-md-3 col-sm-4 item">
<h3>Bizimle çalışın</h3>
<ul>
<li>Açık pozisyonlar</li>
</ul>
</div>
<div class="col-md-3 item social">
<i class="icon ion-social-facebook"></i><i class="icon ion-social-twitter"></i><i class="icon ion-social-snapchat"></i><i class="icon ion-social-instagram"></i>
<p class="copyright">birsorumvar © 2018</p>
</div>
</div>
</div>
</footer>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/bs-animation.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.jquery.min.js"></script>
<script src="assets/js/Simple-Slider.js"></script>
#RenderBody()
</body>
</html>
Kayitol.cshtml
#{
ViewBag.Title = "Kayitol";
Layout = "~/Views/Shared/Kayit_Layout.cshtml";
}
KayitController.cs
public class KayitController : Controller
{
// GET: Kayit
public ActionResult Kayitol()
{
return View();
}
}
}
Obviously, the relative path of css files can't be found. (The browser tries to find them with ...kayit/kayitol/assets/...) You should navigate root the relative paths by starts with /
<link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
Also, I suggest you to use Bundles to import static css and js files.
bundles.Add(new StyleBundle("~/assets/css").Include(
"~/assets/bootstrap/css/bootstrap.min.css");