I'm trying to learn materialize CSS framework and I'm facing a little problem. It appears messy when I add a search input or when I add a grid system. I don't know why.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<title></title>
</head>
<body>
<nav>
<div class="row">
<div class="col s12 l12">
<div class="nav-wrapper navbar-fixed">
<div class="row">
<div class="brand-logo left col s12 l4">
opplance
</div>
</div>
<div class="row">
<form class="col s6 l4 " method="GET">
<input type="search" name="" value="">
<button type="submit" name="button" class="btn"> <i class="material-icons">search</i>
</button>
</form>
</div>
<div class="row">
<ul class="right col s6 l4">
<li> <button type="button" name="button" class="btn">Register</button> </li>
<li><button type="button" name="button" class="btn">Login</button></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</body>
</html>
Related
I'm trying to create a website using bootstrap where the title and the search bar is at the center of the screen. I tried adding the my-auto, but that doesn't do anything. It shouldn't be difficult, but I can't make it work. Any ideas?
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="stylesheet.css" rel="stylesheet">
</head>
<body>
<div class="container" style="margin-top: 8%;">
<div class="col-md-6 col-md-offset-3">
<div class="row">
<div id="logo" class="text-center">
<h1>Movie</h1>
</div>
<form role="form" id="form-buscar">
<div class="form-group">
<div class="input-group">
<input id="1" class="form-control" type="text" name="search" placeholder="Search..." required/>
<span class="input-group-btn">
<button type="button" class="btn btn-outline-primary">search</button>
<i class="glyphicon glyphicon-search" aria-hidden="true"></i>
</span>
</div>
</div>
</form>
</div>
</div>
<p>movie!</p>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
You can use display:flex; property to center the content.
.container{
display: flex;
flex-direction:column;
align-items: center;
justify-content: center;
text-align: center;
}
<div class="container" style="margin-top: 8%;">
<div class="col-md-6 col-md-offset-3">
<div class="row">
<div id="logo" class="text-center">
<h1>Movie</h1>
</div>
<form role="form" id="form-buscar">
<div class="form-group">
<div class="input-group">
<input id="1" class="form-control" type="text" name="search" placeholder="Search..." required/>
<span class="input-group-btn">
<button type="button" class="btn btn-outline-primary">search</button>
<i class="glyphicon glyphicon-search" aria-hidden="true"></i>
</span>
</div>
</div>
</form>
</div>
</div>
<p>movie!</p>
</div>
What youre looking for is flex box,
Try adding to the <div class="row"> the style of
display: flex;
flex-direction: column;
align-items: center;
I'm trying to create HTML Page using Material Design grid system and implement the input fields view with all the nice features its offers in RTL Direction.
There is 2 Problems:
1. the grid layout not flliped to rtl
2. the input fields not working as expected
<html dir="rtl" lang="he">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="<?php echo base_url(); ?>js/jquery/jquery.min.js"></script>
<script src="<?php echo base_url(); ?>js/pooper.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body dir="rtl">
<div class="row right">
<div class="col s1">1</div>
<div class="col s1">2</div>
<div class="col s1">3</div>
<div class="col s1">4</div>
<div class="col s1">5</div>
<div class="col s1">6</div>
<div class="col s1">7</div>
<div class="col s1">8</div>
<div class="col s1">9</div>
<div class="col s1">10</div>
<div class="col s1">11</div>
<div class="col s1">12</div>
</div>
<div class="row">
<div class="col s10" style="border-style: solid;border-color:black;">
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12 right">
<i class="material-icons prefix right">search</i>
<textarea id="icon_prefix2" class="materialize-textarea"></textarea>
<label for="icon_prefix2">search</label>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
i've tried all conventional ways like body and html dir and added right to as class name but nothing helped.
I am trying to implement the dropdown search feature from the UiKit, but am having trouble displaying the search bar itself. I have added only the scripts I need this far in my application, maybe I am missing one? Can anyone see what it is I'm missing
Dropdown Search UIKit
Here's my codepen:
Codepen example
<nav class="uk-navbar uk-navbar-container uk-margin">
<div class="uk-navbar-left">
<a class="uk-navbar-item uk-logo" href="#">Logo</a>
<ul class="uk-navbar-nav">
<li class="uk-active">Active</li>
<li>Item</li>
</ul>
</div>
<div class="uk-navbar-right">
<a class="uk-navbar-toggle" href="#modal-full" uk-search-icon uk-toggle></a>
</div>
</nav>
<div id="modal-full" class="uk-modal-full uk-modal" uk-modal>
<div class="uk-modal-dialog uk-flex uk-flex-center uk-flex-middle" uk-height-viewport>
<button class="uk-modal-close-full" type="button" uk-close></button>
<form class="uk-search uk-search-large">
<input class="uk-search-input uk-text-center" type="search" placeholder="Search..." autofocus>
</form>
</div>
</div>
I added these two your <head> tags and the search icon appeared + worked:
<head>
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.6/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.6/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.6/js/uikit-icons.min.js"></script>
</head>
So like this overall:
<head>
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.6/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.6/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.6/js/uikit-icons.min.js"></script>
</head>
<nav class="uk-navbar uk-navbar-container uk-margin">
<div class="uk-navbar-left">
<a class="uk-navbar-item uk-logo" href="#">Logo</a>
<ul class="uk-navbar-nav">
<li class="uk-active">Active</li>
<li>Item</li>
</ul>
</div>
<div class="uk-navbar-right">
<a class="uk-navbar-toggle" href="#modal-full" uk-search-icon uk-toggle></a>
</div>
</nav>
<div id="modal-full" class="uk-modal-full uk-modal" uk-modal>
<div class="uk-modal-dialog uk-flex uk-flex-center uk-flex-middle" uk-height-viewport>
<button class="uk-modal-close-full" type="button" uk-close></button>
<form class="uk-search uk-search-large">
<input class="uk-search-input uk-text-center" type="search" placeholder="Search..." autofocus>
</form>
</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");
I have following HTML code with bootstrap with a simple login. I want to make a box behind the login form and to be something like this.
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Login Page</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- HOVER CSS -->
<link href="css/hover-min.css" rel="stylesheet" media="all">
<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="logo" class="col-xs-4 col-xs-offset-1">
<img src="img/tei.png" class="img-responsive" alt="Responsive image">
</div>
<!-- NAVBAR -->
<div class="navbar navbar-default navbar-custom navbar-fixed-top" role="navigation">
<div class="container container-nav">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle Nav</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Contact
</li>
</ul>
</div>
</div>
</div>
<!-- END NAVBAR -->
<!-- LOGIN BOX -->
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-6">
<div class="panel panel-default hvr-glow">
<div class="panel-heading"> <strong class="">Σύνδεση στην πλατφόρμα Εργαστηρίων</strong>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form" method="post">
<div class="form-group">
<label for="onoma-xristi" class="col-sm-3 control-label">Όνομα Χρήστη</label>
<div class="col-sm-9">
<input name="username" type="text" class="form-control" id="onoma-xristi" placeholder="" required="">
</div>
</div>
<div class="form-group">
<label for="kwdikos-xristi" class="col-sm-3 control-label">Κωδικός</label>
<div class="col-sm-9">
<input name="password" type="password" class="form-control" id="kwdikos-xristi" placeholder="" required="">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="checkbox">
<label class="">
<input type="checkbox" class="">Να με θυμάσαι</label>
</div>
</div>
</div>
<div class="form-group last">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-success btn-sm hvr-grow-shadow">Σύνδεση</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- END LOGIN BOX -->
<!-- HEADER -->
<div class="header">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
</div>
</div>
</div>
</div>
<!-- END HEADER -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
And live at
Live here
I searched a lot for this border or box but i didnt find anything at all at bootstrap site.
Can anyone guide me of how to make this border and put the login box in the middle of the box and i will play with the margin top.
Thanks a lot for your time!
Wrap it in a container element. A "Bootstrap" way to do this would be something along the lines of nesting columns.
<div class="container">
<div class="row"><!-- new -->
<div class="col-md-12 form-container"><!-- new -->
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-default hvr-glow">
<!-- rest of your markup -->
</div>
</div>
</div>
</div><!-- new -->
</div><!-- new -->
</div>
Style .form-container as needed; i.e. background-color: white; border-radius: 10px;.
I see you have a custom CSS selector on your navbar's .container element of .container-nav that limits the width of the navbar. You'd have to apply something similar if you wanted what I have above to only be as wide as the navbar.
It looks like this project is a work-in-progress as I foresee issues with your logo and the layout you currently have. So I think any answer you get won't be exactly on point.
Hope this gets you pointed in the right direction though.