I am using Bootstrap V4 Alpha and I am making rows.
However I am expecting the rows to have spacing. So with every row I create it just colapses underneath the first row without any space. I am therefore having to use the bootstrap helper classes such as p-b-3 in order to space out rows.
Have I turned something off perhaps?
<div class="container">
<div class="row">
<main role="content" class="col-xs-12 col-md-8">
<div class="row heading-wrapper">
<div class="col-xs-10">
<h1>testing gutters</h1>
</div>
<div class="col-xs-2 p-r-0 pull-xs-right">
<div class="utility-menu">
<i class="fa fa-life-ring utility-icon " aria-hidden="true"></i>
<i class="fa fa-chevron-down menu-chev" aria-hidden="true"></i>
</div>
</div>
</div><!-- /row -->
<div class="row p-b-2" style="background-color:blue;">
<div class="col-sm-4">
<div class="test" style="display:block; height:50px; background:red;">This is test</div>
</div>
<div class="col-sm-4">
<div class="test" style="display:block; height:50px; background:green;">This is test</div>
</div>
<div class="col-sm-4">
<div class="test" style="display:block; height:50px; background:blue;">This is test</div>
</div>
</div>
<div class="row" style="background-color:blue;">
<div class="col-sm-4" >
<div class="test" style="display:block; height:50px; background:orange;">This is test</div>
</div>
<div class="col-sm-4" >
<div class="test" style="display:block; height:50px; background:gray;">This is test</div>
</div>
<div class="col-sm-4" >
<div class="test" style="display:block; height:50px; background:black;">This is test</div>
</div>
</div>
</main>
<aside class="col-xs-12 col-md-4" style="background-color:blue;">
<p>This is the aside</p>
</aside>
</div>
</div>
On Bootstrap4 rows don't have any rule for padding-top or padding-bottom by default. If you want to achieve this behavior, I suggest adding the next to your custom CSS:
.row {
padding-bottom : 2rem; /*For adding a 2rem padding to the bottom of each row*/
}
Hope it helps
It's seems that something has changed from the last vertion (alpha 5). You have to change "p-b-3" to "pb-3". Test it out!
Related
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;
}
I need to implement a cartesian plane with Bootstrap 4 and Flex. The desired output is something like the following image:
The plane is composed by a 10x10 matrix. Moreover I need a row containing the x labels and a column showing the y labels.
Here you are my code:
<div class="d-flex p-2" style="border: 1px solid black; width: 40%; margin-bottom: 50px;">
<div class="d-flex flex-row">
<div class="p-2 align-items-stretch">1</div>
</div>
<div class="d-flex flex-column">
<div class="p-2">1</div>
<div class="p-2">2</div>
<div class="p-2">3</div>
<div class="p-2">4</div>
<div class="p-2">5</div>
<div class="p-2">6</div>
<div class="p-2">7</div>
<div class="p-2">8</div>
<div class="p-2">9</div>
<div class="p-2">10</div>
<div class="p-2 align-items-stretch">11</div>
</div>
<div class="d-flex flex-column">
<div class="p-2">1</div>
<div class="p-2">2</div>
<div class="p-2">3</div>
<div class="p-2">4</div>
<div class="p-2">5</div>
<div class="p-2">6</div>
<div class="p-2">7</div>
<div class="p-2">8</div>
<div class="p-2">9</div>
<div class="p-2">10</div>
</div>
<!-- the same for the other 8 rows -->
</div>
And the associated css:
.p-2 {
border: 1px solid lightgray;
}
.p-2:before {
content:'';
float:left;
padding-top:100%;
}
The actual result is:
I have two problems:
the row number 11 should be stretched until the last column;
the grid items should adapt their size according to the available space
of the container.
How I can reach these goals? Thank you
You can use the Bootstrap grid like this...
Demo: https://www.codeply.com/go/sQA6tvHiZh
<div class="container text-center">
<div class="row">
<div class="col-md-8 mx-auto">
<div class="row">
<div class="col-1">y</div>
<div class="col-11">
<div class="row">
<div class="col">1
</div>
<div class="col">2
</div>
<div class="col">3
</div>
<div class="col">4
</div>
<div class="col">5
</div>
<div class="col">6
</div>
<div class="col">7
</div>
<div class="col">8
</div>
<div class="col">9
</div>
<div class="col">10
</div>
</div>
<!--/row-->
9 more row ...
<div class="row">
<div class="col">x
</div>
</div>
</div>
</div>
</div>
</div>
<!--container-->
</div>
I'm trying to arrange a div like this but can't get it to work.
What I'm getting is this
My thought was to keep the image in its own column and then split the other columns into smaller rows and insert there but that doesn't seem to work. Here's my code:
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="row d-flex w-100 justify-content-between products-div">
<div class="col-sm-1">
<img [src]="prod.imagePath" class="product-page-images">
</div>
<div class="row">
<div class="col-sm-10">
<h3 class="mb-1">{{prod.name}}</h3>
<p class="products-price-text">${{prod.price}}</p>
</div>
</div>
<div class="row">
<div class="col-sm-10">
<h5 class="mb-1">{{prod.seller}}</h5>
</div>
</div>
<div class="row">
<div class="col-sm-10">
<p class="mb-1">{{prod.description}}</p>
</div>
</div>
</div>
</a>
HTML
<div class="container">
<div class="row">
<div class="main-container clearfix">
<div class="col-md-1">
<div class="img-con">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png" alt="" />
</div>
</div>
<div class="col-md-11">
<div class="row">
<div class="col-md-12">
<div class="clearfix">
<div class="pull-left">
<h3>Name</h3>
<small>Seller</small>
</div>
<div class="pull-right">
<h3>Price</h3>
</div>
</div>
</div>
<div class="col-md-12">
<div class="desc">
description
</div>
</div>
</div>
</div>
</div>
</div></div>
css
.main-container
{
border:1px solid ;
}
.img-con
{
height:100%;
width:100%;
}
.img-con img
{
max-width:inherit;
max-height:inherit;
height:100%;
width:100%;
}
.desc
{
border:1px solid;
}
reference link
and style accordingly.. hope this helps
I have something like this and I need to skip first element "comment-id-1" to remove border-style on the next element "border-style". I tried to write, but it doesn't work. Is there some regex rules for css? How can I do this?
.comments-list:not(:first-child)
<div id="comments-list">
<ol class="comments-tree-listan">
<div id="comment-id-1">
<div class="border-style">
<div class="com_info">
<span class="name">Fedor</span></div>
<div class="text">
<div id="comm-id-1"><p>Some text</p></div></div>
</div>
</div>
<div id="comment-id-2">
<div class="border-style">
<div class="com_info">
<span class="name">Validim Puten</span></div>
<div class="text">
<div id="comm-id-2"><p>Text</p></div></div>
</div>
</div>
<div id="comment-id-3">...
</ol>
</div>
[id^="comment-id-"] will give you all id start with the string.
> will get the immediate child after (only one level down)
div[id^="comment-id-"]>.border-style {
border: 1px solid red;
}
<div id="comments-list">
<ol class="comments-tree-listan">
<div id="comment-id-1">
<div class="border-style">
<div class="com_info">
<span class="name">Fedor</span></div>
<div class="text">
<div id="comm-id-1"><p>Some text</p></div></div>
</div>
</div>
<div id="comment-id-2">
<div class="border-style">
<div class="com_info">
<span class="name">Validim Puten</span></div>
<div class="text">
<div id="comm-id-2"><p>Text</p></div></div>
</div>
</div>
<div id="comment-id-3">...
</ol>
</div>
here's my markup:
<style>
a.item
{
border:1px solid #aaa;
background:#ddd;
padding:10px;
display:block;
}
span.price
{
display:block;
text-align:center;
background:#555;
color:white;
}
</style>
<div class="main">
<div class="row">
<div class="col-md-3">
<a class="item" href="#">
<div class="row">
<div class="col-md-6">
IMAGE
</div>
<div class="col-md-6">
<span class='price'>123.45</span>
</div>
</div>
</a>
</div>
<div class="col-md-3">
<a class="item" href="#">
<div class="row">
<div class="col-md-6">
IMAGE
</div>
<div class="col-md-6">
<span class='price'>123.45</span>
</div>
</div>
</a>
</div>
<div class="col-md-3">
<a class="item" href="#">
<div class="row">
<div class="col-md-6">
IMAGE
</div>
<div class="col-md-6">
<span class='price'>123.45</span>
</div>
</div>
</a>
</div>
<div class="col-md-3">
<a class="item" href="#">
<div class="row">
<div class="col-md-6">
IMAGE
</div>
<div class="col-md-6">
<span class='price'>123.45</span>
</div>
</div>
</a>
</div>
</div>
</div>
it looks fine - like this:
the problem however is - when decreasing the browser window's width, it will destroy the layout and will look like this:
"image" and price are not side-bye-side anymore .. any ideas what's wrong with my code?
thanks
Include col-xs-6 next to col-md-6.
https://jsfiddle.net/gqmarfkh/ jsFiddle - I changed 2 of them as an example.
If you change .col-md-6 to col-xs-6 it should solve your problem. The class col-md-6 has no value untill the screen size is medium and up. Class col-xs-* will have a value from x-small and up. Check out this link: http://getbootstrap.com/css/#grid-options