I didn't really know how to put it in words so here is what i actually need to create but have no idea how.
I'm using the latest version of bootstrap
This is the desired effect
https://www.dropbox.com/s/uwq39tbswp44j1i/desired.jpg?dl=0
and this is what I currently have
https://www.dropbox.com/s/ksvgf9ohdmln6xe/Screenshot%202015-05-03%2002.01.19.png?dl=0
this is the markup
<div class="container">
<img class="img-responsive" src="logo.png">
<h1>The text</h1>
</div>
so what would you recommned the site has to be responsive and in terms of mobile version i think the best case sceneario would either be smaller font or stack it on top of each other.
Please help me I'm quite desperate.
It isn't completely clear what you are asking for, but I'll give it a try.
The first issue that I see is the that you aren't following proper bootstrap layout rules (see http://getbootstrap.com/css/#grid). Below is an example of how to do it. To keep items lined up horizontally, you need to have <div class='row'>. Below is what I think you are looking for.
<div class="container">
<div class='row'>
<div class='col-xs-3'>
<img class="img-responsive" src="http://www.xamalot.com/preview/png3/5e78c8d8-3f02-4e3c-9a3a-d95432c606e3" />
</div>
<div class='col-xs-9'>
<h1>The text</h1>
</div>
</div>
</div>
I have put together a working sample at http://jsbin.com/mafuxeyebu/1/edit?html,output
I'm not entirely sure what you're asking but you could try using a screenshot program to capture the desired header as an image then you would not have to build it.
To make an image responsive in bootstrap you can just use the responsive class:
<img class="responsive">
I just used awesome-screenshot to grab that as an image
right click> open image in new tab if you just want to use this image
Now You could use GIMP or Photoshop to edit in your logo/ slogan.
Obviously this is a work around, but then again im not even sure this is what you wanted.
Thanks
Related
I am currently working on a landing page that uses bootstrap's grid system for positioning and the desktop view has the layout looking something like:
|h1|--------------------|p|
|Button|
The mobile view has it looking like:
|h1|
|p|
|button|
Because of the grid, the h1 and button are in 1 div and the P is in it's own div.
The easy solution would be to just have hidden divs based on the breakpoints, but I'm trying to avoid this. I've tried using the order class to move things around with other elements on the page, but seeing as the parent s are the 2 objects in the grid and not their children, this doesn't work. I could also do this with JS, but I would also like to avoid doing this.
<section class="test">
<div class="container">
<div class="test--content row justify-content-lg-center text-lg-left">
<div class="test--cta col-12 col-lg-5">
<h1>Headline</h1>
<div class="button main">CTA</div>
</div>
<div class="contact--text col-12 col-lg-5">
<p>Content</p>
</div>
</div>
</div>
</section>
As I mentioned, the solution with CSS and JS are pretty clear, but as I've barely used Bootstrap, I am curious to know if this is possible without using the above mentioned solutions or if there was a way to do this with Bootstrap.
I'm studying web development for a few months now and I generally have some problems with the front-end and the UI layout. I often have difficulties placing the elements exactly where I want them. In that case, either I use relative values and break the responsiveness of the site, or I write some rules that seem to me like hacks.
For the example, let's consider this image:
As you can see, there is a Bootstrap container, full-width background color, two classic elements inside the container and an image outside.
For this kind of layout, I'd do something like the following:
<!-- /* MAIN WRAPPER -->
<div class="pull-right">
<img src="/img/topright_image.PNG" alt="shape">
</div>
<div class="bg-red"> <!-- Red background color. -->
<div class="container">
<header class="row">
<div class="hidden-sm hidden-xs col-sm-2" id="logo"> <!-- I'm using Bootstrap 3, IIRC there's a better way to do that in Bootstrap 4. -->
<img src="/img/logo.PNG" alt="logo">
</div>
<div class="col-sm-6 col-sm-push-3" id="title"> <!-- First difficulty, how to make sure the title will always be centered without being relative to the logo and no matter its content? -->
<h1>Centered title</h1>
</div>
</header>
</div>
</div>
<div class="bg-green"> <!-- Multiple containers, just to have colored backgrounds at 100% width of the page. -->
<div class="container">
<section></section>
</div>
</div>
<!-- MAIN WRAPPER */ -->
It's a quick draft, but you get the idea. The CSS will then implement arbitrary height for the header and the section (300px and 400px), then the max-width for the container.
How to do that properly?
(And what if I want to make the logo a little above the title; between two rows?)
"Proper" is relative. Which makes this a tough question to answer. Using only TBS, this solution is how I would do it. However, I tend to favor flexbox more than TBS so I'd probably use the TBS container how you have it set up (yes, doing that to the containers is a valid way of achieving your goal. Another method I have used before, is box-shadows. Neither option is better, but now you know), and then handle each row as a flexbox or even just simply use floats and centering. This is not a very heavy layout.
If you are looking to learn how to do it "properly", I'd read other code. Specifically for TBS I'd recommend Start Bootstrap. It has a bunch of TBS themes you can look at. Look at the code, see how they do it, see what you like, start doing that.
Ultimately, in the end, it doesn't matter how you get there[1] it just matters that you do. This is a viable solution, and I don't see anything glaringly wrong or hackish.
It actually does matter. But you appear to still be in the learning
phase[2] so it doesn't matter as much so long as you are willing to
keep an open mind and correct things as they are found
We are all always learning.
<div class="slid-info">
<div class="item-logo">
<img src="img/nlogo.png" class="img-responsive" alt="nike"/>
</div>
<div class="carousel-caption">
all model
</div>
</div>
this is a element where i have image-logo this image dont work on responsive plz help me what wrong
I agree with TRiNE I think you need to supply some code either in codepen or plunker etc otherwise people are quite restricted. With that said, I've just tried a dummy test in codepen and the img-responsive utility class works as expected there, in the sense that the image I tested with this class had been styled as expected.
Looking at your screenshot, though, and I'm clutching at straws here based the information you have provided, but is it possible that the styles you have applied to the parent div .item-logo are conflicting here? You are also applying the same styles from .img-responsive to your logo image on line 174 of styles.css - was this to prove that the utility class was not working for you?
Sorry if this isn't the answer your looking for, but if you can supply an example as suggested previously then I'd be happy to look again :)
I'm writing a Bootstrap site and I was wondering if this is acceptable. The site looks how I want it to, but I was wondering if this is best practice?
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-lg-offset-1">
</div>
<div class="col-lg-6 col-lg-push-1">
</div>
</div>
</div>
The approach I'm taking is to use 1 offset for every two missing columns, and use a push for every missing column. What would be the best way to rewrite this for semantic purposes, if at all necessary.
Using Bootstrap offset is perfectly acceptable! What you are using it for (filling in missing columns) is perfectly acceptable too. They would not add it unless they didn't want you to use it.
If you where to not use offset then the only way to move stuff around would be margin (generally). The problem with that is that it ruins the point of using a grid system!
So IMO I think it is perfectly OK to use Bootstrap offset. I use it all the time in my website! :)
I'm making a Mastermind game using html/js and I've almost got my goal layout, except for points A and B, see image below:
http://jsfiddle.net/5Saxg/
A: What is the best way to layout the hintpegs as goal layout, so they are shown on two rows instead of on one line? I mean, so they are shown like in the goal layout. I've tried using a in the html, so like this
<div class="hintcontainer">
<div class="hintpeg"></div>
<div class="hintpeg"></div><br/>
<div class="hintpeg"></div>
<div class="hintpeg"></div>
</div>
But then it jumps down too much. Also when there are 3 or 5 hintpegs, what's the best way to make it "jump in" a little? So it's more like a honeycomb pattern instead of a grid. I've tried using SPAN element:
<div class="hintcontainer">
<div class="hintpeg"></div>
<div class="hintpeg"></div><br />
<span style="margin-left: 10px;"><div class="hintpeg"></div></span>
<div class="hintpeg"></div>
</div>
But this doesn't work and besides I would have to add a lot of span elements, I'd rather use css as this would be easier to manage during the game.
B: What is the best way I want to add a indicator for when the player selects a color, which cycles through all the colors. It's like a small rectangle above the pegs at the bottom. What is the best way to accomplish this?