I just started learning HTML and CSS a week ago, and have been learning using coursera and codeacademy. I wanted to make a simple website using bootstrap, with a navigation bar on top, and a big cover pic below that.
The code looks as follows.
<body>
<header class="container">
<div class="logo"> <!--this is where the logo resides-->
<div class="row"> <!--making a row for header elements-->
<figure class="col-xs-7">
</figure>
<div class="col-xs-5" > <!--adds the 3 buttons on top right-->
<button type="button">
<em class="cogs"> </em>
</button>
<button type="button">
<em class="cogs"> </em>
</button>
<button type="button">
<em class="cogs"> </em>
</button>
</div>
</div>
</div>
</div>
</header>
<div class="jumbotron">
<div class="row">
<figure class="col-xs-12"> </figure> <!--cover pic-->
</div>
</div>
</body>
</html>
When I open the html in the browser (with the style sheet), I get the image attached. enter image description here. I though the cover pic would automatically align within the 12 column grid below the navigation bar on top, cropping out the sides. My questions are:
1. Doesn't adding an image automatically fit it in the 12 grid system?
2. How do I push the 3 icons on top to the right of the navigation bar (i.e to the right of the column)?
Thanks a ton guys! I'm grateful for any advise or suggestions in advance.
I think the jumbotron class is formatted purposely to reach the edges of the page.
If I am understanding your question correctly in that you do not want the jumbotron to extend to the edge of the screen, you may want to Place the jumbotron inside the div class="container" as W3CSchools suggests
Bootstrap v3 is neat because it has already created tools like the nav bar. You could try using an using the "< nav >" tag and an unordered list like so:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<!--- image of your logo -->
</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
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.
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!
I am trying to link the nav buttons on a basic html page. Why doesn't it work? Here is my code:
<!-- Primary Menu -->
<div class="module menu left">
<ul id="nav-primary" class="nav nav-primary">
<li>Home</li>
<li>About</li>
<li>Solution</li>
<li>Facilities</li>
<li>Contact</li>
</ul>
</div>
and then .....
For the first link:
<section id="home" class="fullheight dark bg-black">
For the 2nd link:
<h3 id="about"><b><center>Clean Water Innovations was formed to bring solutions for our collective need for clean water.</center></b></h3>
For the 3rd Link:
<h1 id="solution"><b>Solution:</b></h1>
For the 4th Link:
<section id="facilities">
<div class="container text-center">
<div class="row">
For the 5th Link:
<!-- Section / Contact -->
<section id="contact" class="bg-dark dark">
Why is this happening? It looks properly linked to me.
Instead of the code segment below -
href="#home"
Try as shown below -
href="index.html#home"
The above code segment worked pretty well for me.
I'm building the design of a small online IDE with Twitter Bootstrap, but i'm failing to achieve the proper layout due to Ace's height problem.
<body>
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<a class="brand" href=""><img alt="" src=""></a>
<ul class="nav pull-right">
bla bla bla
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<p>This is a sidebar</p>
</div>
<div class="span9">
<div id="editor">asdasdasddas
asd
das
das
das
das</div>
</div>
</div>
</div>
</body>
This is a simple Twitter bootstrap navbar and the container, with two grid columns: one for the sidebar, another for the editor. However, the Ace Editor does not use it's parent height, no matter what i do. How can i create something just like the actual Ace Editor kitchen sink, but using Twitter Bootstrap in a responsive manner (like Cloud9, for example)?
ace uses size of the element to which it is attached
you can do either of following
make span9 position:relative make editor position:absolute;top:0;bottom:0;left:0;right:0
call ace.edit on span9
set editor size with js see https://github.com/ajaxorg/ace/blob/master/lib/ace/ace.js#L96
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.