I'm doing a navbar on my website in responsive . But I want a space between navbar brand and nav items... I tried to make a space with justify content (between, evenly, around etc ..) on "navbar-container" Nothing works . ..
Any ideas ? thank you :-D
import {
Container,
Navbar,
Nav,
} from 'react-bootstrap';
import logo from 'src/assets/images/logo.png';
const AppHeader = () => (
<div>
<Navbar id="mainNav" expand="lg">
<Container id="navbar-container">
<Navbar.Brand href="#home"> <img src={logo} alt="logo" height="80" />
</Navbar.Brand>
<h2 className="navbar-title">Concert'o</h2>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav ">
<Nav className="">
<Nav.Link className="ms-auto" href="#home">Accueil</Nav.Link>
<Nav.Link href="#home">Genres</Nav.Link>
<Nav.Link href="#home">Régions</Nav.Link>
<Nav.Link href="#home">Tous les événements</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</div>
);
export default AppHeader;
#use 'src/styles/vars';
#mainNav{
background-color: vars.$backgroundColor;
}
.navbar-title{
color: vars.$fontColor !important;
margin-right: 1em;
font-weight: bolder;
text-align: center;
}
.nav-link {
color: vars.$fontColor !important;
font-weight: bold;
text-align: center;
}
As Navbar is a flexbox, you can take use of "gap-x" bootstrap class. On the other side, you can use the "ps-x" or "ms-x" bootstrap classes on Nav:
Edit: If you want to spread nav items evenly, add "flex-grow-1" and "justify-content-evenly" classes to the Nav:
https://codesandbox.io/s/great-darkness-z4nek4
To create a large gap between the Navlogo and all Navlinks I found that you can change Navbar.Collapse to flex-column then use align-items-end as shown below
Example code
Related
I am trying to implement a horizontal scroll bar to display images , but the width of the wrapper (scroll-container) container is overflowing. I also need to use FlexBox grid to make it responsive for different screen sizes.
Structure for HTML & SCSS is as given below. The container must be inside a mat-tab-group (Angular Material).
div 'item' will contain multiple items.
I am running it on chrome and have checked the inspector, apparently the mat-tab-body-wrapper display: flex property is causing this issue.
Is there any work around for this issue?
HTML
<mat-tab-group>
<mat-tab label="First">
<div class='row scroll-container'>
<div class='col-xs-5 col-sm-8 col-md-9 col-lg-12'>
<div class='horizontal-slider'>
<div class='slider-container'>
<div class='item'>
<img src='' alt=''>
</div>
</div>
</div>
</div>
</div>
</mat-tab>
</mat-tab-group>
SCSS
.scroll-container {
margin: 8px 0 0 0;
.horizontal-slider {
display: flex;
overflow-y: hidden;
max-width: inherit;
overflow-x: scroll;
box-sizing: border-box;
.slider-container {
.item {
display: flex;
margin-right: 8px;
img {
width: 124px;
height: 124px;
}
}
}
}
}
The most effective solution would be as shown below. Alongside the flex-nowrap you need to set the overflow attribute to prevent the whole page expanding.
With overflow property:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<h6>Bootstrap 4 horizontally scrollable card groups</h6>
<div class="d-flex flex-row flex-nowrap overflow-auto">
<div class="card card-block mx-2" style="min-width: 300px;">Card</div>
<div class="card card-block mx-2" style="min-width: 300px;">Card</div>
<div class="card card-block mx-2" style="min-width: 300px;">Card</div>
</div>
I am working on a project. How can I use Javascript to reveal a centered image when clicking inside a box without using a button?
Like this you mean? I used javascript a little, but it works!!!
<!DOCTYPE html>
<html>
<body>
<div style="background-color: red; width: 50px; height: 50px;" onclick="xSignDisplayLetter()" id="one"></div>
<br />
<div style="background-color: red; width: 50px; height: 50px;" onclick="xSignDisplayLetterVerTwo()" id="two"></div>
<br />
<div style="background-color: red; width: 50px; height: 50px;" onclick="revealImg()" id="image"></div>
<script>
function revealImg() {
document.getElementById("image").innerHTML = "<img src='https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png' alt='Image' style='width: 50px; height: 50px;' />"
}
function xSignDisplayLetter() {
document.getElementById("one").innerHTML = "<img src='https://image.freepik.com/free-icon/x-symbol_318-1407.jpg' alt='Image' style='width: 50px; height: 50px;' />"
}
function xSignDisplayLetterVerTwo() {
document.getElementById("two").innerHTML = "<img src='https://d3qdvvkm3r2z1i.cloudfront.net/media/catalog/product/cache/1/image/1800x/6b9ffbf72458f4fd2d3cb995d92e8889/n/o/nope_newthumb.png' alt='Image' style='width: 50px; height: 50px;' />"
}
</script>
</body>
</html>
If you don't know javaScript a little, then there are js tutorials all over the web.
W3Schools is a good idea for short-term tutorials that teach you a lot, and is relatively fun to mess around with.
CodeCademy is a good long-term full code tutorial that will take a few weeks to learn but helps a million via your coding skill. You will need to sign up but it's free and saves all your work (code) when you're done.
You should load the image in your HTML and hide it using a CSS class like hidden. Then you will want to use addEventListener to run a function when the image is clicked, which toggles the visibility of the image. The centering of the image can also be done using CSS.
const blocks = document.querySelectorAll('.block');
blocks.forEach((block) => {
block.addEventListener('click', () => toggleVisibility(block.querySelector('img')));
});
function toggleVisibility(el) {
el.classList.toggle('hidden');
}
.container {
display: flex;
}
.block {
background-color: red;
padding: 10px;
}
.hidden {
display: none;
}
<div class="container">
<div class="block">
<img src="https://www.placehold.it/150x150">
</div>
<div class="block">
<img src="https://www.placehold.it/150x150">
</div>
<div class="block">
<img src="https://www.placehold.it/150x150">
</div>
</div>
add an onclick attribute to your boxes that calls a function that shows a hidden image.
<div onclick="showImages()"></div>
you can add onclick listener to div and in onclick function you can change div's class
<div class="redbox" id="box" onclick="showImage()"></div>
showImage(){
var box =document.getelementbyid("box").
box.classList.remove("redbox");
box.classList.add("image");
}
i am trying to build a responsive website using bootstrap and dreamweaver.
I would like to place an image in my navbar, and place a text link over the image. Im having some trouble getting the text to sit over the image.
Any help would be greatly appreciated.
Here is the source code:
</head>
<body>
<nav class="navbar navbar-fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img src="files /button images/swirl 1 11.svg" alt="" width="130" class="d-inline-block align-top">
Tom
</a>
</nav>
Here is my own css sheet i linked to override bootstarps:
body{
background-color:#F00;
}
nav a{
font-size: 24px;
font-family: Arial, Helvetica, sans-serif;
color: #000;
background-color: transparent;
font-style: normal;
}
In that case, you need to add a bit of custom css like so:
.navbar-brand {
background: url("https://placeimg.com/130/40/animals") no-repeat center;
background-size: cover;
min-width: 130px;
}
Replace that with your SVG and you should be good to go.
That creates a background image for the element with the navbar-brand class.
Using Twitter Bootstrap 3, I have a container, three div place holders, and three images that fill as links each floated side by side and taking up the entire row: When I minimize the screen to make it responsive, I only see the first image (the second two dissapear). What steps would I have to take to make sure that each image becomes responsive and sits one below the other at the minimize dmobile display screen.
Please Note: Each Img. already has class="img-responsive" applied to it.
HTML:
<!--Wide Display Container -->
<div class="wide-display">
<div id="firstholder">
<a href="home.html" title="Home" class="imglink"><img src="/images/slide2.JPG" alt="City Lights Image" class="img-responsive" id="electricone">
<div class="item1">
<h1 class="slickfont1" >First Title</h1>
</div>
</a>
</div>
<div id="secondholder">
<a href="office.html" title="Office" class="imglink"><img src="/images/ant.JPG" alt="City Lights Image" class="img-responsive" id="electrictwo">
<div class="item1">
<h1 class="slickfont1" >Second Title</h1> </div></a>
</div>
<div id="thirdholder">
<a href="reviews.html" title="Locations" class="imglink"><img src="/images/family.JPG" alt="City Lights Image" class="img-responsive" id="thirdelectric">
<div class="item1">
<h1 class="slickfont1" > Third Title</h1>
</div>
</a>
</div>
</div><!-- Wide Display Container -->
CSS:
.wide-display {
min-width:33%;
position: relative;
width: 100%;
height:100%;
margin-top:6px;
overflow: hidden;
height:366px;
}
/*! First img Holder */
#firstholder {
width: 449px;
height: 100%;
float:left;
display:inline-block;
margin-left:1px;
margin-right:0px;
}
.item1 {
width: 24%;
margin: auto;
position:relative;
}
#secondholder {
width: 450px;
height: 100%;
float:left;
display:inline-block;
margin-right:0px;
}
#thirdholder {
width: 449px;
height: 100%;
float:left;
display:inline-block;
}
You have to create Bootstrap Grid to make it work. You can just read the documentation here: http://getbootstrap.com/css/ it's pretty easy to understand. The divs that wrap you images need to have grid classes applied to them.
I'm using a bit of javascript to create a dropdown that appears when an image is clicked. Currently the initial image is centered, but the drop down is appearing at the left of the frame... and I'm stumped. Help would be greatly appreciated. My code is below:
<div align="center" class="dropdown">
<img alt="Select Your District Here" onclick="showMenu()" src="images/buttons/select_district.png" style="width: 200px; height: 36px;" />
<ul aria-labelledby="dLabel" class="dropdown-menu" id="district-dd2" onmouseout="hideMenu()" role="menu" style="display:none">
<li>
Arbuckle</li>
<li>
Country Estates</li>
<li>
Strawberry</li>
<li>
Walnut Ranch</li>
</ul>
<script type="text/javascript">
function showMenu(){
document.getElementById("district-dd2").style.display="block";
}
function hideMenu(){
document.getElementById("district-dd2").style.display="none";
}
</script></div>
Site can be seen here: http://www.waterutilitymanagementservices.com/deloro/water-districts.html
EDIT: CSS for dropdown-menu added. FYI, this site is using joomla beez template with bootstrap, with css heavily modified. the code below comes from bootstrap.css
.dropdown-menu > li > a {
clear: both;
color: #333333;
display: block;
font-weight: normal;
line-height: 20px;
padding: 3px 20px;
white-space: nowrap;
}
EDIT 2: More CSS - After scouring all my css files, it looks like all the references to dropdowns are in bootstrap.css. Rather than past all of them here (which would be long), i posted the CSS as a txt file here: http://www.waterutilitymanagementservices.com/boostrap.txt