-1

Here is my code https://jsfiddle.net/2dxgqz2p/

I've tried to center the content but nothing works. I've tried with

"text-align:center; margin:0 auto; margin-left:auto margin-right:auto"

I need to have the text with the bullet side by side.

Johannes
  • 64,305
  • 18
  • 73
  • 130
siva
  • 1
  • 1
  • have you tried removing the col-xs-1 from the bullet points and col-xs-11 from the input? – Victor Luna Apr 19 '17 at 16:34
  • @VictorLuna ok, but what i'm doing on mobile? I want to keep like on desktop format..on mobile too. here is the result without col-xs-11 and col-xs-1 => https://jsfiddle.net/2dxgqz2p/2/ – siva Apr 19 '17 at 16:43
  • Hi @siva, Maybe my accepted answer in this question could help you. Check it out: http://stackoverflow.com/questions/41721586/how-do-i-responsively-center-text-inside-of-a-div/41721874#41721874 – Kenzo_Gilead Apr 20 '17 at 08:27

2 Answers2

0

Well, since you are using bootstrap, you could make the wrapping container narrower (6 columns) and give it an offset (3 columns) that moves it into the middle:

<div class="keywords-main col-xs-6 col-xs-offset-3">

https://jsfiddle.net/Lydxcu7u/

note: I also removed the first class in that div to make that work.

ADDITION AFTER COMMENT:

You can use the above principle on medium and larger screens and add different classes with less (or no) offset for really small screens:

<div class="keywords-main col-md-6 col-xs-10 col-md-offset-3 col-xs-offset-3">

or 

<div class="keywords-main col-md-6 col-xs-12 col-md-offset-3">
Johannes
  • 64,305
  • 18
  • 73
  • 130
  • well, but that's what the different bootstrp callses are for: Do all that with the `md` classes and for the `xs` classes use other `col` numbers that fit the small screen – Johannes Apr 19 '17 at 16:51
  • please note the addition to my answer – Johannes Apr 19 '17 at 16:54
0

I need to have the text with the bullet side by side(for making bullets & text side by side please try this.)

.product-bullet{vertical-align:middle;}
v-stackOverFollower
  • 575
  • 3
  • 12