Guys I am stuck in making a top info bar where I can put all the necessary details like phone number, mail id and some social icons, and I am using Bootstrap 4.1.3 and Font-awesome 5.5 but whenever I try to put a hyperlink after the icon it comes down to the next line. How to properly align it in one line. I have tried a lots of methods but got no results so far.
Please check the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Anything</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="top-info d-sm-none d-md-block">
<div class="col-md-8">
<ul class="list-inline">
<li class="list-inline-item"><i class="fas fa-sign-in-alt"></i><span>Login</span></li>
<li class="list-inline-item"><i class="fas fa-sign-in-alt"></i><span>Login</span></li>
<li class="list-inline-item"><i class="fas fa-sign-in-alt"></i><span>Login</span></li>
</ul>
</div>
<div class="col-md-4">
<i class="fas fa-sign-in-alt"></i><span>Login</span>
</div>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</html>
I changed some things in your code, i added the class col-md-8 in the faulty div and so the code is this one <div class="col-md-8">. You can also check the result here https://codepen.io/ekk0/pen/xyOoBB?editors=1000. My guess is that because originally you used col-md-4 it would be a bit buggy. Hope it helps!
Include i tag inside span tag like this
<span> <i class="fas fa-sign-in-alt">Login</i></span>
https://jsfiddle.net/isubhamb/jztosgbd/13/
Related
I started to work on Bootstrap and created a card according to the documentation. The card seems to be centered vertically on the page, but not horizontally (it is more in the first part of the page). I would like to have the card (using only Bootstrap if possible) in the center of the page completely (so horizontally too).
I tried using .mx-auto for .card and other various solutions I found online that worked for everybody else. I am out of solutions at the moment and I don't know how to solve it.
Can you please take a look at my code and provide some feedback?
<!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>Bootstrap Cards</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<style>
body {
background-color: rgb(184, 27, 184);
}
</style>
<body class="d-flex">
<div class="container my-5"> <!--Bootstrap always starts with a container; my = margin on the y axis, top & bottom-->
<div class="row align-items-center justify-content-center w-100">
<div class="col-lg-3 col-7">
<div class="card">
<img src="https://picsum.photos/id/237/300/200" class="card-img-top" alt="Black puppy">
<div class="card-body">
<h5 class="card-title">Lola</h5>
<p class="card-text">Is she the next member of your family? She is eager to meet you.</p>
</div>
<ul class="list-group list-group-flash">
<li class="list-group-item">Love ball of only 7 kg</li>
<li class="list-group-item">Shy at first, but very friendly after</li>
<li class="list-group-item">Enjoys walks by the river</li>
</ul>
<div class="card-body">
<div class="d-grid gap-2 col-6 mx-auto">
<button class="btn btn-primary" type="button">Adopt today</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
Thank you!
I've been trying : text-align:center, align-items:center..
In this code, I use BootStrap, but I also tried to over-code it via css- nothing helps.
I'd really thank you for help.
<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>HTML Final Task</title>
<!-- CSS only -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
/>
</head>
<body>
<div class="nav-container-wrap">
<div class="nav container py-3 justify-content-between text-center">
<div class="left-box d-flex gap-5">
<div class="nav-item"><h3>Adantrip</h3></div>
<div class="nav-item"><p>Hotels</p></div>
<div class="nav-item"><p>Rooms</p></div>
<div class="nav-item"><p>Flights</p></div>
<div class="nav-item"><p>Cars</p></div>
<div class="nav-item"><p>Experiences</p></div>
</div>
<div class="right-box d-flex gap-5">
<div class="nav-item">USD</div>
<div class="nav-item"><i class="fa-solid fa-flag-usa"></i></div>
<div class="nav-item">
<i class="fa-solid fa-user"></i> My Account
</div>
</div>
</div>
</div>
</body>
</html>
The use of the HTML <p> and <h1> tags are throwing off the Bootstrap layout because of their default attributes. Rather than fight with them, use the classes that Bootstrap provides. align-items-center on your flex containers and the responsive h1 class on the item you want for your header.
<!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>HTML Final Task</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
</head>
<body>
<div class="nav-container-wrap">
<div class="nav container py-3 justify-content-between align-items-center text-center ">
<div class="left-box d-flex align-items-center text-center gap-5">
<div class="nav-item h1">Adantrip</div>
<div class="nav-item">Hotels</div>
<div class="nav-item">Rooms</div>
<div class="nav-item">Flights</div>
<div class="nav-item">Cars</div>
<div class="nav-item">Experiences</div>
</div>
<div class="right-box d-flex gap-5">
<div class="nav-item">USD</div>
<div class="nav-item"><i class="fa-solid fa-flag-usa"></i></div>
<div class="nav-item">
<i class="fa-solid fa-user"></i> My Account
</div>
</div>
</div>
</div>
</body>
</html>
There is nothing wrong with your code. Some Bootstrap default styles, same as margin-bottom in some tags, affect your code.
Let's make it simple and see the difference then correct it.
In this sample, I'm gonna use pure CSS.
Remove Bootstrap from your code temporarily and then add these styles:
.nav{display:flex;justify-content:space-between}
.left-box,
.right-box{display:flex;align-items:center;gap: 0.5rem;}
I have multiple webpages that have the same header:
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.16/af-2.2.2/b-
1.5.1/b-colvis-1.5.1/b-flash-1.5.1/b-html5-1.5.1/b-print-1.5.1/cr-1.4.1/fc-
3.2.4/fh-3.1.3/kt-2.3.2/r-2.2.1/rg-1.0.2/rr-1.2.3/sc-1.4.4/sl-
1.2.5/datatables.min.css"/>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js">
</script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js">
</script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-
2.5.0/dt-1.10.16/af-2.2.2/b-1.5.1/b-colvis-1.5.1/b-flash-1.5.1/b-html5-
1.5.1/b-print-1.5.1/cr-1.4.1/fc-3.2.4/fh-3.1.3/kt-2.3.2/r-2.2.1/rg-1.0.2/rr-
1.2.3/sc-1.4.4/sl-1.2.5/datatables.min.js"></script>
Since these references change with time, I'd like to embed this code in 1 html page and then reference that page in the multiple webpages. That seems much easier than going in to 20 html files and updating manually, as needed.
I've scoured around and can't find what is probably an obvious answer. Is there a way to do this with an "include" statement?
Any help is much appreciated!!!!
First question, what framework/language you're using to develop your website?
What you're trying to do is actually creating web design template.
For example in html with php,
<html lang="en">
<!-- Top Bar -->
<?php require 'TopBar.php';?>
<!-- Main Navigation + LOGO Area -->
<?php require 'MainNavigation.php';?>
<!-- Banner -->
<header class="flat-header">
<!-- Banner Content-->
<div class="header-content">
<div class="header-content-inner">
<h1 class="homeHeading animated slideInDown">Singapore Dreams - Our Business.<span>
</span></h1>
<!--<h1 class="homeHeading animated slideInDown">Financial Consulting isn’t a thing we do. <span>-->
<!--It’s the thing that runs our business.</span></h1>-->
<div class="konnect-button-1 animated bounceIn">Read More</div>
</div>
</div>
</header>
<!--Top Call to Action-->
<?php require 'indexCallToAction.php';?>
<body>
//normal html file here
</body>
</html>
TopBar.php
<?php
/**
* Created by PhpStorm.
* User: Marcia
* Date: 23/5/2017
* Time: 10:03 PM
*/
include 'var.php';
echo'
<head>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Marcia Ong">
<meta name="keywords" content="">
<!-- Favocon -->
<link href="img/sg-alliance-logo.png" rel="shortcut icon" type="image/x-icon"/>
<!-- Title -->
<title>SG </title>
<!-- Bootstrap Core CSS -->
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom icon Fonts -->
<link href="assets/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Animated CSS -->
<link href="css/animate.css" media="all" rel="stylesheet" type="text/css" />
<!-- Main CSS -->
<link href="css/default.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<!-- Body -->
<body>
<!-- Pre Loader -->
<div class="loading">
<div class="loader"></div>
</div>
<div class="konnect-info">
<div class="container">
<div class="row">
<!-- Top bar Left -->
<div class="col-md-6 col-sm-8 hidden-xs">
<ul>
<li><i class="fa fa-paper-plane" aria-hidden="true"></i>';echo $EnquiryEmail;echo ' </li>
<li class="li-last"> <i class="fa fa-volume-control-phone" aria-hidden="true"></i>'; echo"$contactNum"; echo '</li>
</ul>
</div>
<!-- Top bar Right -->
<div class="col-md-6 col-sm-4">
<ul class="konnect-float-right">
<li class="li-last">
<a target="_blank" href="https://twitter.com/Sg_Alliance1"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a target="_blank" href="https://www.facebook.com/SG-Alliance-133770687187613/"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a target="_blank" href="https://www.instagram.com/sg.alliance/?hl=en"> <i class="fa fa-instagram"></i> </a></li>
</ul>
</div>
</div>
</div>
</div>
' //end of echo
?>
<!--<a target="_blank" href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a>-->
<!--<a target="_blank" href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>-->
I want to create a wordpress page which I can put the html code to do the following please
1) Google custom search box (which i can get the GCS code from google) but it has to be OVER an image. not above or below the image :). image will be hosted on my site media library
2) round icons buttons below the search box similar to the one i have attached which bounces when mouse over (images of these icons can be changed and destination urls assigned by me)
the attached example is the yahoo new tab extension for firefox
any help is appreciated.
i have attached the sample page image and the view source code of that page to help understand my context. the difference is that the search will be by google instead of yahoo
thank you friends!
view code below as its not letting me attached doc
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link rel="stylesheet" type="text/css" href="newtab.css">
<link rel="stylesheet" type="text/css" href="brand.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>
<body id="bg" class="flexContainer bgImage">
<div id="bookmarksAbsolute">
<div id="bookmarksFlex" class="uiBG"></div>
</div>
<div id="searchTrendingNowContainer"></div>
<div id="mainContainer">
<div id="uiBlur"></div>
<div id="uiContainer">
<form id="submitSearchNew">
<img id="magnifierNew" src="icons/mag3.svg">
<input type="text" id="searchBoxNew" autocomplete="off" name="p" tabindex="1">
</form>
<div id="searchSuggestContainerNew" class="searchSuggestContainerNew displayNone"></div>
</div>
<div id="urlHidden"><span id="urlContent"></span></div>
</div>
<div id="darkOverlay"></div>
<div id="pageFooter">
<div id="ownerContainer">
<a id="ownerName" class="credit"></a>
<a id="onFlickr" class="credit flickr"></a>
</div>
<div class="newTopSitesContainer" id="topSites"></div>
<div id="urlInfo"></div>
</div>
<div class="dropup" id="dropupMenu">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
</button>
<ul class="dropdown-menu options-list">
<li><a id="toggleViewText" class="toggleText unselectable"> </a></li>
<li class="divider"></li>
<li id="tnDiv" class="displayNone"><a id="toggleTN" class="unselectable"> </a></li>
<li id="tnDivider" class="divider displayNone"></li>
<li><a id="editButton" class="unselectable"> </a></li>
<li class="divider"></li>
<li><a id="feedBack" class="feedBackLink unselectable"> </a></li>
</ul>
</div>
</body>
<script src='newtab.js'></script>
</html>
I do not understand you, if you need show up input tag and image in other image?
If is it yes, use z-index CSS for image for example:
<div class="base"> <!-- z-index = 1 -->
<input type="search" class="search" /> <!-- z-index = 2 -->
<div class="buttons_footer"> <!-- z-index = 2 -->
<button></button>
<button></button>
<button></button>
.....
</div>
</div>
I hope to help
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have 2 different html files (located in the same directory). One file works perfectly for my menu. http://gyazo.com/3ee7c319ceb57bb1e91efb16cc93c28d
However, when I COPY AND PASTE the exact same code into the other html file, the menu looks like this: http://gyazo.com/ac9d43e9dcfada048dc206e735a6a5d0
Here is the code for the first (working) file:
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Boxify: Free HTML5/CSS3 Template by Peter Finlan</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Nunito:400,300,700' rel='stylesheet' type='text/css'>
<link href="css/styles2.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row nav-wrapper">
<div class="col-md-6 col-sm-6 col-xs-6 text-right navicon">
<p></p><a id="trigger-overlay" class="nav_slide_button nav-toggle" href="#"><span></span></a>
</div>
</div>
<div class="overlay overlay-boxify">
<nav>
<ul>
<li><i class="fa fa-heart"></i>About
</li>
<li><i class="fa fa-flash"></i>Features
</li>
</ul>
<ul>
<li><i class="fa fa-desktop"></i>Screenshots
</li>
<li><i class="fa fa-download"></i>Download
</li>
</ul>
</nav>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/min/scripts-min.js"></script>
</body>
</html>
Here is the code for the other file (that does not work):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>{$title}</title>
<link rel="shortcut icon" href="{$url}/favicon.ico" />
<link href="{$url}/{$theme_path}/{$theme_name}/style.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<script type="text/javascript" src="{$url}/{$theme_url}/js/jquery.js"></script>
<script type="text/javascript" src="{$url}/{$theme_url}/js/jquery.timeago.js"></script>
<script type="text/javascript" src="{$url}/{$theme_url}/js/functions.js"></script>
<link rel="shortcut icon" href="../favicon.ico">
**<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Nunito:400,300,700' rel='stylesheet' type='text/css'>
<link href="css/styles2.css" rel="stylesheet">**
</head>
<body>
<div class="topbar">
<div class="header">
<a href="{$url}">
<div class="logo"></div>
<div class="logo-small"></div>
</a>
<div class="search-input">
<input type="text" id="search" placeholder="{$lng->search_for_people}">
</div>
<div class="search-container"></div>
<div class="container">
**<div class="row nav-wrapper">
<div class="col-md-6 col-sm-6 col-xs-6 text-right navicon">
<p></p><a id="trigger-overlay" class="nav_slide_button nav-toggle" href="#"><span></span></a>
</div>
</div>
<div class="overlay overlay-boxify">
<nav>
<ul>
<li><i class="fa fa-heart"></i>About
</li>
<li><i class="fa fa-flash"></i>Features
</li>
</ul>
<ul>
<li><i class="fa fa-desktop"></i>Screenshots
</li>
<li><i class="fa fa-download"></i>Download
</li>
</ul>
</nav>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/min/scripts-min.js"></script>**
{$menu}
<div class="topbar_margin"></div>
{$content}
<div class="row-body">
<div class="footer">
<div class="footer-container">
<div class="footer-links">
{$lng->terms_of_use} -
{$lng->privacy_policy} -
{$lng->disclaimer} -
{$lng->developers} -
{$lng->contact} -
{$lng->about} -
{$lng->title_admin}
</div>
<div class="footer-languages">
{$lng->language}: {$language}
</div>
<div class="footer-languages">
Copyright © {$year} {$footer}. {$lng->all_rights_reserved}. {$powered_by}
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/min/scripts-min.js"></script>
</body>
</html>
have you tried using <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> in the files instead of <link href="css/bootstrap.min.css" rel="stylesheet">.
Sometimes the path is not detected correctly that's why it is recommended to use the bootstrapcdn for linking the css file.
Figured it out, instead of:
<script src="js/demo1.js"></script>
I used:
<script src="http://goldenhoney.zz.vc/themes/dolphin/html/js/demo1.js"></script>
IM SO HAPPY. BUT CONFUSED AS TO WHY MY PREVIOUS CODE DID NOT WORK.