I designed a sidebar with links and am trying to give space between each of the links ive tried adding
.sidebar-nav>li>a{ padding-bottom: 500px; }
its not adjusting what alternative can be used to adjust this see full code below...
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2">
<ul class="navbar sidebar-nav">
<li class="active">Reports</li>
<li>Reports</li>
<li>Reports</li>
</ul>
</div>
<div class="col-sm-9 col-md-10"></div>
</div>
</div>
don´t know if it's the solution you're looking for, but adding a:
</br>
before the
<li>
adds a space before the next line. try it!
Related
I've written something of a 'custom' nav bar using Bootstrap 4.5.
Basically, it's two columns/grids with a logo in the right column and a list that acts as a nav bar in the other.
I am really pleased with how it looks on a laptop/computer/tablet etc:
But it looks awful on mobile because the logo is aligned to the left (inherited, not actually using anything to align it left) and the list is aligned to the right (class="... text-right ...").
I'd like to make it so both the logo and list are aligned center on smaller mobile. I've tried a few things, like using an #media attribute in css with float:center;, and the only other way I can think to do this is to make the normal nav bar hidden/invisible on mobile and add a new one that's only visible on mobile, but I really don't want to have to do that as it'd mean I'd have to add links to the list twice etc.
I also tried aligning just the list center with this documentation: https://getbootstrap.com/docs/4.0/utilities/text/, but it didn't work.
My current nav-bar is:
<div class="topsection">
<div class="container">
<div class="row">
<div class="col-sm">
<img class="img-responsive" src="https://cdn.example.com/img/logo2.png" height="50px">
</div>
<div class="col-sm align-baseline">
<p><ul class="list-inline text-right font1">
<li class="list-inline-item active-nb">Home</li>
<li class="list-inline-item">Projects</li>
<li class="list-inline-item">My Work</li>
<li class="list-inline-item">Feed</li>
</ul></p>
</div>
</div>
</div>
</div>
<hr class="main">
(The attributes main and topsection aren't important, they just style the backgrounds of things etc)
Currently, it looks like this on mobile:
Use the Bootstrap utility classes. Alignment is already responsive...
<div class="topsection">
<div class="container">
<div class="row justify-sm-content-between justify-content-center">
<div class="col-sm col-auto">
<img class="img-responsive" src="//placehold.it/120x50" height="50px">
</div>
<div class="col-sm">
<ul class="list-inline text-sm-right text-center py-2 font1">
<li class="list-inline-item active-nb">Home</li>
<li class="list-inline-item">Projects</li>
<li class="list-inline-item">My Work</li>
<li class="list-inline-item">Feed</li>
</ul>
</div>
</div>
</div>
</div>
Demo
.your-class{
display:flex;
place-content:center;
}
should work with basic css.
Good day, I am trying to be consistent on the interface aspect of my website. Right now I am trying to make the list in my header become rows if I adjust my screen size to a smaller size. I am stuck in figuring out how to make it into rows if I place multiple links in one div class row. Thanks for any help I can get.
HTML:
<div class="bg-color-white strong">
<div class="container">
<nav>
<div class="row spacer">
<div class="col-md-1">
<div class="logo">
<img src="img/logo_png_solo.png">
</div>
</div>
<div class="col-md-8">
<ul class="list1">
<li>Home</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
</div>
<div class="col-md-3">
Sign Out
<hr>
<ul class="list2">
<li>Login</li>
<li>Register</li>
</ul>
</div>
</div>
</nav>
</div>
EDIT: what i want is to have all the links automatically be in a row if the screen size is smaller, if I add lg, md, sm three of my links are still in one row.
JS Fiddle: https://jsfiddle.net/61kc2hjx/
<div class="row">
<div class="col col-12 col-sm-10 col-md-8 col-lg-6 col-xl-4"></div>
</div>
The .col div will have full width by default. But as the screen gets larger, the col width will decrease progressively. JSFiddle
Edit #1 :
<div class="col-12 col-md-8">
<div class="list1 row">
<a class="col col-4 col-md-12">Home</a>
<a class="col col-4 col-md-12">FAQ</a>
<a class="col col-4 col-md-12">Contact</a>
</div>
</div>
JSFiddle
This is what I understood from your explanations. But I hope you get the idea.
Hi guys been playing around with the bootstrap pannels and trying to understand it all. I am trying to recreate some panels inside other panels.
So for example this website : Website
Is using bootstrap pannels for their recopies. This is what i am trying to recreate with panels however i am not sure how 2 do this.
I have done this so far however it does not look like the one on the website at all
Code:
<div id="mainContainer" class="container">
<div class = "pannels">
<div class="panel panel-default">
<div class="panel-heading">Panel Title</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-body">
</div>
</div>
<div class="panel panel-default">
<button type="button" class="btn btn-success">Success</button>
</div>
</div>
<div class="col-lg-10 col-md-9 col-sm-8 col-xs-6">
<h4>
List Title
</h4>
<ul class="list-group">
<li class="list-group-item">Item One</li>
<li class="list-group-item">Item Two</li>
<li class="list-group-item">Item One</li>
<li class="list-group-item">Item Two</li>
<li class="list-group-item">Item One</li>
</ul>
</div>
</div>
</div>
<div class="panel-footer">
Here comes some text
</div>
</div>
</div>
</div>
I am trying to get everything to the right size. So for example my picture tab is not the right size compared to the site and i am having problem recreating it. I also am struggling to shrink the whole window pannel . I am not sure if i should use CSS to do this or bootstrap etc.
Anyway any help on this would be great .
Thanks
Use CSS. So in your head tag add a link to your own CSS file which adds the styles you want. But make sure it is listed after you link the Bootstrap CSS file.
Ex.
<link rel="stylesheet" type="text/css" href="--Bootstrap URL Here--"/>
<link rel="stylesheet" type="text/css" href="myCustomCSSFile.css"/>
Then inside myCustomCSSFile.css put things like:
panel > panel {
height: 50%;
background-color: orange;
}
or whatever styles you want.
Here's a CSS tutorial: W3Schools CSS Tutorial
I've been asked by a friend to create a website.
I've used bootstrap 3 as a framework for the website and have hit a bit of a stumbling block.
My friend wanted a tabbed section where the background image of the section changes depending on which tab is active. I've been able to make it work for just the tab-pane using css, but I need to be able to change the entire section background and not just the tab pane.
I think it will require some JavaScript, but unfortunately my skills in that area a still a bit too weak to know how to do this, and google has been about as helpful as a hole in the head.
below is the section of html that i need the background image to change with each tab
<section id="about" class="content-section text-center">
<div class="row">
<div class="tab-content vertical-center">
<div id="aboutus" class="tab-pane fade in active">
<h2>...</h2>
<p>...</p>
</div>
<div id="history" class="tab-pane fade">
<h2>...</h2>
<p>...</p>
</div>
<div id="chef" class="tab-pane fade">
<h2>...</h2>
<p>...</p>
</div>
</div>
</div>
</section>
<div class="row">
<div class="col-lg-12 nav-pills-bg">
<ul class="nav nav-pills nav-justified">
<li class="active">
<a data-toggle="pill" href="#aboutus">...</a>
</li>
<li>
<a data-toggle="pill" href="#history">...</a>
</li>
<li>
<a data-toggle="pill" href="#chef">...</a>
</li>
</ul>
</div>
</div>
Any help is appreciated
Put your separate css background images on these:
#aboutus {
background-image:.....
}
#history {
background-image:.....
}
#chef {
background-image:.....
}
I checked your code, all works fine and if you want change only contents background, Carol McKay wrote what you have to add in your code. You don't need in this case any javascript code.
I created small example with your code and bootsrap classes: jsfiddle-link
All gaps you can see depends bootstrap classes, for example, by default class .alert has:
.alert {
padding: 15px;
margin-bottom: 20px;
...
}
And one more example with content below pills and looks more familiar): jsfiddle-link2
Hi guys im making a website with Bootstrap and CodeIgniter, now im designing the news page with 2 side nav-list and I have a problem.
When I put a long text on the nav-list, the text comes out. Please help me.
<div class="container-fluid">
<div class="row-fluid">
<div class="span2"></div>
<div class="span8"></div>
<div class="span2">
<ul class="nav nav-list well">
<div class="row-fluid">
<li class="nav-header">Suggested Users</li>
<li class="span12">
<div class="span4">
<img src="http://i.imgur.com/0YJjVnH.gif" alt="User suggested">
</div>
<div class="span8">
Aezir ssssssssssssssssssssssssssssss
<button class="btn btn-mini btn-info pull-right">Follow</button>
<br>
<strong><small class="pull-right" style="font-size: 9px;">1024 followers</small></strong>
</div>
</li>
</div>
</ul>
</div>
</div>
</div>
The problem here is the length of the word overflowing the container, you can somewhat fix this by adding something like word-wrap: break-word; to that a tag to break the text that overflows out of the container but what I would suggest is to just add enough room for long words around that space. That way you won't have to force the words to break into a new line.