How can I align the picture with the text?
Many thanks in advance
<div class="w3-container" style="padding:128px 16px" id="about">
<h1 class="w3-center w3-knallpink"><b>#about</b></h1>
<div class="w3-row">
<div class="w3-container w3-center w3-third">
<img src="/bilder/Spongebob.png" alt="Bikini Bottom" style="width:100%;max-width:360px; margin-left: auto;
margin-right: auto; border-radius: 3px;">
</div>
<div class="w3-container w3-twothird">
<p>TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT<p>
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT<p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT<p>
</p>
</div></div> </div>
To achieve expected result, add margin-top:15px , as the paragraph text has margin-top:15px
codepen for reference - https://codepen.io/nagasai/pen/dqLNNo
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-container" style="padding:128px 16px" id="about">
<h1 class="w3-center w3-knallpink"><b>#about</b></h1>
<div class="w3-row">
<div class="w3-container w3-center w3-third">
<img src="https://tse2.mm.bing.net/th?id=OIP.MhyD6cHgUgRSnYMrQ8TomQHaGI&pid=15.1&P=0&w=183&h=153" alt="Bikini Bottom" style="width:100%;max-width:360px; margin-left: auto;
margin-right: auto; border-radius: 3px;margin-top:15px">
</div>
<div class="w3-container w3-twothird">
<p>TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT<p>
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT<p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT<p>
</p>
</div></div> </div>
Related
Need to align four different height (beetween 160-180px) svg images with text under them.
Images should be placed in line at sight and I don't know how to make strict align short text under them in one line like on screenshot.
Thanks!
UPD: Sorry for inconvinient information, thought that this question is quite typical for those who know css good.
Here is my html and css. Also I'm using bootstrap rows.
<div class="did-you-know">
<div class="row items">
<div class="col-lg-3 col-xs-6">
<div class="icon">
<img src="/img/mswa/inline-wa.svg"/>
</div>
<div class="title text-poppins">
<p>We’re from WA</p>
<p>{like you!}</p>
</div>
</div>
<div class="col-lg-3 col-xs-6">
<div class="icon">
<img src="/img/mswa/inline-packaging.svg"/>
</div>
<div class="title text-poppins">
<p>We use minimal packaging</p>
<p>{great for the planet}</p></div>
</div>
<div class="col-lg-3 col-xs-6">
<div class="icon">
<img src="/img/mswa/inline-quality.svg"/>
</div>
<div class="title text-poppins">
<p>We only choose quality</p>
<p>{better for your health}</p></div>
</div>
<div class="col-lg-3 col-xs-6">
<div class="icon">
<img src="/img/mswa/inline-community.svg"/>
</div>
<div class="title text-poppins">
<p>We love giving back</p>
<p>{great for our community}</p></div>
</div>
</div>
</div>
.did-you-know {
padding: 20px;
text-align: center;
}
.did-you-know .items .icon {
padding: 50px;
}
.did-you-know .items .title {
font-size: 20px;
}
here is a solution:
Replace images by your images.
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 25%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<img src="https://freesvg.org/img/cartoonsun.png" alt="Snow" style="width:100%">
<p style='text-align: center;'>test1</p>
</div>
<div class="column">
<img src="https://freesvg.org/img/cartoonsun.png" alt="Forest" style="width:100%">
<p style='text-align: center;'>test2</p>
</div>
<div class="column">
<img src="https://freesvg.org/img/cartoonsun.png" alt="Mountains" style="width:100%">
<p style='text-align: center;'>test3</p>
</div>
<div class="column">
<img src="https://freesvg.org/img/cartoonsun.png" alt="Mountains" style="width:100%">
<p style='text-align: center;'>test3</p>
</div>
</div>
</body>
</html>
I want to have a section that's three fifths columns wide, and that it will be centered.
At first when I only had "section", the content was horizontally centered, but it took the entire width of the screen. So I added a parent div of columns with a column of is-three-fifths. Now I have a section that is three-fifths wide, but not centered, so what is the best approach to do that?
.section{
border: 1px solid;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />
<div class="columns">
<div class="column is-three-fifths">
<section class="section">
<div class="container">
<figure class="image is-128x128">
<img src="https://bulma.io/images/placeholders/256x256.png">
</figure>
</div>
</section>
</div>
</div>
Add margin: auto; on figure tag
.section{
border: 1px solid;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />
<div class="columns">
<div class="column is-three-fifths">
<section class="section">
<div class="container">
<figure class="image is-128x128" style=" margin: auto;">
<img src="https://bulma.io/images/placeholders/256x256.png">
</figure>
</div>
</section>
</div>
</div>
You can add is-centered class to div.columns. https://bulma.io/documentation/columns/options/#centering-columns
.section{
border: 1px solid;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />
<div class="columns is-centered">
<div class="column is-three-fifths">
<section class="section">
<div class="container">
<figure class="image is-128x128">
<img src="https://bulma.io/images/placeholders/256x256.png">
</figure>
</div>
</section>
</div>
</div>
Here is the code:
<div class="row" >
<div id="box1" class="col-lg-4 box"style="">
<img src="images/1.png" style="" class="num-img">
box 1 content
</div>
<div id="box2" class="col-lg-4 box" style="">
<img src="images/2.png" style="" class="num-img">
box 2 content
</div>
<div id="box3" class="col-lg-4 box" style="">
<img src="images/3.png" style="" class="num-img">
box 3 content
</div>
</div>
CSS of the box:
.box
{
height: 130px;
width: 200px;
background-color: #000;
color: #FFF;
padding: 20px;
font-size: 30px;
text-align: center;
}
This is how I want it to look like:
This is how it looks right now :
And this is how it looks when I remove the box class and write:
<div id="box1" class="col-lg-4 "style="">
How do I fix this??
Update (after adding margin:0 auto):
You are possibly overriding the width of the col-lg-4 divs, depending on when your box css is loaded. Try
<div id="box1" class="col-lg-4">
<div class="box">
<img src="images/1.png" style="" class="num-img">
box 1 content
</div>
</div>
This will not force the col-lg-4 div to have a set px width, but instead a % with the inner div having a set width.
If you want to center the blocks within the bootstrap cols, add margin: 0 auto; to your box css.
.box
{
height: 130px;
width: 200px;
background-color: #000;
color: #FFF;
padding: 20px;
font-size: 30px;
text-align: center;
margin: 0 auto;
}
example using your fiddle
Add col-offset-2 with all col classes and you will see change. change col-offset-2 as per requirement.
Or you can wrap the box in a column like this..
<div class="row" >
<div id="box1" class="col-lg-4"style="">
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
box 1 content
</div>
</div>
<div id="box2" class="col-lg-4" style="">
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
box 2 content
</div>
</div>
<div id="box3" class="col-lg-4" style="">
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
box 3 content
</div>
</div>
</div>
Please check this:
<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="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>
<style>
.box
{
height: 130px;
width: 200px;
background-color: #000;
color: #FFF;
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="row" >
<div id="box1" class="col-lg-4 text-center">
<div class="box" style = "display:inline-block">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
box 1 content
</div>
</div>
<div id="box2" class="col-lg-4 text-center" style="">
<div class="box" style = "display:inline-block">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
box 2 content
</div>
</div>
<div id="box3" class="col-lg-4 text-center" style="">
<div class="box" style = "display:inline-block">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
box 3 content
</div>
</div>
</div>
</body>
</html>
CodePen:http://codepen.io/anon/pen/ZbOKKw
I know this question has been asked a lot but each one seems to be a bit unique and I have tried at least 7 different versions here on StackOverflow and none have worked.
It should be a simple fix but I can't center the div contents. I need all the rows centered to the gird and centered when scaled all the way down to the mobile view.
Here is my code example:
http://codepen.io/anon/pen/aOBJEv
Here is the html:
<div class="row-fluid">
<div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6"><img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/image-333x333.jpg" class="img-btm">
<div class="top"> <img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png"> </div>
<div class="topic text-center">cheese </div>
</div>
<div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6"><img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/Ed-Vizenor-150x150.jpg" class="img-btm">
<div class="top"> <img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png"> </div>
<div class="topic text-center">Cool Beans </div>
</div>
<div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6"><img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/BeauBird-150x150.png" class="img-btm">
<div class="top"> <img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png"> </div>
<div class="topic text-center">I am happy </div>
</div>
<div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6"><img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/ave4-150x150.jpg" class="img-btm">
<div class="top"> <img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png"> </div>
<div class="topic text-center">Hello world! </div>
</div>
</div>
I have added the .row-fluid{...} and div.bottom{...} code blocks to your existing CSS.
.row-fluid {
text-align: center;
}
div.bottom {
display: inline-block;
float: none;
text-align: left;
}
.top {
position: absolute;
top: -5px;
left: 0px;
}
.topic {} .bottom {
position: relative;
top: 0px;
left: 0px;
margin-bottom: 25px;
max-width: 275px;
min-width: 277px;
}
.img-btm {
height: 233px;
width: 228px;
-webkit-border-radius: 233px;
-moz-border-radius: 233px;
border-radius: 233px;
}
.bottom .text-center {
max-width: 275px;
min-width: 277px;
position: absolute;
left: -10px;
top: 18px;
font-size: 18px;
color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="row-fluid">
<div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6">
<img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/image-333x333.jpg" class="img-btm">
<div class="top">
<img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png">
</div>
<div class="topic text-center">cheese</div>
</div>
<div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6">
<img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/Ed-Vizenor-150x150.jpg" class="img-btm">
<div class="top">
<img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png">
</div>
<div class="topic text-center">Cool Beans</div>
</div>
<div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6">
<img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/BeauBird-150x150.png" class="img-btm">
<div class="top">
<img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png">
</div>
<div class="topic text-center">I am happy</div>
</div>
<div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6">
<img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/ave4-150x150.jpg" class="img-btm">
<div class="top">
<img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png">
</div>
<div class="topic text-center">Hello world!</div>
</div>
</div>
<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.4/js/bootstrap.min.js"></script>
source: Bootstrap 3 responsive centered columns
Source has no explanation for the code, so
The class .row-fluid has a text-align:center property which makes its contents centered.
Under div.bottom I have the display:inline-block property which is necessary for its parents text-align property to work; float:none overrides the default float:left and text-align:left is a fix for center positioning the image inside the column div, because there was some padding to the element.
I want to achieve a grid like the shown below:
I have been looking to Twitter Bootstrap grid system, but since it is oriented to rows, I can't see how to achieve this.
Is there any way of doing it, or should I stick to manually css?
You can nest Rows and cols:
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-md-12">left top</div>
<div class="col-md-12">left bottom</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-12">right top</div>
<div class="col-md-12">right bottom</div>
</div>
</div>
</div>
See http://getbootstrap.com/css/#grid under "Nesting Columns"
You can still use Bootstrap grid with some custom styles:
.block {
border: 3px #222 solid;
padding: 10px;
margin-bottom: 10px;
}
.block-1 {
height: 100px;
}
.block-2 {
height: 50px;
}
.block-3 {
height: 50px;
}
.block-4 {
height: 100px;
}
<link data-require="bootstrap-css#*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<div class="container">
<div class="row">
<div class="col-xs-8">
<div class="block block-1">Block 1</div>
<div class="block block-2">Block 2</div>
</div>
<div class="col-xs-4">
<div class="block block-3">Block 3</div>
<div class="block block-4">Block 4</div>
</div>
</div>
</div>
Just set 2 parents width col-xs-* with children
main{padding: 20px}
section, article{display: inline}
article, div{border: 4px solid black; margin-bottom: 10px}
article:nth-child(1){height: 80px}
article:nth-child(2){height: 40px}
div:nth-child(1){height: 30px}
div:nth-child(2){height: 90px}
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<main class=row>
<section class="col-xs-8">
<article></article>
<article></article>
</section>
<aside class="col-xs-4">
<div></div>
<div></div>
</aside>
</main>
Read more about Grid system .