I want to add Bootstrap popover with content body in which I want two links named-"Update Profile" and "Logout" in content body. And this Popover I want to apply on a whole div section (div width around 100px and height=70px). So can anyone please help me !! Thank you !!
//Main Row starts of div section where i want to apply popover
<div class="row">
<div class="col-sm-1">
<li><img class="rounded-circle img-responsive" src="https://s3.eu-central-1.amazonaws.com/no-user-image.png" alt="image" style="width: 40px; margin-left: 10px" > </li>
</div>
<div class="col-sm" style="margin-left: 35px">
//second row starts in between a main row(of second column i.e just defined above with margin-left:35px )
<div class="row">
<div class="col-sm"><h4 class="small"> Amy Jackson </h4>
<div class="row">
<div class="col-sm"><h2 class="small" >amy#gmail.com</h2></div>
</div>
</div>
</div>
</div>
</div>
Related
I am currently using bootstrap 4 for the cards. I would like to add a numbering beside my card. which is show in the image below.
I tried adding padding-top on the span text the same goes with the assigned col of the span text but the card beside it is adjusting as well. Can anyone help me with this one?
I want the numbering to be at the horizontal range of the card either at the top or at the middle, as you can see it's above the card.
<div class="container">
<div class="col-sm-2">
<span style="display:inline-block; padding-top: 15px;" >1</span>
</div>
<div class="col-sm-12">
<div class="card h-100" style="width: 15rem;">
<div>
<a class="fancybox" href="admin/files/Images/flutterfest.png">
<img class="card-img-top" src="admin/files/Images/flutterfest.png">
</a>
</div>
<div class="card-body">
<h5 class="card-title text-center">Library Management System</h5>
<p class="card-text">Date added: <span>May 23, 2021</span></p>
</div>
</div>
</div>
</div>
give column classes as col-sm-2 and col-sm-10. there are 12 columns max you can create in bootstrap. So you have given col-sm-12 to second div thats why it is going to next line
<div class="col-sm-2">
<span style="display:inline-block; padding-top: 15px;" >1</span>
</div>
<div class="col-sm-10">
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 am trying to figure out how to display my divs on a single row and change their width.
If the image div doesn't exist, the description div should have width: 100% (or in my case col-12).
How can I change the width?
<div class="d-flex flex-column">
<div *ngFor="let update of updates">
<p class="font-weight-bold">{{update.title}}</p>
<div class="col-9">
<p>{{update.description}}</p>
</div>
<div *ngIf="update.imageUrl" class="col-3">
<img src="{{update.imageUrl}}">
</div>
</div>
</div>
Use ngClass directive and set classes conditionally.
<div class="d-flex flex-column">
<div *ngFor="let update of updates">
<p class="font-weight-bold">{{update.title}}</p>
<div [ngClass]="(update.imageUrl)?'col-9':'col-12'">
<p>{{update.description}}</p>
</div>
<div *ngIf="update.imageUrl" class="col-3">
<img src="{{update.imageUrl}}">
</div>
</div>
</div>
Here is the reference.
I have a bootstrap's panel-based web page made using bootstrap's grid system. The problema is, I have those extra spaces in the left and right side of the divs. Basically the contents are on the center. How do I remove this?
I tried using margin-top, margin-left, margin-right, bootstrap's pull-left and pull-right, margin and padding set to 0, width:100% etc nothing worked.
Here's a picture:
Look at the left and right sides, thise the white spaces i'm trying to remove. I don't know if this is something wrong with my CSS or my bad use of framework (I'm new to it) or some bootstrap's standard behavior that I'm not aware of. But I'd like to what's this and know how to remove this.
Here's my HTML (this is the full HTML of above image except with the master page's HTML of course):
<div class="row">
<div class="col-md-6">
<br />
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class = "panel-title">JUST HAPPEND, YOU KNOW</h3>
</div>
<div class="panel-body">
<p />
<span class="date">15.40</span> CONTENTS GOES HERE... <p />
<span class="date">15.40</span> CONTENTS GOES HERE... <p />
<span class="date">15.40</span> CONTENTS GOES HERE... <p />
<span class="date">15.40</span> CONTENTS GOES HERE... <p />
<input class='btn btn-success' type='submit' value="LET ME READ ALL THAT" title="READ MORE...">
</div>
</div>
</div>
<div class="col-md-6">
<div class = "panel panel-primary">
<div class = "panel-heading">
<h3 class = "panel-title">LAST NEWS</h3>
</div>
<div class = "panel-body">
<p />
MORE CONTENTS GOES HERE
</div>
</div>
</div>
<div class="col-md-6">
<div class = "panel panel-primary">
<div class = "panel-heading">
<h3 class = "panel-title">VIDEOS</h3>
</div>
<div class = "panel-body">
<div class="vid">
<iframe width="420" height="315"
src="https://www.youtube.com/embed/yWP6Qki8mWc?cc_load_policy=1"
frameborder="0" allowfullscreen=""
></iframe>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-primary">
<div class = "panel-heading">
<h3 class = "panel-title">MAY I HELP YOU?</h3>
</div>
<div class = "panel-body">
HELLO
</div>
</div>
</div>
<div class="col-md-8">
<div class="panel panel-primary">
<div class = "panel-heading">
<h3 class="panel-title">THE LIFE</h3>
</div>
<div class = "panel-body">
<div class="row">
<div id="links">
<div class="col-md-4">
<a href="http://4.bp.blogspot.com/-Piugr0fCCpE/UZLhWealhpI/AAAAAAAACUU/UzB5PWn__oA/s1600/passaros0031.jpg" title="Image 1" data-gallery>
<img src="http://4.bp.blogspot.com/-Piugr0fCCpE/UZLhWealhpI/AAAAAAAACUU/UzB5PWn__oA/s1600/passaros0031.jpg" alt="Image 1" class="img-responsive">
</a>
</div>
<div class="col-md-4">
<a href="http://2.bp.blogspot.com/-uk7UKQdsN5c/T_iX9EUDmuI/AAAAAAAABeA/4jpV4UmZjrM/s1600/passaros.jpg" title="Image 2" data-gallery>
<img src="http://2.bp.blogspot.com/-uk7UKQdsN5c/T_iX9EUDmuI/AAAAAAAABeA/4jpV4UmZjrM/s1600/passaros.jpg" alt="Image 2" class="img-responsive">
</a>
</div>
<div class="col-md-4">
<a href="http://1.bp.blogspot.com/_sz2fJjO1XW8/TIwpeTIHrcI/AAAAAAAAE7I/z9fD9BTwWyA/s1600/passaro_001.jpg" title="Image 3" data-gallery>
<img src="http://1.bp.blogspot.com/_sz2fJjO1XW8/TIwpeTIHrcI/AAAAAAAAE7I/z9fD9BTwWyA/s1600/passaro_001.jpg" alt="Image 3" class="img-responsive">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<br /> <br />
<div class="col-md-8">
<div class="row">
<div class="col-md-4">
AAAAAAA
</div>
<div class="col-md-4">
BBBBBBB
</div>
<div class="col-md-4">
CCCCCCC
</div>
</div>
</div>
</div>
I'm assuming that you're trying to make your page full-width, rather than 1170px wide and centered, which is what the .container bootstrap class does. If that is the case, all you need to do is replace .container with .container-fluid:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
foo, bar, foobar
</div>
</div>
</div>
As I don't see any .container declarations in your excerpt, the changes should occur in your master page. Also remember that the number of columns per each .row should always amount to 12 (2 x .col-md-6, 3 x .col-md-4, etc).
CodePen
I found the problem: in bootstrap there is a rule
.container {
width: 1170px;
}
This causes the white gaps. To remove it, simply add width:100% to body-content in site.css
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
width:100%; //ADD THIS
}
Here is the proof: codepen
So, as of right now, there are 3 boxes of span2 and height 140px, and 1 box of span6 and height 400px.
Since there is so much space left below the 3 small boxes, I want to add 3 more boxes of same span and same height.
Here is my code.
<div class="row-fluid"> <!-- Only required for left/right tabs -->
<div class="span2 ">
<div class="thumbnail" style="height:140px">
<p></p>
</div>
</div>
<div class="span2">
<div class="thumbnail" style="height:140px">
<p></p>
</div>
</div>
<div class="span2">
<div class="thumbnail" style="height:140px">
<p></p>
</div>
</div>
<div class="span6">
<div class="thumbnail" style="height:400px">
<div id="pie_graph"></div>
</div>
</div>
</div>
Here is the snapshot.
I want to utilize the vacant position over here.
I tried making another div of row-fluid and then 3 boxes of span2 but they come below the above div, leaving the area vacant.
How do I do that?
You need to wrap the span2's in a span6. Add 2 fluid rows and rename the span2 to span4 (fluid-rows are relative)
Here is an example: http://bootply.com/98914