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;
}
Related
I've made bootstrap cards that appear on two different pages. One on the landing page which I want to increase the spacing and one on the books page which I want to increase the width of the cards. Here's the code that I've written and used in both pages. The only thing that I've changed is on the 6th line from '...col-lg-3' to '...col-lg-2'. If anyone can assist me in adding the spacing and increasing the with of the card, help me if you can. d-flex justify-content-evenly doesn't work when i use col-lg-3.
<section id="about" class="ts-block" >
<div id="cards_landscape_wrap-2">
<div class="container " style="width:70%">
<div class="row d-flex justify-content-around">
#foreach($products as $product)
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<a href="{{route("products.show",$product->slug)}}">
<div class="card-flyer ">
<div class="text-box">
<div class="image-box">
<img src="{{asset($product->image)}}" alt="{{$product->title}}" class="img-fluid rounded mx-auto d-block" width="100%"/>
</div>
<div class="card-footer">
<i class="text-muted"><strike>Ksh.{{$product->old_price}}</strike></i>
<span class="text-primary font-weight-bold">Ksh.{{$product->price}}</span><br>
<span class="mybuttonoverlap btn btn-primary">View</span>
</div>
</div>
</div>
</a>
</div>
#endforeach
</div>
</div>
</div>
</section>
Try including d-flex justify-content-around to a direct parent containing the cards instead of
<div class="row d-flex justify-content-around">. And add margin to the card.
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 d-flex justify-content-around">
<a href="{{route("products.show",$product->slug)}}">
<div class="card-flyer m-2">
<div class="text-box">
<div class="image-box">
<img src="{{asset($product->image)}}" alt="{{$product->title}}" class="img-fluid rounded mx-auto d-block" width="100%"/>
</div>
<div class="card-footer">
<i class="text-muted"><strike>Ksh.{{$product->old_price}}</strike></i>
<span class="text-primary font-weight-bold">Ksh.{{$product->price}}</span><br>
<span class="mybuttonoverlap btn btn-primary">View</span>
</div>
</div>
</div>
</a>
</div
I am using bootstrap for my layout.
<div class="container-fluid footer">
<div class="row p-4">
<div class="col-lg-3 d-flex flex-column justify-content-center align-items-md-center">
<h3>Company</h3>
<div class="mt-3 text-left">
<div class="box">
<p class="link-router" routerLink="/careers">Careers</p>
</div>
<div class="box">
<p class="link-router" routerLink="/about-us"><a>About</a></p>
</div>
<div class="box">
<p class="link-router" routerLink="/contact-us">Contract us</p>
</div>
</div>
</div>
</div>
</div>
Here is for example one column in my row.The content of that column should be on the left ( default )
and centered vertically so for that i used
d-flex flex-column justify-content-center
but now on smaller devices i want the content to be in the center, not in on the left.
So tried with the class
align-items-md-center
to tell that the content should be in the middle on > 768px devices.But then the whole time the content is in the middle not only on md devices.
How shoould i do that ?
Youn need to use align-items-center align-items-md-start. You have centring by default and you reset the center on md (> 768px)
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" >
<div class="container-fluid footer">
<div class="row p-4">
<div class="col-lg-3 d-flex flex-column justify-content-center align-items-center align-items-md-start">
<h3>Company</h3>
<div class="mt-3 text-left">
<div class="box">
<p class="link-router" routerLink="/careers">Careers</p>
</div>
<div class="box">
<p class="link-router" routerLink="/about-us"><a>About</a></p>
</div>
<div class="box">
<p class="link-router" routerLink="/contact-us">Contract us</p>
</div>
</div>
</div>
</div>
</div>
Basically, I have a bootstrap container and 2 rows in it, one being the header and the other the content. I would like to have the container to have the height of the viewport so that the content is scrollable.
<div class="container-fluid overflow-hidden h-100">
<div class="row">
<div class="col">
<h1>Header</h1>
</div>
</div>
<div class="row content-area">
<div class="col">
<div>Content blah...</div>
</div>
</div>
</div>
.content-area {
max-height: 100%;
overflow-y: auto;
}
The max-height renders the content full height of the parent which is the container so a part of the content is chopped off the view. I would like the content to fill the rest of the container's height.
I tried flex-grow-1 from bootstrap instead of the css height but no luck.
Make the container vh-100 d-flex flex-column and then add flex-grow-1 to the row.
<div class="container-fluid overflow-hidden vh-100 d-flex flex-column">
<div class="row">
<div class="col">
<h1>Header</h1>
</div>
</div>
<div class="row content-area bg-info flex-grow-1">
<div class="col">
<h1>Content blah... </h1>
...
</div>
</div>
</div>
Demo: https://codeply.com/p/7u2lXo0jyG
Related: Bootstrap 4 row fill remaining height
Add vh-100 class on the first row. It will make the viewport height, 100%.
<div class="container-fluid overflow-hidden h-100">
<div class="row vh-100">
<div class="col">
<h1>Header</h1>
</div>
</div>
<div class="row content-area">
<div class="col">
<div>Content blah...</div>
</div>
</div>
Source: https://getbootstrap.com/docs/4.4/utilities/sizing/
In the following example is there a bootstrap way of making the div with id "second" fit inside its parent container and not overflow when given h-100 class? A hacky way I used was applying overflow:hidden to the parent container of #second div and it does the job for my specific case but would this be called an elegant solution in this scenario?
<div class="container">
<div class="row">
<div class="col-6 bg-dark">
<div id="first">
<h5 class="text-white">some title</h5>
</div>
<div id="second" class="h-100 bg-success">
</div>
</div>
<div class="col-6 bg-danger">
<img src="http://via.placeholder.com/540x400">
</div>
</div>
</div>
https://www.codeply.com/go/pSVIlOETpB
Sure, just make the containing col-6 display:flex, flex-direction:column by using d-flex flex-column classes on it...
https://www.codeply.com/go/5YiBkLo0qO
<div class="container">
<div class="row">
<div class="col-6 bg-dark d-flex flex-column">
<div id="first">
<h5 class="text-white">some title</h5>
</div>
<div id="second" class="h-100 bg-success">
</div>
</div>
<div class="col-6 bg-danger">
<img src="http://via.placeholder.com/540x400">
</div>
</div>
</div>
I'm new in bootstrap and css, and I want to design this output:
For that purpose write this :
<div class="row">
<div class="col-md-12 col-md-1 col-md-4 col-md-8" style="background-color: yellow; width: 100%; height: 100%; position: fixed;">
<nav class="navbar navbar-default navbar-left">
<div class="container">
behzad
</div>
</nav>
<div class="col-md-1">
</div>
</div>
</div>
But that is not correct, how can I solve that?
You are not using bootstrap correctly. Put your col definitions within separate div's: Also make use of bootstrap's xs, and md definitions. Finally, put your row inside a container.
<div class="container">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-9">
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
</div>
</div>
</div>
Working example: https://jsfiddle.net/mspinks/zf0q5cLk/3/
Bootstrap should follow pattern: container - row - col. Then use -xs (xsmall devices), -sm (small devices), -md (medium devices), -lg (large devices) to change grid design based on device.
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<!-- Left panel, top panel on mobile device -->
</div>
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<!-- Content -->
<div class="row">
<div class="col-xs-1">
<!-- First empty col (Also can use offset) -->
</div>
<div class="col-xs-1">
</div>
<div class="col-xs-1">
</div>
.
.
.
<div class="col-xs-1">
<!-- Last empty col (Also can use offset) -->
</div>
</div>
</div>
</div>
</div>
If u want to use col-offset try this approach:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<!-- Left panel, top panel on mobile device -->
</div>
<div class="col-xs-8 col-lg-offset-2">
<!-- Content -->
<div class="row">
<div class="col-xs-1">
</div>
<div class="col-xs-1">
</div>
.
.
.
</div>
</div>
</div>
</div>
Offset moves columns to the right using .col-xs(sm, md, lg)-offset-*. These classes increase the left margin of a column by * columns. In this example, .col-xs-offset-2 moves columns over two columns.