I edited the settings in codepen to use bootstrap for css but it will not display page as it does locally.
Here is what the page looks like locally.
Here is the local code with the paragraph content shortened.
<html>
<head>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/bootstrap.js"></script>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="font-awesome-4.6.1/fonts/fontawesome-webfont.svg">
<style>
body{
margin: 50px;
background-color: black;
}
.container{
border: 3px solid red;
width: 80%;
}
</style>
</head>
<body>
<div class="container panel panel-default">
<div class="row text-center">
<div class="col-xs-12">
<h2>William "Bill" Paxton</h2>
<p><em>May 17, 1955 – February 25, 2017</em></p>
</div>
</div>
<figure class="figure text-center">
<img src="images/download.jpeg" width="30%" alt="image of Bill Paxton">
<figcaption class="figure-caption">An image of Bill Paxton</figcaption>
</figure>
<div class="well">
<section>
<p>...</p>
<h3>Early Life</h3>
<p>...</p>
<h3>Career</h3>
<p>...</p>
<h3>Personal Life</h3>
<p>...</p>
</section>
</div>
<div class="well">
<section>
<h3>Click here check out is filmography on IMDB</h3>
</section>
</div>
</div>
</body>
</html>
Here is what it looks like on codepen.
http://codepen.io/centem/pen/PbNbvR
What am I missing? Thanks in advance.
The default cdn that codepen.io uses for Bootstrap is for the Bootstrap 4 alpha. I've had problems with things not displaying properly as well.
Use this cdn instead:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
Related
I am trying to center pictures and align text to its left edge.
I was thinking the best thing is to have a div with width: fit-content.
However here is something interesting I get and cannot solve.
Here is my code:
HTML code:
<div class="container">
<div class="row">
<div class="column">
<div id="imageContainer">
<img id="imgWidth" src="{% static 'kuzaneli/img/New folder/12.png' %}" alt="..."/>
<div id="imageText"><div> Jacqueline Mon Amour </div><div> 25.00 Eur </div></div>
</div>
</div>
<div class="column">
<div id="imageContainer">
<img id="imgWidth" src="{% static 'kuzaneli/img/New folder/li.png' %}" alt="..."/>
<div id="imageText"><div> Jacqueline Mon Amour </div><div> 25.00 Eur </div></div>
</div>
</div>
</div>
</div>
CSS code:
.row{
display: flex;
flex-wrap: wrap;
width: fit-content;
margin-right: auto;
margin-left: auto;
justify-content: center;
align-items: center;
}
.column{
flex: 50%;
}
#imageContainer{
}
#imageContainer{
width: fit-content !important;
}
#imgWidth{
width: 70%;
height: auto;
}
#imageText{
width: fit-content;
}
I want to get rid of the extra space I am having in the div, where I have image and text. How can I do so?
instead you can make the contents to fill the available space.
in this case let the image to fill all the space available.
#imgWidth{
width: 100%;
height: auto;
}
when you are using bootstrap, it is better to use its classes for layout your document. In the code below I posted the html and css that I was used. In the html tags I used bootstrap classes for making img tag "responsive" and aligning texts and images. the link below from bootstrap documentation could be helpful:
https://getbootstrap.com/docs/4.4/content/images/
I think it is necessary to mention that if you are using lots of images in your code, it is better to make the size of them similar. for example all of them have 168px width and 300px height. because if they have different sizes you probably have some problems in your layout.
in the css code I added a "max-width=168px" according to my image size, you can change it to whatever your image width is.
.imageContainer {
border: 2px solid #258221;
max-width : 168px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>center-img</title>
<!-- links -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm text-center">
<div class="imageContainer" class="text-left">
<img class="img-fluid" src="img/birds.jpg"/>
<div class="text-left">
<div> Jacqueline Mon Amour </div><div> 25.00 Eur </div>
</div>
</div>
</div>
<div class="col-sm text-center">
<div class="imageContainer" class="text-left">
<img class="img-fluid" src="img/view.jpg"/>
<div class="text-left" id="imageText"><div> Jacqueline Mon Amour </div><div> 25.00 Eur </div>
</div>
</div>
</div>
</div>
</div>
<script src="js-files/jquery-3.5.1.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>
you need to add your image sources and bootstrap to make it functional.enter image description here
this is the code
<div class="container">
<div class="row">
<!-- <div class="col-sm text-center"> -->
<div class="imageContainer" class="text-left">
<img class="img-fluid" src="img/birds.jpg"/>
<div class="text-left">
<div> Jacqueline Mon Amour </div><div> 25.00 Eur </div>
</div>
</div>
<!-- </div> -->
<!-- <div class="col-sm text-center"> -->
<div class="imageContainer" class="text-left">
<img class="img-fluid" src="img/view.jpg"/>
<div class="text-left" id="imageText"><div> Jacqueline Mon Amour </div><div> 25.00 Eur </div>
</div>
</div>
<!-- </div> -->
</div>
</div>
I'm trying to nest containers with Twitter Bootstrap to achieve the following in this screen shot. In the PSD the bubble image height is 404px. I need this to look good across all devices, so responsiveness is a must and should scale accordingly without overwhelming the screen.Could somebody please point me in the right direction to nail the CSS down for this?
I have added what I've done so far in Bootstrap to make this happen but it is off and need to get the containers right. I've read that containers in bootstrap shouldn't be nested but "can be".
I have nested containers but can't seem to achieve what is in the screen shots with Bootstrap.
<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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.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.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<title>Page Title</title>
</head>
<body>
<div class=".container-fluid">
<div class="row">
<div class="col-lg-12 top">
TOP TRENDING STORY FOR AUGUST 21, 2019
</div>
</div>
<div class="row">
<div class="col-lg-12 bg-top">
<div class="container">
<div class="row">
<div class="col-md-6">
test 1
</div>
<div class="col-md-6">
Test 2
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
.top{
background-color: #d42222;
color:#FFFFFF;
font-size:23px;
text-align: center;
}
.bg-top{
background:transparent url('../images/background-top.png') no-repeat center center /cover;
}
This needs some styling to get what you want; You can take a look at the left and right margins which are inserted by Bootstrap .container and may want to override them; to get closer to the image you shared, I added some top and bottom margins myself;
Complete working snippet below:
.redBanner {
background: red;
}
.redBanner p {
margin-bottom: 0;
}
.myExternalContainer {
background-image: url("https://www.akberiqbal.com/Jumbo.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: lightblue;
padding-bottom: 5%;
}
.myInternalContainer {
margin-top: 10%;
margin-bottom: 10%;
}
.innerMostContainer {
margin: 10%;
}
.innerMostContainer button {
width: 100%;
}
.container {
background: #fff
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container-fluid myExternalContainer">
<div class="row">
<div class="col-lg-12 top redBanner">
<p class="text-center">TOP TRENDING STORY FOR AUGUST 21, 2019</p>
</div>
</div>
<div class="container myInternalContainer">
<h3 class="text-center"> medicare</h3>
<div class="row">
<div class="innerMostContainer">
<div class="row">
<div class="col-lg-12 bg-top">
<img src='https://www.akberiqbal.com/src/images/LinkedIn4.png' class='img-fluid' />
<div class="row">
<div class="col-6">
Author Name
<br/> Published date
</div>
<div class="col-6">
<button type="button" class='btn btn-primary'>Read time</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 3 years ago.
I want to display three images in a single so i have written css for that to display images in a single row and center of the block but the problem is one of the image is going slight up.If i write css for that to display at same height it is moving all the three divs.Here is the code for that.
.member1 {
width:250px;
height:200px;
display:inline-block;
margin-right:30px;
}
.member1 + .member1{
width:250px;
height:200px;
display:inline-block;
margin-right:30px;
}
.member2{
width:250px;
height:200px;
display:inline-block;
margin-right:30px;
}
.member-details {
width: 100%;
text-align: center;
}
<div class="member-details">
<div class="member2 clearfix ">
<figure> <img src="http://server.com/bar/image01.png" class="member-image" width="222" height="222"> </figure>
<div class="overlay4">
<div class="overlay3">
<h5>Sr. Advocate </h5>
<p>fgh</p>
</div>
</div>
</div>
<div class="member1 ">
<figure> <img src="http://server.com/bar/image03.png" class="member-image" alt="" width="222" height="222"> </figure>
<div class="overlay4">
<div class="overlay3">
<h5>Advocate </h5>
<p>abc</p>
</div>
</div>
</div>
<div class="member1 ">
<figure> <img src="http://server.com/bar/image02.png" class="member-image" alt="" width="222" height="222"> </figure>
<div class="overlay4">
<div class="overlay3">
<h5>Advocate Member</h5>
<p>XYZ</p>
</div>
</div>
</div>
</div>
Okay, Use bootstrap, and you will able to do design, without any problem,
So i write following code, which may help you have a look.
and this is link of jsfiddle:https://jsfiddle.net/dupinderdhiman/7b5dzp9o/9/
<!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/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="container-fluid">
<div class="row">
<div class="col-4"><img src="https://www.gstatic.com/images/branding/product/2x/photos_96dp.png"></div>
<div class="col-4"><img src="https://www.gstatic.com/images/branding/product/2x/photos_96dp.png"></div>
<div class="col-4"><img src="https://www.gstatic.com/images/branding/product/2x/photos_96dp.png"></div>
</div>
</div>
</div>
</body>
</html>
We can't see the images (links are broken) and so the problem. But if you are only trying to display images in a row and centered together, i suggest you to check [CSS Flexbox].(https://www.w3schools.com/css/css3_flexbox.asp)
I am centering an image using bootstrap's center-block class.
<section class="container">
<a href="www.apple.com">
<img class="center-block" src="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?201605191653" width="150px;" height="100px;"/>
</a>
</section>
The only problem is that the links spans the width of the container. How do I restrict the URL to the image?
Working JSFIDDLE
You have to add a container for your image and link to sit inside besides just a section tag. In This way you don't have to modify the container class and you introduce a div to organize and style as you wish. Here is the working code:
<section class="container">
<div style="width:150px;margin-left:auto;margin-right:auto;">
<a class="center-block"href="www.apple.com">
<img class="center-block" src="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?201605191653" width="150px;" height="100px;"/>
</a>
</div>
</section>
Try wrapping another element around your <a> and <img> tags and explicitly centering it via text-align: center; or Bootstrap's text-center class :
<section class="container">
<!-- You can use Bootstrap's text-center class a style="text-align: center;" here -->
<div class='center-block text-center'>
<a href="www.apple.com">
<img src="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?201605191653" width="150px;" height="100px;"/>
</a>
</div>
</section>
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Centered Apple Logo</title>
</head>
<body>
<section class="container">
<div class='center-block text-center'>
<a href="www.apple.com">
<img src="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?201605191653" width="150px;" height="100px;" />
</a>
</div>
</section>
</body>
</html>
The link is an inline element so just use text-center on the container instead..
<section class="container text-center">
<a href="//www.apple.com">
<img class="center-block" src="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?201605191653" width="150px;" height="100px;"/>
</a>
</section>
http://codeply.com/go/bLOmNY1pQZ
If you're referring to the link, as in hovering over any section of the .container will activate the link, rather than just the image, here's the solution:
.container {
text-align: center;
}
.container a {
display: inline-block;
}
This basically gives the link its own dimensions, so it doesn't stretch to fill the parent.
How to center hgroup, I want "welcome to sweet spirals" and "happiness in every bite" centered. The problem occurs when you open the page to full size, it doesnt center please help. heres the http://jsfiddle.net/yotzincastrejon/huco2sek/
<!DOCTYPE html>
<html lang="en">
<head>
<meta chartset="utf-8">
<title>Sweet Spirals</title>
<link href="sweetstyle.css" rel="stylesheet">
</head>
<body>
<header class="header">
<div class="row">
Sweet Spirals
<div class="header-right">
<nav class="header-nav">
Home
Shop
About Us
FAQ
Search
</nav>
<form method="get" accept-charset="UTF-8" action="/search" id="search" class="header-search">
<input type="search" name="q" placeholder="Search terms…">
</form>
</div>
</div>
</header>
<div class="content">
<div class="row">
<section class="main">
<hgroup class="heading home-heading" id="heading">
<h1 class="major" id="major">Welcome to Sweet Spirals</h1>
<h2 class="minor" id="minor">Happiness In Every Bite</h2>
</hgroup>
<aside class="aside">
<div class="subscribe">
Like
</div>
<figure class="crackers2">
<img src="https://farm6.staticflickr.com/5655/22900680453_242b39b6d6_k.jpg" alt="missing" height="100%" width="100%" />
<figcaption>Peppermint Thins</figcaption>
</figure>
<div id="pepthinsbutton">
<script src="https://gumroad.com/js/gumroad.js"></script>
<a class="gumroad-button" href="https://gum.co/Peppermintthins" target="_blank">Buy my product</a>
</div>
<figure class="crackers1">
<img src="https://farm1.staticflickr.com/773/22899649574_e49e0b6316_k.jpg" alt="missing" height="100%" width="100%" />
<figcaption>Chocolate Licorice</figcaption>
</figure>
<div id="licoricebutton">
<script src="https://gumroad.com/js/gumroad.js"></script>
<a class="gumroad-button" href="https://gum.co/Tlut" target="_blank">Buy my product</a>
</div>
</body>
</html>
look at the fiddle for the css
its centered in the demo i forked from you and linked below; a few things:
a) hgroup is deprecated, you shouldn't be using it because it'll surely screw up the document outline that a user requires for their at software to run correctly.
b) section.row was set to a wonky width, around 500px...so i changed that to 100% with an important to override whatever was conflicting with it:
.main{width:100% !important}
http://jsfiddle.net/jalbertbowdenii/bz82g8fe/7/
Look for this part in your css:
.main {
float: left; /* Remove this line */
width: 36.25em; /* Remove this line */
margin: 2em 0 2.5em
}