I'm discovering coreUI.
I'm trying to create this login.html found on github:
https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template/blob/master/Static_Full_Project_GULP/pages-login.html
Everything works great but can't show the user-icon and the lock-icon. Instead, i get the default icon for both of them.
I'm working on a folder named coreUI that contains:
login.html
css folder (contains style.css and simple-line-icons.css both from the git repo)
bower_components folder ( that contains jquery, bootstarp and tether)
so the paths should be correct.
Moreover, when I inspect the element in the browser, i can see in the css rules tab, the content \e08e and \e005 for the lock-icon and the user-icon.
But they are displaying the same default icon. Any help would be appreciated.
I also tried it with register.html ; https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template/blob/master/Static_Full_Project_GULP/pages-register.html but the same problem. All icons show defaut.
this is my login.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, shrink-to-fit=no">
<meta name="description" content="...">
<meta name="author" content="....">
<meta name="keyword" content="....">
<!-- FavIcon link-->
<link rel="shortcut icon" href="../favicon.png">
<!-- Icons -->
<link href="css/simple-line-icons.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<title>Login</title>
</head>
<body class="app flex-row align-items-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card-group mb-0">
<div class="card p-4">
<div class="card-block">
<h1>Sign In</h1>
<p class="text-muted">Sign In to your account</p>
<div class="input-group mb-3">
<span class="input-group-addon"><i class="icon-user"></i>
</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group mb-4">
<span class="input-group-addon"><i class="icon-lock"></i>
</span>
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="row">
<div class="col-6">
<button type="button" class="btn btn-primary px-4">Login</button>
</div>
<div class="col-6 text-right">
<button type="button" class="btn btn-link px-0">Forgot password?</button>
</div>
</div>
</div>
</div>
<div class="card card-inverse card-primary py-5 d-md-down-none" style="width:44%">
<div class="card-block text-center">
<div>
<h2>Sign up</h2>
<p>Site description....</p>
<button type="button" class="btn btn-primary active mt-3">Register</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/tether/dist/js/tether.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
I think you have not either added font folder or fonts in font directory.
SO create a folder fonts add fonts files of simple icon. if you have already font folder then add fonts in this folder.
This is how your angular.json should look if you want to use #coreui/icons
"styles": [
"src/styles.sass",
"node_modules/#coreui/coreui/dist/css/coreui.css",
"node_modules/#coreui/icons/css/all.css"
Your setting in angular.json maybe listing free:
"styles": [
"node_modules/#coreui/icons/css/free.css",
Change to :
"styles": [
"node_modules/#coreui/icons/css/all.css",
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 know there have already been questions on this subject, but none of the solutions I found here were helpful. Hopefully someone can help me here:
I have a row with 4 columns of data as follows:
Here is the code:
<hr class="mb-4">
<div>
<h3>{{ player.full_name }}</h3>
<h4> {{ player.position }}</h4>
<h5> {{ player.team }}</h5>
</div>
<hr class="mb-4">
<div class="row">
<div class="col-xs-3 col-sm-3">
<div class="text-center font-weight-bold">
Form
</div>
<div class="text-center ">
{{ player.form }}
</div>
</div>
<div class="col-xs-3 col-sm-3">
<div class="text-center font-weight-bold">
Price
</div>
<div class="text-center">
<span>£</span>{{ player.price }}
</div>
</div>
<div class="col-xs-3 col-sm-3">
<div class="text-center font-weight-bold">
Total
</div>
<div class="text-center">
{{ player.total_points }}
</div>
</div>
<div class="col-xs-3 col-sm-3">
<div class="text-center font-weight-bold">
TSB
</div>
<div class="text-center">
{{ player.tsb }}%
</div>
</div>
</div>
As far as I understand, the 4 columns should keep in one row even in smaller screen, especially as there is definitely enough space to show them all together. On small screens this is what I get:
Nothing I change seem to help in this matter. I would like all columns to be shown in the same row even on smaller screens. Appreciate your help
Edit
The source of the problem is in the of my page.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/v/bs4/dt-1.10.20/b-1.6.1/cr-1.5.2/r-2.2.3/sl-1.3.1/datatables.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.20/b-1.6.1/cr-1.5.2/r-2.2.3/sl-1.3.1/datatables.min.js"></script>
</head>
So the problem is when using the Bootstrap 4 tag instead of Bootstrap 3 like in the example below. Is that by design?
if you want it to be in 4 columns at any device width, just use the class col-3 instead col-xs-3 col-sm-3
I can't seem to reproduce this on my end. My guess is there's some difference in your CSS somewhere:
<!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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
<!-- Bootstrap core CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<hr class="mb-4">
<div>
<h3>Mohamed Salah</h3>
<h4>Midfielder</h4>
<h5>Liverpool</h5>
</div>
<hr class="mb-4">
<div class="row">
<div class="col-xs-3 col-sm-3">
<div class="text-center font-weight-bold">
Form
</div>
<div class="text-center ">
7.5
</div>
</div>
<div class="col-xs-3 col-sm-3">
<div class="text-center font-weight-bold">
Price
</div>
<div class="text-center">
<span>£</span>12.8
</div>
</div>
<div class="col-xs-3 col-sm-3">
<div class="text-center font-weight-bold">
Total
</div>
<div class="text-center">
165
</div>
</div>
<div class="col-xs-3 col-sm-3">
<div class="text-center font-weight-bold">
TSB
</div>
<div class="text-center">
45.3%
</div>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
</body>
</html>
test it out and see:
https://codepen.io/davidgbiggs/pen/JjdXpGq
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 am using BootStrap grid to design my html pages. Everything is working fine except for small screens. In small screens the views are overlapping like below
I am using the below code
div class="container" >
<div class="row">
<div class=" col-xs-6 col-sm-offset-1
col-sm-4 col-md-offset-2 col-md-3">
<div id="poster">
<img src="http://ia.media-imdb.com/images/M/MV5BMTk2NTI1MTU4N15BMl5BanBnXkFtZTcwODg0OTY0Nw##._V1_SX300.jpg">
</div>
</div>
<div class="col-sm-offset-1 col-sm-4 col-xs-6 col-md-2" >
<div id="ratingdiv">
<label>Your Rating</label>
<div id="rateYo"></div>
<div class="editbtn">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Edit</button>
</div>
<div class="deletebtn">
<button>Delete</button>
</div>
</div>
</div>
</div>
</div>
I gave "col-xs-6" but still its not working.
Could some one tell me what I am doing wrong.
Really appreciate any ideas or suggestions.
Thanks in advance
You missed some closing tags. Here you go. Let me know if this is what you've expected.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-8 col-md-6 col-lg-4">
<img src="http://ia.media-imdb.com/images/M/MV5BMTk2NTI1MTU4N15BMl5BanBnXkFtZTcwODg0OTY0Nw##._V1_SX300.jpg" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-2 col-lg-2">
<div id="ratingdiv">
<div class="row">
<label>Your Rating</label>
<div id="rateYo"></div>
</div>
<div class="row">
<button type="button" class="btn btn-info btn-md">Edit</button>
<button type="button" class="btn btn-danger btn-md">Delete</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
you don't have provide any css , that's why i got two opinions. first one i think you images overlapping the col-xs-6 and the solution is below . may be this will fix your issue
#poster {
width:100%;
float:left;
}
#poster img {
width:100%;
}
otherwise i think you have set position:absolute to #ratingdiv , if you set postion to #ratingdiv just change position:relative to the media queries
I have the following code and I am not sure why bg-info doesn't work for the whole body as I am new to bootstrap.
<!--http://v4-alpha.getbootstrap.com/getting-started/introduction/-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
</head>
<body class="bg-info">
<div class="container text-xs-center">
<h1 class="display-1">Fullstack Conference</h1>
<p class="lead">Coming soon!! A one day conference about all things Javascript!!</p>
</div>
<div class="col-lg-6 col-lg-offset-3">
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter your Email for info...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Sign Up!</button>
</span>
</div>
</div>
</div>
<!-- jQuery first, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
Here's what I see:
Note: According to this video it should work though https://teamtreehouse.com/library/bootstrap-4-basics/getting-to-know-bootstrap-4/enhancing-the-page
You are using the alpha 4 of bootstrap(js), use bootstrap 3.x.
Also you have an extra </div> in the code.
This works:
<!--http://v4-alpha.getbootstrap.com/getting-started/introduction/-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous" />
</head>
<body class="bg-info">
<div class="container text-xs-center">
<h1 class="display-1">Fullstack Conference</h1>
<p class="lead">Coming soon!! A one day conference about all things Javascript!!</p>
</div>
<div class="col-lg-6 col-lg-offset-3">
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter your Email for info...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Sign Up!</button>
</span>
</div>
</div>
</body>
<!-- jQuery first, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</html>
What do you mean by doesn't work for the whole body? Try to add this CSS property to your custom CSS:
.bg-info {background: #5bc0de!important;
}