I have minimal CSS and HTML knowledge and would like to achieve the following: I am using a WordPress theme that uses Bootstrap, and I want to create a row with two columns. Left column has an image, right column has a headline that should be vertically centered. I am using a column shortcode
<div class="row">
<div class="col-6">
IMAGE
</div>
<div class="col-6">
HEADLINE
</div>
</div>
Can anyone help me how to center my headline vertically?
Thank you for your help.
If you are using Bootstrap 4. You can use the below snippet
<div class="row">
<div class="col-6">
<img src="" alt="">
</div>
<div class="col-6 d-flex align-items-center">
Your heading
</div>
</div>
If you are using Bootstrap 3.x.x. You can use the below snippet
<div class="row">
<div class="col-sm-6">
<img src="" alt="">
</div>
<div class="col-sm-6 flex-vcenter">
Your heading
</div>
</div>
CSS (only if Bootstrap ver is 3)
.flex-vcenter {
display: flex
align-items: center
}
Related
I want to make something like this image in bootstrap 5 .
image
also I want to add image inside every three of them . How can I Do this with the bootstrap grid system?
This should be the raw Bootstrap flex box based layout for your design:
<div class="container">
<div class="row">
<div class="col-6">
<div class="row flex-column">
<div>
<img>
</div>
<div>
<img>
</div>
</div>
</div>
<div class="col-6">
<img>
</div>
</div>
</div>
I'm trying to create a layout that looks like the component on the image.
It's a 12 col bootstrap grid. I'm looking to make the text take up 6 cols, 1 col spacer in-between the text and the last col, and then I'd like the last col (image) to take up the rest of the horizontal space, in and out of the container.
I've trying mixing the container and container-fluid classes (not advisable according to Bootstrap docs) and it doesn't work.
How would one achieve this type of a layout using Bootstrap 4?
Image:
Existing code:
<div class="info-side">
<div class="container-fluid">
<div class="row">
<div class="col-6">
<h2>#Model.TitleText</h2>
<p>#Model.AreaText</p>
</div>
<div class="col-1">
</div>
<div class="col-5">
<img src="#Model.Image.Url)" alt="#Model.Image.AlternativeText" style="width: 100%; height:100%;">
</div>
</div>
</div>
</div>
try this
<div class="info-side" >
<div class="container">
<div class="row col">
<div class="col-6 bg-info">
<h2>#Model.TitleText</h2>
<p>#Model.AreaText</p>
</div>
<div class="col-1 bg-warning">
</div>
<div class="col-5 bg-info">
<img src="#Model.Image.Url)" alt="#Model.Image.AlternativeText" style="width: 100%; height:100%;">
</div>
</div>
</div>
</div>
I added col to class row #div tag. It expands to all space available.
In another hand, mix containers regular and fluid is possible, but you have to take care of hierarchy: fluid is widest as regular, so regular must be included alone or inside a fluid class.
See this answer: link
Good Luck!
I've come to the following solution which creates the layout in my original image in the question.
I had to make one row position absolute, this way the two containers are overlapping each other.
<div class="info-side">
<div class="text-side container" style="position: relative;" >
<div class="text-area" style="position: absolute;">
<div class="row">
<div class="col-6 d-flex align-items-center" style="height: 600px;">
<div class="text-items">
<h2>#Model.TitleText</h2>
<p>#Html.Raw(Model.AreaText)</p>
</div>
</div>
</div>
</div>
</div>
<div class="image-side container-fluid">
<div class="row">
<div class="col-7"
<div class="col-5" style="height: 600px; ">
<img src="#Model.Image.Url" alt="#Model.Image.AlternativeText">
</div>
</div>
</div>
</div>
I want to create cards in a loop runtime but the card show vertically align eachother i gave the col-md-4 but it didnot work
enter code here
<div class="row-fluid border mt-3">
<div *ngFor="let data of allWidgets">
<div class="col-md-4 border mt-3">
<div class="card">
<div class="img1">
<img src="https://images.havenly.com/unsafe/550x334/filters:quality(50)/https://s3.amazonaws.com/static.havenly.com/assets/2a35d539-e889-405e-b495-815aa33f65ea" alt="">
</div>
<div class="img2">
<img src="https://images.havenly.com/unsafe/180x180/filters:quality(50)/https://s3.amazonaws.com/havenlydesignerphotos/13078-profile-eb69eheadshot02.jpg" alt="">
</div>
<div class="mian-text mt-0">
<p>{{data.name}}</p>
<p><small>{{data.description}} </small> </p>
View Profile <span style="color: lightgray;">|</span> Select Cherise
</div>
</div>
</div>
</div>
you must use the ngFor not on the first div but on the second like this :
<div class="col-md-4 border mt-3" *ngFor="let data of allWidgets">
this is the solution of your problem.
if you want to create a good angular card you must see:https://mdbootstrap.com/docs/angular/
is the most used site in angular.
have a nice day :)
I'm trying to have image next to the headline in one row, both centered in Foundation 5. Example is here.
HTML
<div class="row">
<div class="panel small-12 column">
<div class="row">
<div class="small-5 column text-right">
<img src="http://placehold.it/60x60&text=logo" />
</div>
<div class="small-7 column text-left">
<h1>APP NAME</h1>
</div>
</div>
</div>
</div>
In this example solution isn't ideal because it is not centered exactly especialy on the large screens.
I've also tried something like this:
HTML
<div class="row">
<div class="panel small-12 column text-center">
<img src="http://placehold.it/60x60&text=logo" />
<h1>APP NAME</h1>
</div>
</div>
But it doesn't work: image isn't centered. What is the best way how to do this in Foundation 5?
Since an img is an inline element and h1 is a block element, you should put the image inside the heading. See the JSFiddle demo.
<link href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css" rel="stylesheet"/>
<div class="row">
<div class="panel small-12 column text-center">
<h1><img src="http://placehold.it/60x60&text=logo" alt="" /> APP NAME</h1>
</div>
</div>
Additionally, alt is a required attribute, so I've added one with a blank value.
I'd have two "sections" in which I am using the bootstrap 3 scaffolding to style. I am having a hard time figuring out how I might have these maintain their column spacing while still be centered on the middle of the page. For example right now it is
<content><content> ---<space>---
and i want
---<space>--- <content><content> ---<space>---
Here is what i've got.
<div class=".container-fluid" id="aboutContent">
<div class="col-md-3">
<img src="../imgs/pic.jpg" alt="Joe Brunett" id="aboutPicture"/>
</div>
<div class="well col-md-4" id="desc">
<p> text<p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3"></div>
</div>
</div>
Offsets can be used to center a div but remember that it'll work only for even columns
<div class="col-md-8 col-md-offset-2"></div>
You can even change the break-point by replacing
<div class="col-md-6 col-md-offset-3"></div>
with
<div class="col-sm-6 col-sm-offset-3"></div>