I think I looked everywhere and tried everything.
I want to make a footer for a website with 3 columns - in each one there's h4 header and image (png icon). Instead of getting 3 columns I got 1 column with everything stacked under each other.
HTML code:
<div class="footer">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h4>Instagram</h4>
<a href="#" target="_blank"/><img src="img/instagram.png"/></a>
</div>
<div class="col-sm-4">
<h4>Facebook</h4>
<a href="#" target="_blank"/><img src="img/facebook.png"/></a>
</div>
<div class="col-sm-4">
<h4>LinkedIn</h4>
<a href="#" target="_blank"/><img src="img/linkedin.png"/></a>
</div>
</div>
</div>
</div>
Any reason why? Thanks in advance.
The reason why you are not getting the results you expect from bootstrap is likely due to you missing a resource.
Please make sure that you have the following included in the section of your document.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
CodePen example: https://codepen.io/CapySloth/pen/gRGNxa
Replace all entities of <a href="#" target="_blank"/> with <a href="#" target="_blank"> and will be happy!
<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="footer">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h4>Instagram</h4>
<img src="img/instagram.png"/>
</div>
<div class="col-sm-4">
<h4>Facebook</h4>
<img src="img/facebook.png"/>
</div>
<div class="col-sm-4">
<h4>LinkedIn</h4>
<img src="img/linkedin.png"/>
</div>
</div>
</div>
</div>
1st:
<a href="#" target="_blank"/><img src="img/instagram.png"/></a>
Should be
<img src="img/instagram.png">
For img there is not need to close it with / REF: Do I need a "/" at the end of an <img> or <br> tag, etc.?
2nd: use col-xs-4 if you want them to always be 3 item in one row. (all screen size will fall into the xs if nothing else is defined (lg/md/sm etc))
3rd: could be your reference not setup properly. try those:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-xs-4">
<h4>Instagram</h4>
<img src="img/instagram.png">
</div>
<div class="col-xs-4">
<h4>Facebook</h4>
<img src="img/facebook.png">
</div>
<div class="col-xs-4">
<h4>LinkedIn</h4>
<img src="img/linkedin.png">
</div>
</div>
</div>
</div>
Related
For example:
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="image">
<img src="https://picsum.photos/1200/1200" alt="" class="img-fluid">
</div>
</div>
<div class="col-lg-4">
<div class="text">
<h1>Text Title</h1>
</div>
</div>
</div>
</div>
The sandbox code:
https://codesandbox.io/s/interesting-euler-sh22vn?file=/index.html
Photo what I want:
https://ibb.co/MnLQf6n
My problem is when I add fix height, the text is moving when I change screen view.
I need to vertical align the text to image center point on desktop screen.
just add align-items-center to row and it will worce the layout to be vertically center learns about flex from here and bootstrap flex properties from here
<!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://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row align-items-center">
<div class="col-8">
<div class="image">
<img
src="https://picsum.photos/1200/1200"
alt=""
class="img-fluid"
/>
</div>
</div>
<div class="col-4">
<div class="text">
<h1>Text Title</h1>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
</body>
</html>
This will solve your problem.
<div class="row align-items-center">
I have provided the code snippet
here i want to display the marque below logo but it is covering the whole header.
Visit here
use display: inline-block and width: 100%; on alert-info div it will work fine that you want.
UPDATED
You missed at least a container-fluid style declaration. See your snippet updated, here https://www.w3schools.com/code/tryit.asp?filename=FEL4BAHI14YZ.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body id="bootstrap-overrides">
<header class="container-fluid">
<div class="header">
<img width="300" class="img-responsive" style="height: 120px; float:left" src="images/logo.jpg" />
<button class="btn btn-primary pull-right">BUTTON</button>
</div>
</header>
<div class="container-fluid">
<form id="frm" runat="server" class="form-horizontal">
<div class="alert alert-info" role="alert" style="color: red">
<marquee>Welcome To IDB WEB APPLICATION. All (*) Fields Are Mandatory</marquee>
</div>
</form>
</div>
</body>
</html>
Hope this helps.
Updated- Just wrap your header and alert-form individually inside a container-fluid with a row. Thats the best solution using bootstrap.
below is the wokring code. For logo I am using dummy image
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header>
<div class="container-fluid">
<div class="row">
<div class="header">
<img width="300" class="img-responsive" style="height:120px; float:left;" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" />
<button class="btn btn-primary pull-right">BUTTON</button>
<!--- Remove this inline style style="height: 120px; float:left" -->
</div>
</div>
</div>
</header>
<div class="container-fluid">
<div class="row">
<form id="frm" runat="server">
<div class="alert-info" role="alert" style="color: red">
<marquee>Welcome To IDB WEB APPLICATION. All (*) Fields Are Mandatory</marquee>
</div>
</form>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,100' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6"><img src="http://placehold.it/150x150" class="img-responsive title-logo"></div>
<div class="col-md-6 text-right text-uppercase title-thin">
<h1>Trevor Cleworth</h1>
<h3>Junior Web Developer</h3>
</div>
</div>
<div class="row">
<hr>
</div>
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/1400x350" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3>Featured Work</h3>
</div>
</div>
<div class="row text-center">
<div class="col-md-3">
<img src="http://placehold.it/220x220" class="img-responsive">
<h3>Appify</h3>
<p>Click to see</p>
</div>
<div class="col-md-3">
<img src="http://placehold.it/220x220" class="img-responsive">
<h3>Appify</h3>
<p>Click to see</p>
</div>
<div class="col-md-3">
<img src="http://placehold.it/220x220" class="img-responsive">
<h3>Appify</h3>
<p>Click to see</p>
</div>
<div class="col-md-3">
<img src="http://placehold.it/220x220" class="img-responsive">
<h3>Appify</h3>
<p>Click to see</p>
</div>
</div>
</div>
This is the code that is connected with my CSS file, the font family will work but the font weight will not, does anyone see why this is? I will link my CSS below. I have been trying to figure out the problem for about thirty minutes but I haven't been able to find anything. If somebody could please show me what the problem is I would appreciate it a ton!
body {
font-family: 'Lato', sans-serif;
font-weight: 300;
color: #333333;
}
add #import url(http://fonts.googleapis.com/css?family=Lato); to your css sheet.
then tell me how it works, I don't have Lato font in my Windows fonts on my laptop
I'm using the page-header class to centre the main content of my page. This creates some empty column space on either sides of page-header, and I'd like to utilize that space (possibly to add AdSense banners).
Here is what I tried:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Title</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
Click Me!
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-2 pull-left">
<span>Left Ding</span>
</div>
<div class="col-md-8">
<div class="page-header">
<h2>I'm a big centered page header!</h2>
</div>
</div>
<div class="col-md-2 pull-right">
<span>Right Dong</span>
</div>
</div>
</div>
</body>
</html>
I do not see Left Ding or Right Dong anywhere on the page. Here is the rendered html: https://jsfiddle.net/bgmjs3qf/
What is the correct way to utilize the left and right column spaces?
You have to add padding to the top of your page since you have a fixed navbar.
See example and Docs.
body {
padding-top: 70px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header"> Click Me!
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-2 pull-left"> <span>Left Ding</span>
</div>
<div class="col-md-8">
<div class="page-header">
<h2>I'm a big centered page header!</h2>
</div>
</div>
<div class="col-md-2 pull-right"> <span>Right Dong</span>
</div>
</div>
</div>
I was trying to implement bootstrap in my project..But the col-md-3 is taking the full width of a container
The following is the code:-
<!DOCTYPE html>
<html>
<head>
<title>Home page </title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4-offset-4">
<div class="avatar">
<h1>Special feature</h1>
</div>
</div>
</div>
</div>
<div class="containe-fluid">
<div class="row" >
<div class="col-md-3" style="width:25%;">
<div class="box">
<img src="http://cdn.shopify.com/s/files/1/0695/9547/products/Dell_Latitude_E4300_Laptop_1024x1024.jpeg?v=1421189962" width="300" height="300">
<p>
<a href="">Dell Latitude E4300 Refurbished Laptop<br> $169
</p>
<button> Buy</button>
</div>
</div>
<div class="col-md-3" style="width:25%;">
<div class="box">
<img src="http://cdn.shopify.com/s/files/1/0695/9547/products/HP_255_Ubuntu_Laptop_1024x1024.jpeg?v=1421190061" width="300" height="300">
<p>
HP 255 UBUNTU<br>$229.00
</p>
<button> Buy</button>
</div>
</div>
<div class="col-md-3" style="width:25%;">
<div class="box">
<img src="http://cdn.shopify.com/s/files/1/0695/9547/products/621591-645880-800_large.jpeg?v=1421190099" width="300" height="300">
<p>
Lenovo Thinkpad B50<br>$229.00
</p>
<button>Buy</button>
</div>
</div>
<div class="col-md-3" style="width:25%;">
<div class="box">
<img src="http://cdn.shopify.com/s/files/1/0695/9547/products/618381-636132-800_large.jpeg?v=1421190057" width="300" height="300">
<p>
HP 255 Quad Core<br> $269.00
</p>
</div>
</div>
</div>
</div>
</body>
</html>
I am unable to put the diffent products in one line and it is coming one below the other
Please help me am a newbie and am caught up.
Avoid the use of inline width: 25% for the col-x-* classes. Also for supporting mobile width, Add col-xs-6.
col-xs- has no minimum screen size, so it makes sense to always include it. This is further explained in this Boostrap Grid Sizes post. To save you some reading, the main bits of interest are:
.col-xs-: Phones (<768px)
.col-sm-: Tablets (≥768px)
.col-md-: Desktops (≥992px)
.col-lg-: Desktops (≥1200px)
To add offset, use col-md-offset-4
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-md-6 col-md-offset-4">
<div class="avatar">
<h1>Special feature</h1>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-md-3">
<div class="box">
<img src="http://cdn.shopify.com/s/files/1/0695/9547/products/Dell_Latitude_E4300_Laptop_1024x1024.jpeg?v=1421189962" width="300" height="300">
<p>
<a href="">Dell Latitude E4300 Refurbished Laptop<br> $169
</p>
<button> Buy</button>
</div>
</div>
<div class="col-xs-6 col-md-3">
<div class="box">
<img src="http://cdn.shopify.com/s/files/1/0695/9547/products/HP_255_Ubuntu_Laptop_1024x1024.jpeg?v=1421190061" width="300" height="300">
<p>
HP 255 UBUNTU
<br>$229.00
</p>
<button>Buy</button>
</div>
</div>
<div class="col-xs-6 col-md-3">
<div class="box">
<img src="http://cdn.shopify.com/s/files/1/0695/9547/products/621591-645880-800_large.jpeg?v=1421190099" width="300" height="300">
<p>
Lenovo Thinkpad B50
<br>$229.00
</p>
<button>Buy</button>
</div>
</div>
<div class="col-xs-6 col-md-3">
<div class="box">
<img src="http://cdn.shopify.com/s/files/1/0695/9547/products/618381-636132-800_large.jpeg?v=1421190057" width="300" height="300">
<p>
HP 255 Quad Core
<br>$269.00
</p>
</div>
</div>
</div>
</div>
Plz add Bootstrap link to the page in the head section
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Also, remove width=25% from the columns
also, change
<div class="containe-fluid">
to
<div class="container-fluid">
Stop using width:25% . The cause is when you use inline style it gets top priority on loading in html view page . And thus the whole bootstrap and inline style gets messed up .
Hope this will help your project get finished faster .
Please make sure that you load bootstrap in your html file.
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<title>Home page </title>
</head>
I have tested your code with bootstrap css and it's working like it should.