I'm trying to keep list buttons at same align but i dont know how to do it if text is long button's position changes automatically
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="revisit-after" content="1 days">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.10/css/mdb.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://asd.online/css/index.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<title>YeniPDF</title>
</head>
<body>
<div class="container">
<ul class="list-unstyled row" style="text-align:center;">
<li class="list-group-item col-4"><form action="" id="sorgu" method="get"><img alt="EXP" src="a" width="100"" height="120"><div class="hizala">EXAMPLE EXAMPLE EXAMPLE</div>
<button type="submit" class="btn btn-success">
<i class="fa fa-arrow-circle-right fa-lg"></i>
</button></form></li>
<li class="list-group-item col-4"><form action="" id="sorgu" method="get"><img alt="EXP" src="
a
" width="100"" height="120"><div class="hizala">EXAMPLE EXAMPLE EXAMPLE EXAMPLE</div>
<button type="submit" class="btn btn-success">
<i class="fa fa-arrow-circle-right fa-lg"></i>
</button></form></li>
<li class="list-group-item col-4"><form action="" id="sorgu" method="get"><img alt="EXP" src="a" width="100"" height="120"><div class="hizala">EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE</div>
<button type="submit" class="btn btn-success">
<i class="fa fa-arrow-circle-right fa-lg"></i>
</button></form></li>
<li class="list-group-item col-4"><form action="" id="sorgu" method="get"><img alt="EXP" src="a" width="100"" height="120"><div class="hizala">EXAMPLE EXAMPLE EXAMPLE</div>
<button type="submit" class="btn btn-success">
<i class="fa fa-arrow-circle-right fa-lg"></i>
</button></form></li>
</ul>
</div>
</body>
</html>
i'm not using any specific css just bootstrap 4 this is js fiddle https://jsfiddle.net/ygoqmb14/2/
Try add min-height for .hizala class
.hizala {
min-height: 130px;
}
Related
I have a asp.net application, where I wanted to use a premade bootstrap template for my frontend. I found this one.
The original site from the template looks really nice with a background like this:
I copied all the css into my css folder, and also took the html and cut some parts of it out such that I could just render my own content in it.
My _layout.cshtml that should be a scaffolding for other html files looks now like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Clean Blog - Start Bootstrap Theme</title>
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
<div class="container px-4 px-lg-5">
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto py-4 py-lg-0">
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="about.html">About</a></li>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="post.html">Sample Post</a></li>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Page Header-->
<header class="masthead" style="background-image: url('../../wwwroot/assets/home-bg.jpg')">
<div class="container position-relative px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<div class="site-heading">
<h1>Clean Blog</h1>
<span class="subheading">A Blog Theme by Start Bootstrap</span>
</div>
</div>
</div>
</div>
</header>
<main role="main" class="pb-3">
#RenderBody()
</main>
<footer class="border-top">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<ul class="list-inline text-center">
<li class="list-inline-item">
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
<div class="small text-center text-muted fst-italic">Copyright © Your Website 2021</div>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>
As far as I understand, the central line for displaying the background image is this one:
<header class="masthead" style="background-image: url('../../wwwroot/assets/home-bg.jpg')">
Where we set the image as our background.
The problem is though, that the site I get, looks like this:
Instead of having the nice image as a background, I just get grey. I would like for the image to be displayed.
How do I get the image shown in the background, just like in the source i have linked?
EDIT:
I now looked in the dev tool, where I found it:
But clicking the image gets me This localhost page can’t be found.
So it might look like the given path is bad. This is a little bit strange to me, since my IDE actually suggested the entire current path to me.
What should I do with my path such that the image can be found?
Is your mentioned path (../../wwwroot/assets/home-bg.jpg) correct? because image won't be rendered if path is incorrect, and the background color becomes grey because of the classname mentioned.
i after trying the path ../../wwwroot/assets/home-bg.jpg I then tried to assume that my application by default would be looking in the wwwroot directory. So I tried the path assets/home-bg.jpg.
My IDE (rider) shows red lines, and complains about it. But it works
I try to add MDL icons to the button in my project, but both span and i elements don't work. Snippet speaks for itself.
<head>
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
</head>
<body>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
<span class="mdi mdi-cart"></span>
<i class="mdi mdi-cart"></i>
Click me
</button>
</body>
Also feel free to test it on jsFiddle: https://jsfiddle.net/dut6g8xn/2/
You can take reference from the below link for more icons.
enter link description here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link
rel="stylesheet"
href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
</head>
<body>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
<i class="large material-icons">add_a_photo</i> Click me
</button>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
<i class="large material-icons">account_balance</i> Click me
</button>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
<i class="large material-icons">accessibility</i> Click me
</button>
</body>
</html>
I don't think material icons work in buttons, I used to use them but I switched over to fontawesome you can search for icons at fontawesome.com. W3Schools also use them a lot they have a tutorial on them here w3schools.com/icons/fontawesome5_intro.asp. FontAwesome should work in buttons because I have used it before to do so.
<html>
<head>
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' crossorigin='anonymous'>
</head>
<body>
<button><i class='fas fa-user-circle'></i></button>
</body>
</html>
Hope that helped.
I tried to make my navigation menu keep responsive on mobile and tablet, but it always break into new line when I tested responsive mobile from browser development tool.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Application Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="navbar navbar-default navbar-static-top" role="navigation">
<ul class="nav navbar-nav">
<li>
<i class='fa fa-floppy-o'></i> New
</li>
<li>
<i class='fa fa-pencil-square-o'></i> Edit
</li>
<li><i class='fa fa-check'></i> Cancel</li>
<li>
<div class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" name="ID" ID="ID">
</div>
</div>
</li>
<li>
<div class="btn-group" style="padding: 9px 0px 0px 0px; margin-left: 15px;">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">More Action</button>
<button type="button" class="btn btn-primary" data-toggle="dropdown">
<i class="fa fa-caret-down"></i>
</button>
<ul class="dropdown-menu">
<li><i class='fa fa-files-o'></i> Copy Record</li>
<li><i class='fa fa-clipboard'></i> Paste Record</li>
<li><i class='fa fa-reply'></i> Reverse Record</li>
<li class="divider"></li>
<li><i class='fa fa-list'></i> List Live Record</li>
<li><i class='fa fa-list'></i> List Un-authorize Record</li>
<li><i class='fa fa-list'></i> List History Record</li>
<li class="divider"></li>
<li><i class='fa fa-print'></i> Export Record</li>
</ul>
</div>
</li>
</ul>
</div>
I would like to keep menu button, input box and dropdown menu keep as one line even on the mobile tablet break point.
How can I archive that, I'm not sure if problem caused from this <meta name="viewport" content="width=device-width, initial-scale=1"> but the only goal I would like to keep it as responsive. Thanks.
I'm pretty new Bootstrap 4, so there might be lots of mistakes here.
I want to create a responsive navbar which collapses my 4 menu buttons but still keeping the search bar to its right. I'm not sure yet how to deal with the display of the buttons after expanding, but my goal for now is to keep the search bar to the right with a correct width.
When the screen gets "small", the nav-toggle button shows up, collapsing the menu buttons. That's cool. But the search bar just grows off the container its in. How do I keep it within the container?
I appreciate any suggestions and improvements :)
nav {
background: brown;
}
nav .container {
white-space: nowrap;
}
<head>
<!-- Meta tags -->
<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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<title>My Site</title>
</head>
<body>
<nav class="navbar sticky-top navbar-inverse navbar-toggleable-sm">
<div class="container" style="width:1400px">
<div class="d-inline-block">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">
<span class="fa fa-home"> Home</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="fa fa-music"> Music</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="fa fa-info"> About</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="fa fa-address-card"> Contact Us</span>
</a>
</li>
</ul>
</div>
<form class="d-inline-block w-100" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search by artist or album name">
<span class="input-group-btn">
<button class="btn btn-secondary" type="submit">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
EDIT: I tweaked around a little and got the following result -> https://jsfiddle.net/Taliesin84/qL35nejo/
My current objective is to prevent the Search bar from wrapping bellow the collapsed buttons when the size gets too small.
I also need to make the Search Bar wider in larger screen sizes, but that's secondary for now. Any new ideas?
From an example contained in Bootstrap 4's github repo:
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
If I set the max-width property for mdl-layout__header-row class, the dropdowns are not working properly, they are misaligned. Remove the max-width property and everything works fine.
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Test Page</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.red-light_blue.min.css" />
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
<header class="mdl-layout__header">
<div class="mdl-layout__header-row" style="max-width: 1200px;width: 100%;margin: auto;">
<a href="/">
<img style="height: 60px;" src="http://www.vwshops.com/dummy-store-1/img/my-shop-logo-1452186152.jpg" />
</a>
<span>Logo</span>
<button id="DROPDOWN_RIGHT" class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">arrow_drop_down</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect language-menu" for="DROPDOWN_RIGHT">
<li class="mdl-menu__item">One</li>
<li class="mdl-menu__item">Two</li>
<li class="mdl-menu__item">Three</li>
</ul>
<button style="margin-left: auto;" id="DROPDOWN_LEFT" class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">arrow_drop_down</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect language-menu" for="DROPDOWN_LEFT">
<li class="mdl-menu__item">One</li>
<li class="mdl-menu__item">Two</li>
<li class="mdl-menu__item">Three</li>
</ul>
</div>
</header>
</body>
</html>
Add position:relative. This stops the positioned elements straying out of line in .mdl-layout__header-row div. When elements are positioned using absolute positioning you need to setup a parent container to position them off and do that by setting a position:relative for them - otherwise it will be to the outermost html element / document they position off.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Test Page</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.red-light_blue.min.css" />
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
<header class="mdl-layout__header">
<div class="mdl-layout__header-row" style="max-width: 1200px;width: 100%;margin: auto; position:relative;">
<a href="/">
<img style="height: 60px;" src="http://www.vwshops.com/dummy-store-1/img/my-shop-logo-1452186152.jpg" />
</a>
<span>Logo</span>
<button id="DROPDOWN_RIGHT" class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">arrow_drop_down</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect language-menu" for="DROPDOWN_RIGHT">
<li class="mdl-menu__item">One</li>
<li class="mdl-menu__item">Two</li>
<li class="mdl-menu__item">Three</li>
</ul>
<button style="margin-left: auto;" id="DROPDOWN_LEFT" class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">arrow_drop_down</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect language-menu" for="DROPDOWN_LEFT">
<li class="mdl-menu__item">One</li>
<li class="mdl-menu__item">Two</li>
<li class="mdl-menu__item">Three</li>
</ul>
</div>
</header>
</body>
</html>