I'd like to know how to replace the position for the image from right side to left side and the text from right side to left side
my code is :-
<div class="section margin-top_50">
<div class="container">
<div class="row">
<div class="col-md-6 layout_padding_2">
<div class="full">
<div class="heading_main text_align_left">
<h2><span> TT </span> ERP </h2>
</div>
<div class="full">
<p> TEST </p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="full">
<img src="images/img2.png" alt="#" />
</div>
</div>
</div>
</div>
</div>
There you go. to change the text from right to left just use the class text-left and if you want it to the right use text-right do the same for the image container
<div class="section margin-top_50">
<div class="container">
<div class="row">
<div class="col-md-6 layout_padding_2">
<div class="full">
<!-- added class text-left -->
<div class="heading_main text_align_left text-left">
<h2><span> TT </span> ERP </h2>
</div>
<!-- added class text-left -->
<div class="full text-left">
<p> TEST </p>
</div>
</div>
</div>
<div class="col-md-6">
<!-- added class text-left -->
<div class="full text-left">
<img src="images/img2.png" alt="#" />
</div>
</div>
</div>
</div>
</div>
if you only want to show image in left side and text in right side then the image column should be there after the text column
<div class="section margin-top_50">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="full">
<img src="images/img2.png" alt="#" />
</div>
</div>
<div class="col-md-6 layout_padding_2">
<div class="full">
<div class="heading_main text_align_left">
<h2><span> TT </span> ERP </h2>
</div>
<div class="full">
<p> TEST </p>
</div>
</div>
</div>
</div>
</div>
</div>
Swapping the elements should be helpful.
<div class="section margin-top_50">
<div class="container">
<div class="row">
<!-- Was in 2nd previously -->
<div class="col-md-6">
<div class="full">
<img src="images/img2.png" alt="#" />
</div>
</div>
<!-- Was in 1st previously -->
<div class="col-md-6 layout_padding_2">
<div class="full">
<div class="heading_main text_align_left">
<h2><span> TT </span> ERP </h2>
</div>
<div class="full">
<p> TEST </p>
</div>
</div>
</div>
</div>
</div>
</div>
Related
I am writing in HTML, using Bootstrap 5. I am trying to make a simple row of cards, however there is a lot of empty padding/space. How do I remove this?
Extra Space between cards
Here is my code:
Code\
<div class="row">
<div class="col">
<div onclick="locations(2)" id="location-2" class="w-75 custom-card">
<div class="card-body">
<h5>
<div class="row">
<div class="col">
<img style="border-radius: 5px;" src="https://flagcdn.com/fi.svg" width=40 height=30>
</div>
<div class="col">
<span class="fs-5" style="margin-left:-30px;line-height:-20px;">Helsinki,</span><br><span style="margin-left:-30px;line-height:-20px;" class="fw-normal fs-6">Finland</span>
</div>
</div>
</h5>
</div>
</div>
</div>
<div class="col">
<div onclick="locations(2)" id="location-2" class="w-75 custom-card">
<div class="card-body">
<h5>
<div class="row">
<div class="col">
<img style="border-radius: 5px;" src="https://flagcdn.com/fi.svg" width=40 height=30>
</div>
<div class="col">
<span class="fs-5" style="margin-left:-30px;line-height:-20px;">Helsinki,</span><br><span style="margin-left:-30px;line-height:-20px;" class="fw-normal fs-6">Finland</span>
</div>
</div>
</h5>
</div>
</div>
</div>
</div>
I tried using g-0 in the row, however it did not change at all.
I have a content that looks like this in large screens:
1 2
3 4
5 6
And I want it to look like this in smaller screens
1
2
3
4
5
6
But instead it looks like this:
1
3
5
2
4
6
How can i pull this off?
My html is something like this:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-lg-6">
<p> Content1 </p>
<div class="row">
<div class="col-sm-4">
<img src="Content3-img" alt="">
</div>
<div class="col-sm-8">
<p> Content3 </p>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<img src="Content5-img" alt="">
</div>
<div class="col-sm-8">
<p> Content5 </p>
</div>
</div>
</div>
<div class="col-lg-6">
<p> Content2 </p>
<div class="row">
<div class="col-sm-4">
<img src="Content4-img" alt="">
</div>
<div class="col-sm-8">
<p> Content4 </p>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<img src="Content6-img" alt="">
</div>
<div class="col-sm-8">
<p> Content6 </p>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-4">
<img src="Content1-img" alt="">
</div>
<div class="col-sm-8">
<p> Content 1 </p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-4">
<img src="Content2-img" alt="">
</div>
<div class="col-sm-8">
<p> Content 2 </p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-4">
<img src="Content3-img" alt="">
</div>
<div class="col-sm-8">
<p> Content 3 </p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-4">
<img src="Content4-img" alt="">
</div>
<div class="col-sm-8">
<p> Content 4 </p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-4">
<img src="Content5-img" alt="">
</div>
<div class="col-sm-8">
<p> Content 5 </p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-4">
<img src="Content6-img" alt="">
</div>
<div class="col-sm-8">
<p> Content 6 </p>
</div>
</div>
</div>
</div>
</div>
Your bootstrap columns should be direct children of the .row bootstrap class. This way you can easily get the results you want.
<div class="container">
<div class="row">
<div class="col-lg-6">
<!--Your content-->
</div>
<div class="col-lg-6">
<!--Your content-->
</div>
<div class="col-lg-6">
<!--Your content-->
</div>
.
.
.
</div>
</div>
I'm working on an angular app and the UI has several .card blocks, but as I keep adding them to the Html, they disappear in the bottom of the page, I was expecting that as I keep adding them a scroll bar would appear in the page, could someone help me with that?
<div class="content-area">
<div class="clr-row">
<div class="clr-col-12">
<div class="card">
<div class="card-block">
<div class="card-title" *ngIf="project">
<app-shr-project-header [project]='project'></app-shr-project-header>
</div>
</div>
</div>
</div>
</div>
<div class="clr-row" style="margin-top: 24px;">
<div class="clr-col-12">
<app-submission-review-grid></app-submission-review-grid>
</div>
</div>
<div class="clr-row">
<div class="clr-col-12">
<div class="card">
<div class="card-block">
<div class="card-title">
<h4>
Information Requests
</h4>
</div>
<div class="card-text">
...
</div>
</div>
</div>
</div>
</div>
<div class="clr-row">
<div class="clr-col-12">
<div class="card">
<div class="card-block">
<div class="card-title">
<h4>
Attachments
</h4>
</div>
<div class="card-text">
...
</div>
</div>
</div>
</div>
</div>
</div>
the main-container is in another component
<div class="main-container">
<app-navbar></app-navbar>
<router-outlet></router-outlet>
</div>
Ok even though my app.component already has a class="main-container, putting another one to this Html, also I was missing the class="content-container", with these two now is working
<div class="main-container">
<div class="content-container">
<div class="content-area">
<h1>
SHPO Response
</h1>
<div class="content-area">
<div class="clr-row">
<div class="clr-col-lg-12">
<div class="card mt-0">
<div class="card-block">
<div class="card-title" *ngIf="project">
<app-shr-project-header [project]='project'></app-shr-project-header>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="clr-row" style="margin-top: 24px;">
<div class="clr-col-12">
<app-submission-review-grid></app-submission-review-grid>
</div>
</div>
<br>
<div class="clr-row">
<div class="clr-col-lg-12">
<div class="card mt-0">
<div class="card-block">
<div class="card-title">
<h4>
Information Requests
</h4>
</div>
<div class="card-text">
...
</div>
</div>
</div>
</div>
</div>
<br>
<div class="clr-row">
<div class="clr-col-lg-12">
<div class="card mt-0">
<div class="card-block">
<div class="card-title">
<h4>
Attachments
</h4>
</div>
<div class="card-text">
...
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have three different divs that should be displaying one after the other, but they just jump right up to each other on the webpage. Here is the code for all of them:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="top-section">
<center>
<div class="container" style="margin-top:150px;">
<div class="row">
<div class="top-title">
<h1>Introducing 10/40 Academy.</h1>
<h3>An affordable entrepreneurship course that can double as high school credit.</h3>
<img src="/Man_iPhone_Desk.jpg" style="height:300px;margin:30px;border-radius:4px;" class="raised hidden-xs" /><br>
Watch Video <span class="glyphicon glyphicon-play-circle"></span>
<h3 class="hidden-sm hidden-xs" style="letter-spacing:2px;margin-top:0px;">SCROLL DOWN</h3>
<h1 class="hidden-sm hidden-xs" style="font-weight:100;font-size:30px;"><span class="glyphicon glyphicon-chevron-down"></span></h1>
</div>
</div>
</div>
</center>
</div>
<div class="begin-tour">
<div class="container">
<div class="row">
<div class="col-md-6" style="margin-top:50px;">
<h2>Interested in small business?</h2>
<h2>We're here to help.</h2>
<p>
Paragraph
</p>
</div>
<div class="col-md-6">
<center>
<img width="70%" src="/MacImageBase.png" />
</center>
</div>
</div>
</div>
</div>
<div class="qualif">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Header here</h2>
<h2>Header</h2>
<p>
some text
</p>
</div>
<div class="col-md-6"></div>
</div>
</div>
</div>
The best way to explain what happens is through a photo.
I've added the 3 divs into the bootstrap container, took out center(it is not used anymore or supported by HTML5), put each div as a 12 column row(col-md-12 class) so they show up one after the other like you wanted:
<div class="container">
<div class="row">
<div class="top-section col-md-12">
<div class="container" style="margin-top:150px;">
<div class="row">
<div class="top-title">
<h1>Introducing 10/40 Academy.</h1>
<h3>An affordable entrepreneurship course that can double as high school credit.</h3>
<img src="/Man_iPhone_Desk.jpg" style="height:300px;margin:30px;border-radius:4px;" class="raised hidden-xs" /><br>
Watch Video <span class="glyphicon glyphicon-play-circle"></span>
<h3 class="hidden-sm hidden-xs" style="letter-spacing:2px;margin-top:0px;">SCROLL DOWN</h3>
<h1 class="hidden-sm hidden-xs" style="font-weight:100;font-size:30px;"><span class="glyphicon glyphicon-chevron-down"></span></h1>
</div>
</div>
</div>
</div>
<div class="begin-tour col-md-12">
<div class="container">
<div class="row">
<div class="col-md-6" style="margin-top:50px;">
<h2>Interested in small business?</h2>
<h2>We're here to help.</h2>
<p>
Paragraph
</p>
</div>
<div class="col-md-6">
<center>
<img width="70%" src="/MacImageBase.png" />
</center>
</div>
</div>
</div>
</div>
<div class="qualif col-md-12">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Header here</h2>
<h2>Header</h2>
<p>some text</p>
</div>
<div class="col-md-6"></div>
</div>
</div>
</div>
</div>
</div>
Here is the plunker so you can see it.
Please let me know if this helps. I didn't see your image until now so I hope it helps.
I am working on a website, in which I need to create four columns of equal width. On top of columns, I need to place an image. Following is my code:
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-10">
<div class="row" style="margin-bottom:30px;">
<div class="col-xs-3">
<div class="row" style="width:100%;height:auto;">
<img src="images/small/one.jpg" />
</div>
<div class="row" style="height:200px;">
<div class="col-xs-12">First column title</div>
</div>
</div>
<div class="col-xs-3">
<div class="row" style="width:100%;height:auto;">
<img src="images/small/two.jpg" />
</div>
<div class="row" style="height:200px;">
<div class="col-xs-12">Second column title</div>
</div>
</div>
<div class="col-xs-3">
<div class="row" style="width:100%;height:auto;">
<img src="images/small/three.jpg" />
</div>
<div class="row" style="height:200px;">
<div class="col-xs-12">Third column title</div>
</div>
</div>
<div class="col-xs-3">
<div class="row" style="width:100%;height:auto;">
<img src="images/small/four.jpg" />
</div>
<div class="row" style="height:200px;">
<div class="col-xs-12">Fourth column title</div>
</div>
</div>
</div>
</div>
<div class="col-xs-1"></div>
</div>
How can I place an image properly above column, image width equal to column width, without creating multiple size images?
Please find the code that works. I just added "img-responsive" class that is bootstrap in build class to all the image tags.
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-10">
<div class="row" style="margin-bottom:30px;">
<div class="col-xs-3">
<div class="row" style="width:100%;height:auto;">
<img src="images/small/one.jpg" class="img-responsive"/>
</div>
<div class="row" style="height:200px;">
<div class="col-xs-12">First column title</div>
</div>
</div>
<div class="col-xs-3">
<div class="row" style="width:100%;height:auto;">
<img src="images/small/two.jpg" class="img-responsive"/>
</div>
<div class="row" style="height:200px;">
<div class="col-xs-12">Second column title</div>
</div>
</div>
<div class="col-xs-3">
<div class="row" style="width:100%;height:auto;">
<img src="images/small/three.jpg" class="img-responsive"/>
</div>
<div class="row" style="height:200px;">
<div class="col-xs-12">Third column title</div>
</div>
</div>
<div class="col-xs-3">
<div class="row" style="width:100%;height:auto;">
<img src="images/small/four.jpg" class="img-responsive"/>
</div>
<div class="row" style="height:200px;">
<div class="col-xs-12">Fourth column title</div>
</div>
</div>
</div>
</div>
<div class="col-xs-1"></div>
</div>