I am trying to output value from vue variable within quotation.
<div v-for="product in inventory" class="col">
<div class="card shadow-sm">
<div style="background-image: url('images/{{ product.img }}')"
class="bd-placeholder-img card-img-top"></div>
</div>
Related
I'm building a website but I'm having a problem that I need to resolve
You can use the following photos for reference
We are getting this
We want this.
thank you
When we try to make height auto, we get different results.
My Code
<div class="row">
<div class="col-lg-3">
Content
Content
Content
Content
</div>
<div class="col-lg-3">
Content
Content
</div>
<div class="col-lg-3">
Content
Content
Content
</div>
<div class="col-lg-3">
Content
</div>
<div class="col-lg-3">
Content
Content
Content
Content
Content
</div>
<div class="col-lg-3">
Content
</div>
<div class="col-lg-3">
Content
Content
Content
</div>
</div>
I can't tell you exactly without seeing your source, so I'd recommend you edit that in, if possible.
Triple backticks ``` before and after a block of code will show it nicely with syntax highlighting!
For the actual question, though, here's my best guess as to what's going on, based on similar issues I've seen in the past:
<div class="container">
<div class="row">
<div class="col-6">
<div style="height: 250px" class="card m-2 bg-primary"></div>
</div>
<div class="col-6">
<div style="height: 100px" class="card m-2 bg-primary"></div>
</div>
<div class="col-6">
<div style="height: 60px" class="card m-2 bg-primary"></div>
</div>
<div class="col-6">
<div style="height: 200px" class="card m-2 bg-primary"></div>
</div>
</div>
</div>
As you may know, Bootstrap uses a "12-column" system for layouts.
Each row contains 12 equal "column-units", that can be divvied out between child columns.
In the above, I'm setting each column to be 6 "column-units" wide (col-6), which means they will each be half of the parent container's width.
That works fine for the first two, but the third won't fit, and needs to overflow.
When a row overflows, in some ways it acts as if you've created a second row to hold the overflow:
<div class="container">
<div class="row">
<div class="col-6">
<div style="height: 250px" class="card m-2 bg-primary"></div>
</div>
<div class="col-6">
<div style="height: 100px" class="card m-2 bg-primary"></div>
</div>
<!-- First row "ends" -->
<!-- Second row "begins" -->
<div class="col-6">
<div style="height: 60px" class="card m-2 bg-primary"></div>
</div>
<div class="col-6">
<div style="height: 200px" class="card m-2 bg-primary"></div>
</div>
</div>
</div>
To fix this, you only want one column element for each column you're showing, with all the children of that column inside it:
<div class="container">
<div class="row">
<div class="col-6">
<!-- All elements in the first column should be placed here -->
<div style="height: 250px" class="card m-2 bg-primary"></div>
<div style="height: 100px" class="card m-2 bg-primary"></div>
</div>
<div class="col-6">
<!-- All elements in the second column should be placed here -->
<div style="height: 60px" class="card m-2 bg-primary"></div>
<div style="height: 200px" class="card m-2 bg-primary"></div>
</div>
</div>
</div>
The examples above only have two columns, but I put together a simple example using four columns, which you can find here.
For further reading on the Bootstrap 4 grid system, you can see their documentation here.
This might be a bit of a silly question - but I could not find an answer to what I'm trying to do..
I'm trying to make the entire container div responsive (like a column inside a row).
e.g. I want to have the effect that this would produce:
<div className="container">
<div className="row justify-content-center">
<div className="col-lg-6 cold-sm-10">
...
</div>
</div>
</div>
but in one line... something like:
<div className="container-lg-6 container-sm-10">
...
</div>
Is there something in Bootstrap that could achieve this?
I tried the classes container-sm but they are not working like what I want.
That is not how the containers work. But you can easily achieve the layout by just nesting everything inside of a .col-12.col-sm-10.col-lg-6 inside a .row inside a .container-fluid
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<div class="container-fluid p-0">
<div class="row justify-content-center">
<div class="col-12 col-sm-10 col-lg-6">
<div class="row">
<div class="col bg-primary">
<h1>1</h1>
</div>
<div class="col bg-secondary">
<h1>2</h1>
</div>
<div class="col bg-info">
<h1>3</h1>
</div>
</div>
<div class="row">
<div class="col bg-info">
<h1>4</h1>
</div>
<div class="col bg-primary">
<h1>5</h1>
</div>
</div>
</div>
</div>
</div>
I'm really confused by the columns system in Bootstrap. Here is what I have:
<div class="container-fluid">
<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">Cards</h1>
</div>
<div class="row">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-2 col-md-2 mb-2">
<div class="card border-left-primary shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Stop</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">8</div>
</div>
<div class="col-auto">
<span class="material-icons">
pan_tool
</span>
</div>
</div>
</div>
</div>
</div>
I have 8 cards total and 2 of them fall in the second line, because of spacing. How can I achieve a professional view with my cards? I need to show 12 different status of machines we have, start, stop, and run.
Here is the link of jsFiddle:
https://jsfiddle.net/rbk27ote/1/
You just need put class 'col' for all your div element those you want to make equal.just like as below:-
<div class="col"></div>
I added a new advertising block to the header visible here: https://musebycl.io/test_page. This made the navigation block move to the far right. I can't figure out why that is happening, even though these elements are supposedly in separate divs.
How do I modify the header ad or the navigation HTML/CSS to bring the navigation back to its normal position as visible on the home page (https://musebycl.io/)?
Your framework applies flex rules on the .row element that push your navigation block to the right, as it has no defined width.
Try to move your add .block-content one level up in your rows into div.container.py-2.row
with this html it works:
<div class="container py-2">
<div class="row justify-content-between align-items-center">
<div class="block-content">
<div
class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">
...
</div>
</div>
<div class="col-auto">
<div class="row justify-content-between align-items-center">
<div class="col-auto">
<div class="region region-logo">
<div id="block-headerad"
class="block block-block-content block-block-content98569f6a-2644-4a93-a22a-d735717c7cda">
</div>
<div id="block-muse-sitebranding-3" class="block block-system block-system-branding-block">
<a href="/" rel="home" class="site-logo">
<img src="https://cdn.musebycl.io/compact-muse-logo.png" alt="Home">
</a>
</div>
</div>
</div>
<div class="col-auto d-none d-lg-block">
<div class="region region-header-primary-menu">
...
</div>
</div>
</div>
</div>
<div class="col-auto">
<div class="row justify-content-between align-items-center no-gutters">
<div class="col-auto d-none d-lg-block">
<div class="social-menu d-flex align-items-center">
...
</div>
<div class="col-auto">
<div id="user-action-menu" class="user-action-menu d-flex align-items-center">
...
</div>
</div>
<div class="d-lg-none">
...
</div>
</div>
</div>
</div>
</div>
You can create external CSS like
#advertising-nav-bar {
position: fixed;
top: 0px;
}
HTML :
<div id="advertising-nav-bar">
<!--content -->
</div>
You have to give your block-content a width.
Like:
.block-content{
width: 500px;
}
guys so I'm pulling in content from a JSON file to populate a grid of images. when the data loads it displays all the images in 1 column instead of in a grid. ideally, i would like a 4 wide image grid. All the CSS for this part of from default Bootstrap 4 values
HTML
<div id="UHD" ng-controller="Content-folders-4K">
<div id="UHD-frames" class="d-flex">
<div ng-repeat="friend in UHD" class="row">
<div id="img-frame" class="col-md-3 col-sm-6 col-xs-12">
<a href="/4k/{{friend.name}}.html">
<img alt="{{friend.name}}" src="assets/images/4k-thumbs/{{friend.name}}.jpg" class="img-fluid">
</a>
<p class="font-weight-bold text-center">{{friend.name}}</p>
</div>
</div>
</div>
</div>
Current result
Expected (simulated) result
I think You didn't wrap Your Grid with container and row class
Follow below example
<div class="container">
<div class="row">
<div class="col"> 1 of 2 </div>
<div class="col"> 2 of 2 </div>
</div>
</div>
**Wrap Your column div with container and row class **
You want to iterate the columns instead of the row...
<div id="UHD" ng-controller="Content-folders-4K">
<div id="UHD-frames" class="d-flex">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12" ng-repeat="friend in UHD">
<a href="/4k/{{friend.name}}.html">
<img alt="{{friend.name}}" src="assets/images/4k-thumbs/{{friend.name}}.jpg" class="img-fluid">
</a>
<p class="font-weight-bold text-center">{{friend.name}}</p>
</div>
</div>
</div>
</div>
here's the code I used to get it to work.
<div id="UHD" ng-controller="Content-folders-4K" class="row">
<div ng-repeat="friend in UHD" class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<a href="{{friend.link}}">
<div id="tiles" class="tiles">
<img src="thumbs/111/{{friend.name}}.png" alt="" />
</a>
<p class="text-center">{{friend.name}}</p>
</div>
</div>
</div>